การปรับปรุง Core Web Vitals ในหน้าแรกของ Mail.ru ส่งผลให้อัตรา Conversion เพิ่มขึ้นเฉลี่ย 10%

การทำงานเป็นเวลาหลายเดือนเพื่อปรับปรุง Core Web Vitals ในหน้าแรกของ Mail.ru ส่งผลให้เปอร์เซ็นไทล์ที่ 75 ใน Cumulative Layout Shift (CLS) เพิ่มขึ้น 60% ทำให้ระยะเวลาเซสชันเฉลี่ยเพิ่มขึ้น 2.7% และอัตรา Conversion ของส่วนหลักเพิ่มขึ้นมากกว่า 10%

Denis Stasyev
Denis Stasyev
GitHub
Sven May
Sven May
GitHub

จุดเริ่มต้น

Mail.ru เป็นหนึ่งในบริการอีเมลชั้นนำบนอินเทอร์เน็ตที่ใช้ภาษารัสเซีย และติดอันดับเว็บไซต์ 5 อันดับแรกของรัสเซียในแง่ของการเข้าชม Mail.ru เป็นแหล่งข้อมูลสำคัญสำหรับผู้คนจำนวนมาก โดยมีการเข้าชมหลายร้อยล้านครั้งต่อเดือน และเป็นพอร์ทัลที่ผู้คนสามารถเข้าถึงอีเมล ข่าวสาร โซเชียลมีเดีย ประสิทธิภาพการค้นหาทางอินเทอร์เน็ต และอื่นๆ

Mail.ru ต้องการให้ผู้เข้าชมได้รับประสบการณ์ของผู้ใช้ที่มีคุณภาพสูง งานจึงได้เริ่มปรับปรุง Core Web Vitals ก่อนที่จะพูดคุยเรื่องกลยุทธ์การเพิ่มประสิทธิภาพของเรา คุณควรรับทราบรายละเอียดทางเทคนิคของหน้าแรกของ Mail.ru ก่อน

แม้ว่าโปรเจ็กต์นี้จะพัฒนามาเป็นเวลานานโดยใช้ Fest ซึ่งเป็นระบบเทมเพลตภายในบริษัท แต่เราก็เริ่มย้ายข้อมูลไปยัง Svelte 3 ในปี 2019

Svelte ใช้ความไวปฏิกิริยาในลักษณะที่ไม่ใช้ DOM เสมือน ซึ่งทำให้ใช้ทรัพยากรน้อยลง วิธีการของ Svelte จะนำฟังก์ชันที่ไม่ได้ใช้ออกจากแพ็กเกจเวอร์ชันที่ใช้งานจริง เนื่องจากคอมไพเลอร์จะไม่สร้างโค้ดที่ใช้งานฟังก์ชันเหล่านั้นหากไม่ได้ใช้ฟังก์ชัน โค้ดที่ไม่ได้ใช้งานจะถูกนำออกระหว่างการคอมไพล์ ซึ่งส่งผลให้แพ็กเกจมีขนาดเล็กลง ซึ่งอาจช่วยลดเวลาในการบล็อกทั้งหมด (TBT) ในระหว่างการเริ่มต้นหน้าเว็บได้

การติดตามเมตริกประสิทธิภาพ

ก่อนเพิ่มประสิทธิภาพ Core Web Vitals คุณควรประเมินประสิทธิภาพในภาคสนาม ก่อนที่จะมี Core Web Vitals เราติดตามเมตริกอื่นๆ เช่น First Contentful Paint (FCP) ในแดชบอร์ดประสิทธิภาพภายใน

สคริปต์รวบรวมเมตริกของเราได้รับการแก้ไขเพื่อรวบรวม Core Web Vitals และส่งสคริปต์ไปยังแดชบอร์ดประสิทธิภาพเพื่อดูภาพ สคริปต์ของเราใช้ PerformanceObserver API เพื่อรับเมตริก ซึ่งเป็นส่วนหนึ่งของฟรอนท์เอนด์สากล "Platform" ภายใน Mail.ru เพื่อให้สอดคล้องกับคำแนะนำของ Google

แดชบอร์ดแสดงเมตริกต่อไปนี้สำหรับผู้ใช้ (ค่าระหว่างวันที่ 15-21 มีนาคม 2021)

