บทความนี้จะช่วยให้คุณเข้าใจว่า Core Web Vitals สัมพันธ์กับเมตริกธุรกิจที่สำคัญอย่างไร โดยการสำรวจตัวอย่างของบริษัทซึ่งสร้างผลกระทบเชิงบวกต่อผู้ใช้และธุรกิจของตนแล้ว
คุณประสบปัญหาในการโน้มน้าวผู้มีส่วนเกี่ยวข้องให้ปรับใช้ Core Web Vitals หรือไม่ หรือคุณสงสัยหรือไม่ว่าสิ่งนี้จะช่วยธุรกิจของคุณได้จริงไหม บทความนี้จะช่วยให้คุณเข้าใจว่า Core Web Vitals สัมพันธ์กับเมตริกธุรกิจที่สำคัญอย่างไร โดยการสำรวจตัวอย่างของบริษัทซึ่งสร้างผลกระทบเชิงบวกต่อผู้ใช้และธุรกิจของตนแล้ว
หากชอบวิดีโอ โปรดดูการพูดคุยนี้จาก Google I/O
ทำไม Core Web Vitals จึงมีความสำคัญต่อผู้ใช้และธุรกิจของคุณ
ผู้มีส่วนเกี่ยวข้องที่แตกต่างกันในองค์กรอาจมีลำดับความสำคัญต่างกันได้ Core Web Vitals จะนำผลิตภัณฑ์ทั้งหมดมาจากหน้าเดียวกันโดยมุ่งเน้นที่การเพิ่มประสิทธิภาพเมตริกที่เน้นผู้ใช้เป็นหลักและผลลัพธ์การเติบโตของธุรกิจ
เส้นทางสู่ Core Web Vitals ที่ดีอาจแตกต่างกันไปในแต่ละเว็บไซต์ โดยขึ้นอยู่กับตำแหน่งในเส้นทางประสิทธิภาพและความซับซ้อนของการออกแบบเว็บไซต์ อาจมีตั้งแต่การใช้ประโยชน์จากสิ่งที่หวังไว้ต่ำและการได้รับผลลัพธ์ที่เป็นประโยชน์ ไปจนถึงการใช้โซลูชันที่ซับซ้อนเพื่อแก้ไขปัญหาที่ท้าทาย ไม่ว่าจะใช้เวลาเท่าใด ผู้มีอำนาจตัดสินใจควรถือว่านี่เป็นการลงทุนระยะยาวเพื่อให้ธุรกิจเติบโต การมอบประสบการณ์การนำทางที่รวดเร็วและราบรื่นทำให้ผู้ใช้พึงพอใจ และช่วยเปลี่ยนผู้ใช้ให้กลายเป็นลูกค้าประจำและลูกค้าที่กลับมาใช้บริการ สำหรับผู้จัดการผลิตภัณฑ์ ประสิทธิภาพควรเป็นเกณฑ์สำคัญที่กำหนดคุณภาพและความสำเร็จของฟีเจอร์ใหม่ๆ ของผลิตภัณฑ์ ความเป็นเลิศด้านผลิตภัณฑ์และการทำกับความท้าทายที่น่าสนใจก็ทำให้นักพัฒนาซอฟต์แวร์พึงพอใจมากขึ้นด้วยเช่นกัน
แม้ว่า Core Web Vitals จะเป็นสัญญาณการจัดอันดับยิ่งจูงใจให้ใช้เวลาในการเพิ่มประสิทธิภาพ แต่การใช้ Core Web Vitals ยังมีประโยชน์อื่นๆ อีกมากมายทั้งในระยะสั้นและระยะยาวนอกเหนือจากการจัดอันดับ มาดูกรณีศึกษามากมายของแบรนด์ระดับโลกและแบรนด์ท้องถิ่นที่นำ Core Web Vitals มาใช้ (ก่อนที่จะส่งผลต่อการจัดอันดับ) เนื่องจากมุ่งเน้นที่ประสบการณ์ของผู้ใช้
กรณีศึกษา
Vodafone
Vodafone (อิตาลี) เพิ่ม LCP ขึ้น 31% เพื่อให้ได้ยอดขายเพิ่มขึ้น 8%
เทคนิค
- แสดงผล HTML ที่สำคัญฝั่งเซิร์ฟเวอร์
- ลด JavaScript ที่บล็อกการแสดงผล
- เทคนิคการเพิ่มประสิทธิภาพให้รูปภาพ
- ปรับขนาดรูปภาพหลัก เลื่อนเวลาทรัพยากรที่ไม่สำคัญ
ข้อมูลสำคัญ
- การทดสอบ A/B เป็นวิธีที่ดีที่สุดในการวัดผลลัพธ์ที่มีความหมาย
- A/B ควรเป็นฝั่งเซิร์ฟเวอร์
iCook
iCook ได้เพิ่ม CLS ขึ้น 15% และได้รายได้จากโฆษณาเพิ่มขึ้น 10%
เทคนิค
- ขนาดของหน่วยโฆษณาและขนาดหน่วยโฆษณาที่จัดสรรไว้ล่วงหน้าใน UI มีความแปรปรวนน้อยลง
- เพิ่มประสิทธิภาพตรรกะการโหลดสคริปต์โฆษณาเพื่อจัดลำดับความสำคัญการเสนอราคาส่วนหัวและเลื่อนเวลา JS ที่ไม่สำคัญออกไป
ข้อมูลสำคัญ
อัตราการส่งโฆษณาอาจได้รับผลกระทบ แต่ในที่สุดแล้วรายได้ก็เพิ่มขึ้นด้วยการปรับปรุงการมองเห็นโฆษณาให้ดียิ่งขึ้น
โทโกพีเดีย
Tokopedia ปรับปรุง LCP ได้ 55% และเห็นระยะเวลาเซสชันเฉลี่ยดีขึ้น 23%
เทคนิค
- องค์ประกอบ LCP การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR)
- โหลดองค์ประกอบ LCP ล่วงหน้า
- การเพิ่มประสิทธิภาพรูปภาพ (การบีบอัด, WebP, การโหลดแบบ Lazy Loading รูปภาพที่ไม่สำคัญ)
ข้อมูลสำคัญ
- สร้างแดชบอร์ดการตรวจสอบประสิทธิภาพ เพื่อตรวจสอบความคืบหน้าและผลลัพธ์ที่เกิดขึ้นในทีมต่างๆ
- ทดสอบด้วยเทคนิคการแสดงผลที่แตกต่างกัน (เช่น องค์ประกอบ SSR LCP กับ SSR ในครึ่งหน้าบนกับการแสดงผลฝั่งไคลเอ็นต์แบบเต็ม)
เรดบัส
การแก้ไข Core Web Vitals ช่วยให้อัตรา Conversion อุปกรณ์เคลื่อนที่ (mCVR) เพิ่มขึ้น 80-100% และได้รับการจัดอันดับโดเมนเพิ่มขึ้นอย่างมากในผลิตภัณฑ์และบริการในตลาดทั่วโลกของ Redbus
เทคนิค
- การแก้ไขช่องโฆษณาสำหรับคอมโพเนนต์ของหน้าเว็บและนำสคริปต์การแทรกแท็กที่ไม่ได้เพิ่มประสิทธิภาพออก CLS ที่ปรับปรุงใหม่
- การเพิ่มประสิทธิภาพสคริปต์ของบุคคลที่สาม และสร้าง Microservice โดยใช้หลักการความรับผิดชอบเดียวช่วยลด TTI และ TBT ลงอย่างมาก
ข้อมูลสำคัญ
- การลด CLS จาก 1.65 เหลือ 0 ทำให้อันดับโดเมนทั่วโลกดีขึ้นอย่างมาก
- การลด TTI จากประมาณ 8 วินาทีเป็นประมาณ 4 วินาทีและ TBT จากประมาณ 1,200 มิลลิวินาทีเป็นประมาณ 700 มิลลิวินาที ทำให้มี mCVR เพิ่มขึ้น 80-100% ในผลิตภัณฑ์และบริการทั่วโลก
- การใช้เครื่องมือ RUM ช่วยให้เห็นเมตริกประสิทธิภาพจริงในตลาดระดับต่ำกว่า
- การปรับใช้วัฒนธรรมด้านประสิทธิภาพเป็นสิ่งสำคัญมากเพื่อหลีกเลี่ยงการถดถอย นอกจากนี้ยังช่วยเพิ่มประสิทธิภาพการทำงานของทีมด้วยโค้ดที่เพิ่มประสิทธิภาพ การเผยแพร่ที่เร็วขึ้น และปัญหาเกี่ยวกับเวอร์ชันที่ใช้งานจริงที่น้อยลง
กรณีศึกษาด้านบนแสดงให้เห็นว่าคุณสามารถประสบความสำเร็จได้มากมาย จากการนำแนวทางปฏิบัติแนะนำไปใช้และการประสบความสำเร็จอย่างรวดเร็ว ตัวอย่างการใช้งานจริงของประเด็นนี้มีดังนี้
ได้ผลลัพธ์ข้างต้นโดยการจับผลไม้ที่ห้อยต่ำ เช่น
| การเพิ่มประสิทธิภาพรูปภาพ | การเพิ่มประสิทธิภาพ JavaScript | โฆษณาและเนื้อหาแบบไดนามิก |
|---|---|---|
| การใช้รูปแบบรูปภาพ WebP | กำลังเลื่อนเวลา JS ของบุคคลที่สาม | การจองพื้นที่สำหรับโฆษณาครึ่งหน้าบน |
| การใช้ CDN รูปภาพ | การนำการบล็อกการแสดงผลและ JS ที่ไม่ได้ใช้ออก | การตั้งค่าความสูงของเนื้อหาแบบไดนามิก |
| การบีบอัด | การโหลด JS ที่ไม่สำคัญแบบ Lazy Loading | |
| การเลื่อนเวลาแสดงรูปภาพที่ไม่สำคัญ | กำลังโหลด JS ที่สำคัญล่วงหน้า | |
| กำลังโหลดรูปภาพหลักล่วงหน้า | ||
| การระบุสัดส่วนภาพ |
ดูแนวทางปฏิบัติแนะนำเพิ่มเติมได้ในหลักเกณฑ์ของ Web Vitals ใช้ PageSpeed Insights เพื่อตรวจสอบเว็บไซต์และรับคำแนะนำที่นำไปใช้ได้จริงทันที
มีแบรนด์ระดับโลกอีกมากมายที่ได้รับประโยชน์จากการลงทุนใน Core Web Vitals
- Tencent Video ได้รับ CTR ที่ดีขึ้น 70% สําหรับวิดีโอจากการส่งผ่าน Core Web Vitals
- Cdiscount ได้ปรับปรุงเมตริกทั้ง 3 รายการซึ่งมีรายได้เพิ่มขึ้น 6% ในการลดราคาช่วงแบล็คฟรายเดย์
- Wix เพิ่มต้นทางบนอุปกรณ์เคลื่อนที่ผ่าน Core Web Vitals ได้กว่า 250% เมื่อเทียบกับปีก่อนหน้า
- Nykaa พบว่า LCP ที่เพิ่มขึ้น 40% ทำให้มีการเข้าชมจากการค้นหาทั่วไปเพิ่มขึ้น 28% จากเมือง T2/T3
- LCP ที่เพิ่มขึ้น 18% ของ NIKKEI Style ส่งผลให้มีการดูหน้าเว็บต่อเซสชันเพิ่มขึ้น 9%
- NDTV ได้รับอัตราตีกลับที่ดีขึ้น 50% หลังจากลด LCP ลงครึ่งหนึ่ง รวมถึงการเปลี่ยนแปลงอื่นๆ ของผลิตภัณฑ์
- LCP ที่ดีขึ้น 70% ของ Agrofy Market สัมพันธ์กับการละทิ้งการโหลดที่ลดลง 76%
- Flipkart ได้รับอัตราตีกลับลดลง 2.6% จากการปรับปรุงเมตริก Core Web Vitals
- Ameba Manga เพิ่มจำนวนหนังสือการ์ตูนที่อ่านได้ 2-3 ครั้งโดยเพิ่มคะแนน CLS ขึ้น 10 เท่า
- Yahoo! Japan ได้แก้ไข CLS ซึ่งส่งผลให้หน้าเว็บที่มีคุณภาพแย่ลดลง 98% และการดูหน้าเว็บต่อเซสชันเพิ่มขึ้น 15%
- AliExpress ปรับปรุง CLS ได้ถึง 10 เท่าและ LCP เพิ่มขึ้น 2 เท่า ซึ่งแปลว่ามีอัตราตีกลับลดลง 15%
- GEDI พบว่า CLS ลดลง 77% และอัตราตีกลับลดลง 8%
คุณจะเริ่มต้นได้อย่างไรในขณะนี้
ขั้นตอนที่ 1: เริ่มวัด
เริ่มต้นด้วยการวัดข้อมูลภาคสนามของเว็บไซต์โดยใช้เครื่องมือตรวจสอบผู้ใช้จริง (RUM) มีเครื่องมือ RUM ต่างๆ ของ Google และบุคคลที่สาม (3P) อยู่แล้ว
เครื่องมือ Google RUM
- Search Console
- PageSpeed Insights
- ไลบรารี JavaScript ของ Web-vitals
- รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX)
เครื่องมือ RUM ของบุคคลที่สาม
- Cloudflare
- โบราณวัตถุใหม่
- อะคามัย
- ปรับเทียบ
- สามเหลี่ยมสีฟ้า
- ผู้รักษาการณ์
- SpeedCurve
- เรกัน
เลือกเครื่องมือที่เหมาะกับคุณที่สุด คุณยังพัฒนาไปอีกขั้นและผสานรวมกับ Google Analytics 4 เพื่อเชื่อมโยง Core Web Vitals กับเมตริกธุรกิจของคุณได้
ขั้นตอนที่ 2: โน้มน้าวผู้มีส่วนเกี่ยวข้อง
- ให้ความรู้แก่ผู้มีส่วนเกี่ยวข้องเกี่ยวกับความสำคัญของการนำ Core Web Vitals ไปใช้เพื่อปรับปรุงประสบการณ์ของผู้ใช้และความสัมพันธ์กับเมตริกธุรกิจของบริษัท
- หาผู้สนับสนุนเป็นการภายในเพื่อเริ่มการทดลองขนาดเล็ก
- สร้างเป้าหมายร่วมกันระหว่างผู้มีส่วนเกี่ยวข้องเพื่อปรับปรุง Core Web Vitals ให้กับทีมต่างๆ
ขั้นตอนที่ 3: สร้างการติดตั้งใช้งานที่ประสบความสำเร็จโดยใช้เคล็ดลับเหล่านี้
- จัดลำดับความสำคัญ: เลือกหน้าเว็บที่มีการเข้าชมและ/หรือมีนัยสำคัญของ Conversion สูงเพื่อแสดงผลลัพธ์ที่มีประโยชน์ (เช่น หน้า Landing Page ของโฆษณา, หน้า Conversion หรือหน้ายอดนิยม)
- การทดสอบ A/B: ใช้การทดสอบฝั่งเซิร์ฟเวอร์เพื่อหลีกเลี่ยงค่าใช้จ่ายในการแสดงผล เปรียบเทียบผลลัพธ์ระหว่างเวอร์ชันที่เพิ่มประสิทธิภาพและไม่ได้เพิ่มประสิทธิภาพ
- ติดตาม: ใช้การตรวจสอบอย่างต่อเนื่องเพื่อป้องกันการถดถอย
สุดท้ายนี้ เราเชื่อว่าประสิทธิภาพคือเส้นทาง ไม่ใช่จุดหมาย ด้วยเหตุนี้ เราจึงวางแผนที่จะอัปเดตบทความนี้ด้วยไฮไลต์กรณีศึกษาล่าสุดอยู่เสมอ หากคุณประสบความสำเร็จทางธุรกิจที่น่าสนใจและต้องการแสดงในบทความนี้ โปรดส่งข้อเสนอเนื้อหา