การเพิ่มประสิทธิภาพ Core Web Vitals สำหรับเว็บไซต์ธุรกิจ
สามตัวชี้วัดที่กำหนดประสบการณ์ผู้ใช้และอันดับ SEO และวิธีที่เราผลักดันคะแนน Lighthouse ให้เกิน 95
ผู้ใช้จะออกจากหน้าเว็บภายในสามวินาทีแรกหากโหลดช้า Google รู้เรื่องนี้ดี และตั้งแต่ปี 2021 ได้กำหนดให้ Core Web Vitals เป็นปัจจัยในการจัดอันดับ สำหรับเว็บไซต์ธุรกิจ ความเร็วไม่ใช่รายละเอียดทางเทคนิคอีกต่อไป แต่คือรายได้
สามตัวชี้วัดที่ต้องจำให้ขึ้นใจ
LCP วัดเวลาที่องค์ประกอบที่ใหญ่ที่สุดปรากฏ INP วัดความหน่วงของการโต้ตอบ CLS วัดการขยับของเลย์เอาต์ หน้าที่ดีต้องมี LCP ต่ำกว่า 2.5 วินาที INP ต่ำกว่า 200ms และ CLS ต่ำกว่า 0.1
- LCP — เพิ่มประสิทธิภาพรูปภาพและให้ความสำคัญกับเนื้อหาส่วนบนสุดของหน้าจอ
- INP — แบ่ง JavaScript และหลีกเลี่ยงการบล็อกเธรดหลัก
- CLS — กำหนดขนาดคงที่ให้กับรูปภาพ ฟอนต์ และโฆษณา
วิธีที่เราทำคะแนนเกิน 95
เราเริ่มจากสถาปัตยกรรม: การเรนเดอร์ฝั่งเซิร์ฟเวอร์ การแบ่ง bundle ตามเส้นทาง และการ lazy-load ทุกอย่างที่อยู่ใต้ส่วนบนสุดของหน้าจอ รูปภาพถูกส่งเป็น AVIF/WebP ตามขนาดอุปกรณ์ ฟอนต์โหลดด้วย font-display: swap เพื่อให้ข้อความปรากฏทันที
ประสิทธิภาพไม่ใช่งานที่ทำครั้งเดียวจบ แต่คือวินัยในทุก pull request
— Huy Nguyễn
สุดท้าย เราเพิ่มการตรวจสอบผู้ใช้จริง (RUM) เพื่อติดตามตัวชี้วัดบนอุปกรณ์จริง ไม่ใช่แค่ในห้องทดลอง นั่นคือความแตกต่างระหว่างตัวเลขที่สวยงามกับประสบการณ์ที่รวดเร็วอย่างแท้จริง
ทำงานด้านการเพิ่มประสิทธิภาพเว็บสำหรับผลิตภัณฑ์ขนาดใหญ่มาแปดปี เชื่อว่าความเร็วคือฟีเจอร์อย่างหนึ่ง