ชื่อกลุ่มเมตริก Core Web Vitals Web Vitals อื่นๆ
ชื่อเมตริก LCP FID CLS FCP จะแจ้งภายหลัง TTI
ส่วนแบ่งผู้ใช้ตามเกณฑ์ Core Web Vitals ดี เร็วขึ้น 92% 33% 35% 42% 43%
ต้องปรับปรุง 19% 5% 23% 38% 16% 25%
แย่ 29% 3% 44% 27% 42% 32%
เมตริกสําหรับสัปดาห์ของวันที่ 15-21 มีนาคม 2021
Core Web Vitals ก่อนการเพิ่มประสิทธิภาพมีการแสดงผลประมาณ 1/3 ของผู้ใช้ในกลุ่มที่มีประสิทธิภาพต่ำ
ค่าของ Web Vitals ก่อนการปรับปรุง

การปรับปรุง Core Web Vitals

แม้จะมีคำแนะนำมากมายสำหรับการปรับปรุง Core Web Vitals แต่ทุกโปรเจ็กต์ต่างก็มีความท้าทายที่ต่างกัน หน้าแรกของ Mail.ru ระบุโอกาสต่อไปนี้

  • การใช้ตัวยึดตำแหน่งสำหรับแบนเนอร์โฆษณาเพื่อลด CLS
  • ใช้การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) เพื่อลด Largest Contentful Paint (LCP)
  • การแยกโค้ดเพื่อลด LCP และ First Input Delay (FID)

โครงกระดูกเพื่อการพัฒนา CLS

CLS คือหนึ่งในเมตริกฟิลด์ที่มีประสิทธิภาพแย่ที่สุดสำหรับหน้าแรกของ Mail.ru การสร้างโปรไฟล์ภายหลังสำหรับหน้านี้ในแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome แสดงให้เห็นว่าโฆษณาเป็นสาเหตุของปัญหา ทีมของเราตัดสินใจที่จะใช้ตัวยึดตำแหน่งเพื่อจองพื้นที่สำหรับโฆษณาก่อนที่จะโหลดเพื่อปรับปรุงความเสถียรของเลย์เอาต์

เมื่อคุณใช้ตัวยึดตำแหน่ง ขั้นตอนแรกคือการกำหนดขนาดของเนื้อหาที่จะแทนที่ โชคดีที่หน้าแรกของ Mail.ru เวอร์ชันเดสก์ท็อปได้ระบุขนาดสำหรับโฆษณาไว้อย่างชัดเจน หลังจากพูดคุยกับทีมออกแบบแล้ว ก็มีการใช้โครงกระดูก UI ที่เคลื่อนไหวได้ของ SVG เป็นตัวยึดตำแหน่งเนื่องจากช่วยลดเวลาในการโหลดเนื้อหาที่รับรู้

การกลับมาของ SSR

เพื่อทำให้การเปลี่ยนจาก Fest ไปเป็น Svelte เป็นเรื่องง่าย เราจึงค่อยๆ เขียนโปรเจ็กต์ที่มีอยู่ใหม่แทนที่จะเริ่มใหม่ตั้งแต่ต้น ในเดือนมีนาคม 2021 เราได้ย้ายฟรอนท์เอนด์ส่วนใหญ่ไปยัง Svelte และได้นำ SSR มาใช้ในแอปพลิเคชันเวอร์ชันที่ใช้งานจริงหลังจากได้คัดกรองและแก้ไขปัญหาด้านประสิทธิภาพแบ็กเอนด์แล้วในเดือนมีนาคม 2021

หลังจากใช้ SSR ทีมก็พบสาเหตุของการถดถอย CLS ที่สังเกตไม่ได้ในตอนแรก นั่นคือไม่ได้แทรกส่วนข่าวไว้ในขณะที่แสดงเนื้อหาแรกในหน้าเว็บ เกิดความล่าช้าระหว่างการวาดภาพครั้งแรกของมาร์กอัปหน้าเว็บที่เซิร์ฟเวอร์และการแทรกส่วนข่าวในไคลเอ็นต์ พฤติกรรมนี้ส่งผลให้เกิดการเปลี่ยนแปลงโครงสร้างโฆษณา ซึ่งทำให้ CLS แย่ลง

แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome จะแสดงเหตุการณ์ Layout Shift แต่เราไม่สามารถค้นหาสาเหตุได้ แม้ว่า SSR จะไม่ใช่ปัญหา แต่ก็ช่วยในการค้นพบวิธีแก้ปัญหาในภายหลัง การแก้ไขโค้ดที่ทำให้เกิดการหน่วงเวลาภาพวาดช่วยปรับปรุงความเสถียรของเลย์เอาต์ของคอมโพเนนต์ News

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

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

การแยกโค้ดและ Polyfill ที่ไม่ได้ใช้

