ทีมได้วิเคราะห์ข้อมูลจากการเข้าชม 10 ล้านครั้งในหน้า Landing Page และพบความสัมพันธ์ที่เห็นได้ชัดระหว่าง Largest Contentful Paint กับอัตรา Conversion
Groupe Renault เป็นผู้ผลิตรถยนต์ข้ามชาติจากฝรั่งเศสที่มีสำนักงานอยู่ในกว่า 130 ประเทศ สำหรับกลุ่มยานยนต์อย่าง Renault เว็บไซต์แบรนด์ที่มีประสิทธิภาพที่ดึงดูดการมีส่วนร่วมของผู้ใช้และ Conversion มากขึ้นหมายถึงการมีธุรกิจมากขึ้น เว็บไซต์แบรนด์ทั้งหมดของบริษัทมุ่งเน้นการมอบประสบการณ์ที่ดีที่สุดแก่ผู้ใช้ในวงกว้าง ขณะเดียวกันก็รักษาความยืดหยุ่นของเนื้อหาและฟีเจอร์สำหรับเว็บไซต์ที่แปลแล้ว ในบริบทนี้ การตรวจสอบประสิทธิภาพจึงเป็นส่วนสำคัญสำหรับทีมดูแลประสบการณ์ของลูกค้า ซึ่งมีหน้าที่พัฒนาและดูแลรักษาแพลตฟอร์มระดับโลก
การวัดผลลัพธ์ทางธุรกิจของ Core Web Vitals
การวัดผลใน Google Analytics
Renault ทำงานร่วมกับพาร์ทเนอร์ด้านข้อมูลทั่วโลก 55 รายเพื่อสร้างไลบรารี Web Vitals ซึ่งทำให้สามารถส่งข้อมูลเมตริก Web Vitals ทั้งหมดจากผู้ใช้จริงไปยัง Google Analytics ในลักษณะที่ตรงกับวิธีที่ Chrome วัดและรายงานไปยังเครื่องมืออื่นๆ ของ Google ได้อย่างถูกต้อง
การวิเคราะห์ต่อไปนี้จะแสดงชุดข้อมูลที่บันทึกโดยใช้เครื่องมือเหล่านี้ในช่วง 4 เดือนระหว่างเดือนธันวาคม 2020 ถึงมีนาคม 2021
LCP ที่เพิ่มประสิทธิภาพมีความสัมพันธ์อย่างมากกับการมีส่วนร่วมของผู้ใช้และเมตริกธุรกิจ
ทีมต่างๆ ได้ระบุความสัมพันธ์ที่ชัดเจนเป็นพิเศษระหว่าง Largest Contentful Paint (LCP) ระดับต่ำกับอัตราตีกลับและอัตรา Conversion ที่น่าพอใจ ดังที่แสดงในภาพด้านล่าง
ชุดข้อมูลรวบรวมข้อมูลการเข้าชมกว่า 10 ล้านครั้งใน 33 ประเทศในระยะเวลา 4 เดือน และแสดงให้เห็นว่ามาตรการ LCP ที่ต่ำลงสัมพันธ์กับปัจจัยต่อไปนี้อย่างไร
- ลดอัตราการตีกลับ
- Conversion เพิ่มขึ้น (กรอกแบบฟอร์มโอกาสในการขายเรียบร้อยแล้ว)
เป็นที่น่าสนใจเนื่องจากเว็บไซต์ทำงานเป็นแอปพลิเคชันหน้าเว็บเดียว (SPA) มาตรการเหล่านี้ทั้งหมดจะบันทึกอยู่ในหน้า Landing Page เท่านั้น ข้อมูลแสดงให้เห็นว่าควรเพิ่มประสิทธิภาพเว็บไซต์จนกว่า LCP จะต่ำกว่า 1 วินาที เว็บไซต์แบรนด์ของกลุ่มสามารถเพิ่มประสิทธิภาพได้ไม่ยาก
ชุดข้อมูลนี้ไม่เพียงแต่แสดงความสัมพันธ์เชิงลบระหว่าง LCP กับเมตริกธุรกิจเท่านั้น แต่ยังแสดงให้เห็นความคลาดเคลื่อนของประสิทธิภาพในหน้า Landing Page ที่มีประสิทธิภาพดีที่สุด ในบริบทของเว็บไซต์นี้ การได้รับ LCP ต่ำกว่า 1 วินาทีจะนำไปสู่ Conversion ที่เพิ่มขึ้นอย่างมากและอัตราการตีกลับลดลง
Eja Rakotoarimanana ที่ปรึกษา 55 คน
การปรับปรุง LCP ใน 1 วินาทีอาจทำให้อัตราตีกลับลดลง 14 เปอร์เซ็นต์ (ppt) และ Conversion เพิ่มขึ้น 13%
การปรับปรุง LCP ใน 1 วินาที | ผลลัพธ์ |
---|---|
LCP ประมาณ 1 วินาที | CVR เพิ่มขึ้น 13% |
LCP ต่ำกว่า 1.6 วินาที | อัตราตีกลับ -14 ppt |
LCP สูงกว่า 1.6 วินาที | อัตราตีกลับ -5 ppt |
แนวทางของ Renault ในการเพิ่มประสิทธิภาพ Core Web Vitals ในวงกว้าง
ตั้งแต่ต้นปี 2020 ในตลาดยุโรปยอดนิยม 5 อันดับแรกของแบรนด์ จำนวนผู้เข้าชมที่พบ LCP ที่รวดเร็ว (ต่ำกว่า 2.5 วินาที) เพิ่มขึ้นเฉลี่ย 22 ppt สำหรับโดเมน Renault (จาก 51% เป็น 73%)
มาดูวิธีกัน
การเพิ่มประสิทธิภาพแบบรวมศูนย์ของ SPA
ในส่วนของแพลตฟอร์ม ประสิทธิภาพมีความสำคัญมาเป็นเวลาหลายปี และการนำ Core Web Vitals มาใช้เป็นเมตริกที่สำคัญคือกระบวนการที่ราบรื่น ทีมส่วนกลางได้กำหนดโซลูชันการตรวจสอบที่ครอบคลุม (โดยใช้ Google Lighthouse และ Chrome UX Report API) และสร้างวัฒนธรรมด้านประสิทธิภาพทั่วทั้งองค์กร การเพิ่มประสิทธิภาพแอปพลิเคชันหน้าเว็บเดียวมีกลยุทธ์หลายวิธี ได้แก่
- การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) เพื่อให้ First Contentful Paint (FCP) ทำงานได้อย่างรวดเร็ว
- การแยกโค้ดเพื่อนำส่งเฉพาะส่วน JS และ CSS ที่จำเป็นสำหรับหน้า Landing Page (เพื่อ LCP และ FID ที่ดีขึ้น)
- CDN ที่มีการแคชทรัพยากรในระดับสูง (รวมถึง Lambda@Edge เพื่อจัดเรียงและนำพารามิเตอร์การค้นหาที่ไม่จำเป็นออก) ซึ่งช่วยหลีกเลี่ยงข้อด้อยของ SSR (TTFB ที่ช้ากว่าเนื่องจากการประมวลผลของเซิร์ฟเวอร์) และนำเสนอเนื้อหาได้ใกล้กับผู้ใช้ขั้นสุดท้ายมากขึ้น (เพื่อ TTFB และ LCP ที่ดียิ่งขึ้น)
- การเพิ่มประสิทธิภาพการบีบอัดด้วย Brotli เพื่อลดขนาดโค้ด
- HTTP2 เพื่อเปิดใช้การมัลติเพล็กซ์คำขอและคำตอบ
- การใช้รูปภาพที่ตอบสนองตามอุปกรณ์ที่มีแอตทริบิวต์การรองรับ WebP รวมถึง
srcset
และsizes
เพื่อแสดงขนาดและรูปแบบรูปภาพที่เหมาะสมที่สุดให้แก่ผู้ใช้ - การโหลดรูปภาพ วิดีโอ และ iframe แบบ Lazy Loading โดยใช้
IntersectionObserver
และ FPO (ภาพปกขนาดเล็ก 1 KB) - การนำสคริปต์ที่บล็อกออกและปรับการเปลี่ยนรูปแบบให้เป็นเป้าหมายของเบราว์เซอร์เพื่อลดขนาดไฟล์ JS (โดยการหลีกเลี่ยง Polyfill ที่ไม่จำเป็น)
- การลดขนาดคอนเทนเนอร์ Google Tag Manager เพื่อโหลดสคริปต์ของบุคคลที่สามเฉพาะตำแหน่งและเมื่อจำเป็นเท่านั้น
- การลดจำนวนแบบอักษรที่กำหนดเอง, ใช้รูปแบบ woff/woff2 ที่มี Unicode-range และ
font-display:swap
เพื่อลดขนาดไฟล์แบบอักษรและแสดงข้อความโดยเร็วที่สุด แม้ว่าแบบอักษรที่กำหนดเองจะไม่พร้อมใช้งานก็ตาม - การโหลดรูปภาพหลักล่วงหน้า ซึ่งมักจะเป็นองค์ประกอบ LCP
ทีมของเรายังคงพยายามปรับปรุงในอนาคต เช่น
- พุชจากเซิร์ฟเวอร์เพื่อปรับปรุง FCP โดยการแสดง CSS ได้เร็วขึ้น (อยู่ในโหมดสแตนด์บายเนื่องจากขาดการสนับสนุนของ AWS และข้อเสนอการเลิกใช้งาน
- Progressive Hydration เพื่อปรับปรุง FID
- การรองรับโมดูล ES6 เพื่อมอบประสบการณ์การใช้งานที่รวดเร็วขึ้นโดยใช้บิลด์ ES6 สำหรับเบราว์เซอร์ที่ทันสมัย
วิธีการ SPA อาจเป็นประโยชน์สำหรับประสิทธิภาพเนื่องจากคุณไม่จำเป็นต้องโหลดหน้าเว็บทั้งหน้าซ้ำเมื่อผู้ใช้ไปยังหน้าเว็บต่างๆ อย่างไรก็ตาม วิธีการวัด Core Web Vitals ในปัจจุบันใน SPA อาจมองได้ว่าเป็นข้อเสียเนื่องจากไม่มีการวัดการเปลี่ยนเส้นทาง จึงไม่มีการนำการโหลดหน้าเว็บที่เร็วขึ้นเปรียบเทียบกันภายในเซสชัน เนื่องจากการแคช UI มาพิจารณา นอกจากนี้ ยังทำให้เปรียบเทียบ Core Web Vitals กับเว็บไซต์คู่แข่งเกี่ยวกับแอปพลิเคชันหลายหน้าได้ยาก โดยแคชที่อบอุ่นจะลดการวัดค่าในแต่ละหน้าที่ผู้ใช้เรียกดูในระหว่างเซสชัน อ่านรายละเอียดเพิ่มเติมได้ในคำถามที่พบบ่อยเกี่ยวกับ Web Vitals SPA
ต่อไปนี้คือข้อจำกัดที่ทราบซึ่งทีมผลิตภัณฑ์ Chrome กำลังตรวจสอบอยู่ เราได้จัดส่งการอัปเดตเมตริก CLS แล้วเพื่อปรับปรุงการวัดผลเกี่ยวกับ SPA
เราจำเป็นต้องตรวจสอบประสิทธิภาพอยู่เสมอเนื่องจากทีมเทคนิคต่างๆ สามารถสร้างผลกระทบได้ แม้จะมีข้อจํากัดในการวัดผลใน SPA แต่ Core Web Vitals ก็ช่วยให้เราติดตามผลจากการดำเนินการของทีมได้ เราหวังว่าการเปลี่ยนเส้นทางจะได้รับการพิจารณาในเร็วๆ นี้
Cedric Bazureau หัวหน้าฝ่ายเทคโนโลยีจาก Renault
หลักเกณฑ์ในท้องถิ่นที่ส่งเสริมการเพิ่มประสิทธิภาพตามความรับผิดชอบร่วมกัน
ประสิทธิภาพเป็นความรับผิดชอบทั้งระดับโลก (ส่วนกลาง) และส่วนท้องถิ่น ทีมต่างๆ ได้รวบรวมแนวทางปฏิบัติแนะนำที่เจ้าของเนื้อหาในพื้นที่ควรนำไปปฏิบัติตาม ตัวอย่างบางส่วนจากหลักเกณฑ์เหล่านี้มีดังต่อไปนี้
- เพิ่มประสิทธิภาพคอนเทนเนอร์ Google Tag Manager ในเครื่องเพื่อปรับปรุงประสิทธิภาพของเว็บไซต์ เช่น ทริกเกอร์แท็กบางรายการอย่างมีเงื่อนไข
- จำกัดขนาดของเนื้อหาวิดีโอโดยการบีบอัดโดยใช้เครื่องมือภายในหรือโฮสต์เนื้อหาไว้บนแพลตฟอร์มภายนอก (เช่น YouTube)
- หลีกเลี่ยงการอัปโหลดรูปภาพผ่าน Google Tag Manager
การเข้าใจประสิทธิภาพด้านดิจิทัลอย่างลึกซึ้งคือกุญแจสำคัญที่จะทำให้เว็บไซต์แบรนด์ของเรามีการเพิ่มประสิทธิภาพอย่างต่อเนื่อง ทีมดูแลประสบการณ์ของลูกค้าของเราคือการให้บริการแพลตฟอร์มระดับโลกที่ส่งผลต่อผลลัพธ์ทางธุรกิจของทีมในพื้นที่ในเชิงบวก ในขณะเดียวกันก็ส่งเสริมทีมเหล่านี้ด้วยหลักเกณฑ์และแนวทางปฏิบัติแนะนำเพื่อรักษาประสิทธิภาพนี้ไว้ในระดับสูง
Alexandre Perruche หัวหน้าฝ่ายประสิทธิภาพของ Renault
โดยสรุปแล้ว ประสิทธิภาพของเว็บไซต์คือสิ่งที่ Renault ให้ความสำคัญมาโดยตลอด และแพลตฟอร์มเว็บไซต์ของ Renault ได้รับการปรับปรุงอย่างต่อเนื่อง การวัดผล Core Web Vitals ควบคู่ไปกับเมตริกธุรกิจช่วยให้ผู้เผยแพร่เนื้อหาโปรโมตหัวข้อนี้ว่าเป็นความรับผิดชอบร่วมกันทั่วโลก และหลักเกณฑ์ในพื้นที่ก็ทำให้ทีมมีส่วนร่วมในความพยายามที่เป็นประโยชน์นี้