ผลกระทบทางธุรกิจจาก Core Web Vitals

บทความนี้จะช่วยให้คุณเข้าใจว่า 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 ช่วยให้เห็นเมตริกประสิทธิภาพจริงในตลาดระดับต่ำกว่า
• การปรับใช้วัฒนธรรมด้านประสิทธิภาพเป็นสิ่งสำคัญมากเพื่อหลีกเลี่ยงการถดถอย นอกจากนี้ยังช่วยเพิ่มประสิทธิภาพการทำงานของทีมด้วยโค้ดที่เพิ่มประสิทธิภาพ การเผยแพร่ที่เร็วขึ้น และปัญหาเกี่ยวกับเวอร์ชันที่ใช้งานจริงที่น้อยลง

กรณีศึกษาด้านบนแสดงให้เห็นว่าคุณสามารถประสบความสำเร็จได้มากมาย จากการนำแนวทางปฏิบัติแนะนำไปใช้และการประสบความสำเร็จอย่างรวดเร็ว ตัวอย่างการใช้งานจริงของประเด็นนี้มีดังนี้

ได้ผลลัพธ์ข้างต้นโดยการจับผลไม้ที่ห้อยต่ำ เช่น

ดูแนวทางปฏิบัติแนะนำเพิ่มเติมได้ในหลักเกณฑ์ของ 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: ใช้การทดสอบฝั่งเซิร์ฟเวอร์เพื่อหลีกเลี่ยงค่าใช้จ่ายในการแสดงผล เปรียบเทียบผลลัพธ์ระหว่างเวอร์ชันที่เพิ่มประสิทธิภาพและไม่ได้เพิ่มประสิทธิภาพ
• ติดตาม: ใช้การตรวจสอบอย่างต่อเนื่องเพื่อป้องกันการถดถอย

สุดท้ายนี้ เราเชื่อว่าประสิทธิภาพคือเส้นทาง ไม่ใช่จุดหมาย ด้วยเหตุนี้ เราจึงวางแผนที่จะอัปเดตบทความนี้ด้วยไฮไลต์กรณีศึกษาล่าสุดอยู่เสมอ หากคุณประสบความสำเร็จทางธุรกิจที่น่าสนใจและต้องการแสดงในบทความนี้ โปรดส่งข้อเสนอเนื้อหา