ในการปรับปรุงความเร็วในการโหลดหน้าเว็บที่รับรู้ได้นั้น คุณต้องทำงานเพื่อลดค่า LCP และ FID วิธีหนึ่งที่สามารถทำได้คือการใช้การแยกโค้ด นอกเหนือจากหน้าแรกของ Mail.ru แล้ว ทีมของเรากำลังพัฒนาวิดเจ็ตสำหรับการนำทางพอร์ทัลด้วย ขณะนี้เครื่องมือดังกล่าวฝังอยู่ในหลายโครงการของบริษัทของเรา

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

เราตัดสินใจใช้รูปแบบ module/nomodule ในการโหลดกลุ่ม JavaScript สำหรับเบราว์เซอร์ที่ทันสมัยหรือแบบเดิม เนื่องจาก type="module" แอตทริบิวต์ขององค์ประกอบ <script> ไม่ได้กำหนดเป้าหมายเบราว์เซอร์ที่ทันสมัยตรงตามความต้องการของเรา เพื่อแก้ไขปัญหานี้ Mail.ru ใช้เครื่องมือภายในองค์กรเพื่อระบุเวอร์ชันของเบราว์เซอร์ที่ทันสมัยบนแบ็กเอนด์ และสามารถปรับใช้กับเบราว์เซอร์เหล่านั้นตามความเหมาะสม

เมื่อระบุเบราว์เซอร์ในแบ็กเอนด์ได้แล้ว เราได้ใช้การแยกโค้ดสำหรับเบราว์เซอร์ที่ทันสมัยและเบราว์เซอร์เดิม ผลที่ได้คือขนาดวิดเจ็ต JavaScript ที่โหลดแบบซิงโครนัสลดลง 43.3% สำหรับเบราว์เซอร์ที่ทันสมัย แนวทางปฏิบัตินี้ใช้กับสคริปต์พอร์ทัลอื่นๆ ด้วย

นอกจากการลดขนาดกลุ่มและผลในเชิงบวกต่อ Core Web Vitals แล้ว การแยกโค้ดยังช่วยปรับปรุงประสบการณ์ของนักพัฒนาซอฟต์แวร์ด้วย มีเพียงผู้ใช้เพียง 3.5% ที่ใช้เบราว์เซอร์แบบเดิมและส่วนการแชร์ดังกล่าวมีแนวโน้มลดลง การใช้งานการแยกโค้ดจึงช่วยให้นักพัฒนาซอฟต์แวร์ใช้ API เบราว์เซอร์ล่าสุดได้โดยไม่ต้องเปิดตัวการเพิ่ม Polyfill ซึ่งจำเป็นสำหรับเบราว์เซอร์เวอร์ชันเก่าให้แก่ผู้ใช้ทั้งหมด

ผลลัพธ์

หลังจากความพยายามในการเพิ่มประสิทธิภาพ เราได้สังเกตค่าเฉลี่ยสำหรับสัปดาห์ที่ 24-30 พฤษภาคม 2021 ในข้อมูลภาคสนามของเรา ดังนี้

ชื่อกลุ่มเมตริก Core Web Vitals Web Vitals อื่นๆ
ชื่อเมตริก LCP FID CLS FCP จะแจ้งภายหลัง TTI
ส่วนแบ่งผู้ใช้ตามเกณฑ์ Core Web Vitals ดี 58% (+6%) 93% (+1%) 93% (+60%) 43% (+8%) 49% (+7%) 51% (+8%)
ต้องปรับปรุง 18% 4% 3% เร็วขึ้น 17% 24%
แย่ 24% 3% 4% 23% เร็วขึ้น 25%
เมตริกประจำสัปดาห์ของวันที่ 24-30 มีนาคม 2021
เมตริกทั้งหมดในที่เก็บข้อมูลที่ดีได้รับการปรับปรุงอย่างน้อย 1% CLS ถึง 60%
การเปรียบเทียบ Web Vitals ก่อนและหลัง (การเปลี่ยนแปลงในกลุ่ม "ดี" จะแสดงในวงเล็บ)

กราฟด้านล่างแสดงการเปลี่ยนแปลงของค่าเมตริกประสิทธิภาพของหน้าเว็บตาม "แพลตฟอร์ม" ดูวันที่ที่สำคัญ 2 วันที่ในกราฟ:

  • 23 มีนาคม 2021: การเปิดตัวการปรับปรุงกับส่วนของหน้าสุดท้ายซึ่งย้ายไปยัง Svelte
  • 19 เมษายน 2021: การเผยแพร่การทำซ้ำพร้อม SSR ที่ส่งคืนและเลย์เอาต์ที่แก้ไขเพื่อแก้ไขการถดถอย CLS

ค่าที่ลดลงตั้งแต่วันที่ 1 ถึง 10 พฤษภาคมเนื่องจากวันหยุดเดือนพฤษภาคมในรัสเซีย

LCP ตั้งแต่เดือนมีนาคมถึง 1 มิถุนายน 2021 แสดงการปรับปรุงเพียงเล็กน้อยเมื่อเวลาผ่านไป
กราฟ LCP ใน "แพลตฟอร์ม": 16 มีนาคมถึง 1 มิถุนายน 2021
FID ตั้งแต่ 16 มีนาคมถึง 1 มิถุนายน 2021 แสดงการปรับปรุงเล็กน้อยในระดับสูง
กราฟ FID ใน "แพลตฟอร์ม": 16 มีนาคมถึง 1 มิถุนายน 2021
CLS ตั้งแต่ 16 มีนาคมถึง 1 มิถุนายน 2021 แสดงการปรับปรุงอย่างมากตั้งแต่วันที่ 23 เมษายน
กราฟ CLS ใน "แพลตฟอร์ม": 16 มีนาคมถึง 1 มิถุนายน 2021

ผลลัพธ์ที่ได้จากการใช้ "แพลตฟอร์ม" จะสอดคล้องกับการเพิ่มขึ้นของค่าเมตริกในรายงาน UX ของ Chrome (CrUX)

เมตริก LCP จาก CrUX แสดงการเพิ่มขึ้นจาก 51% เป็น 58% ในที่เก็บข้อมูลที่ดี
การเปลี่ยนแปลงเมตริก LCP ใน CrUX ในปี 2021
เมตริก FID จาก CrUX แสดงการปรับปรุงเล็กน้อยใน FID จาก 91% เป็น 93% ในที่เก็บข้อมูลที่ดี
การเปลี่ยนแปลงเมตริก FID ใน CrUX ในปี 2021
เมตริก CLS ใน CrUX แสดงการปรับปรุงอย่างมากจาก 46% เป็น 98% ในที่เก็บข้อมูลที่ดี
การเปลี่ยนแปลงเมตริก CLS ใน CrUX ในปี 2021

การเปรียบเทียบค่าระยะเวลาเซสชันเฉลี่ยของผู้ใช้ 1 สัปดาห์ก่อนเปิดตัวการปรับปรุงช่วงแรกและ 1 สัปดาห์หลังจากการเปิดตัวแสดงให้เห็นว่าเพิ่มขึ้น 2.7% นอกจากนี้ Conversion โดยรวมยังเพิ่มขึ้นอย่างมากในส่วนส่วนใหญ่ของหน้าเว็บ โดยเฉพาะอย่างยิ่ง Conversion ในแอปอีเมล Mail.ru เพิ่มขึ้น 11.6% ส่วน Conversion ของส่วนข่าวเพิ่มขึ้น 13.5%

181%

ส่วนแบ่งที่เพิ่มขึ้นของเกณฑ์ CLS ที่ดี

2.7%

ระยะเวลาเซสชันเฉลี่ยสูงขึ้น

13.5%

อัตรา Conversion ของส่วนข่าวสารเพิ่มขึ้น

ผลลัพธ์ที่ไม่คาดคิดที่สุดที่เราได้รับคือ อัตราการคลิกผ่าน (CTR) ของแบนเนอร์การตลาดเพิ่มขึ้น 17.4% (เวลาในการแสดงผลลดลงอย่างมากจากการเปิดตัวแท็ก SSR และการโหลดล่วงหน้า)

หลังจากวิเคราะห์ส่วนอื่นๆ ในหน้าเว็บแล้ว เราสังเกตเห็นว่าเนื้อหาส่วนใหญ่มีประสิทธิภาพดีขึ้นอย่างมาก แม้กระทั่งสำหรับหัวข้อต่างๆ เช่น สภาพอากาศและไวรัสโคโรนา ซึ่งไม่ใช่ข้อมูลสำคัญในหน้าของเรา แต่เราก็เห็น Conversion เพิ่มขึ้น 9.6% และ 9.5% ตามลำดับ

บทสรุป

การปรับปรุงประสิทธิภาพเป็นเรื่องท้าทายเนื่องจากงานที่เกี่ยวข้องอาจใช้เวลานาน คุณควรตรวจสอบการเปลี่ยนแปลงของเมตริกเป็นประจำเมื่อเวลาผ่านไปและตรวจสอบว่าฟีเจอร์ใหม่ทั้งหมดของผลิตภัณฑ์ไม่ทำให้ Core Web Vitals ถดถอย เพื่อให้บรรลุเป้าหมายนี้ เราจึงติดตามการเปลี่ยนแปลงใน Core Web Vitals ในงบประมาณด้านประสิทธิภาพ

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