เทคนิคที่เกี่ยวข้องกับ CSS สำหรับการเพิ่มประสิทธิภาพ Web Vitals
วิธีที่คุณเขียนสไตล์และสร้างเลย์เอาต์อาจส่งผลอย่างมากต่อ Core Web Vitals โดยเฉพาะอย่างยิ่งสำหรับ Cumulative Layout Shift (CLS) และ Largest Contentful Paint (LCP)
บทความนี้กล่าวถึงเทคนิคที่เกี่ยวข้องกับ CSS สำหรับการเพิ่มประสิทธิภาพ Web Vitals การเพิ่มประสิทธิภาพเหล่านี้จะแบ่งตามแง่มุมต่างๆ ของหน้าเว็บ ได้แก่ เลย์เอาต์ รูปภาพ แบบอักษร ภาพเคลื่อนไหว และการโหลด ในระหว่างนี้ เราจะดูวิธีปรับปรุงหน้าตัวอย่าง
เลย์เอาต์
การแทรกเนื้อหาลงใน DOM
การวางเนื้อหาลงในหน้าเว็บหลังจากที่เนื้อหารอบๆ โหลดแล้วจะเป็นการดันเนื้อหาอื่นๆ ในหน้าลง ซึ่งจะทําให้เลย์เอาต์เปลี่ยนไป
ประกาศเกี่ยวกับคุกกี้ โดยเฉพาะประกาศที่วางไว้ที่ด้านบนของหน้าเว็บเป็นตัวอย่างที่พบบ่อยของปัญหานี้ องค์ประกอบอื่นๆ ของหน้าเว็บที่มักทําให้เลย์เอาต์เปลี่ยนรูปแบบเมื่อโหลด ได้แก่ โฆษณาและการฝัง
ระบุ
การตรวจสอบ "หลีกเลี่ยงการเลื่อนเลย์เอาต์ขนาดใหญ่" ของ Lighthouse จะระบุองค์ประกอบของหน้าเว็บที่มีการเลื่อน ผลการค้นหาสำหรับเดโมนี้จะมีลักษณะดังนี้
ข้อความแจ้งเกี่ยวกับคุกกี้ไม่อยู่ในรายการข้อมูลเหล่านี้เนื่องจากข้อความแจ้งเกี่ยวกับคุกกี้ไม่ได้เลื่อนไปมาเมื่อโหลด แต่จะทำให้รายการที่อยู่ด้านล่างในหน้าเว็บ (นั่นคือ div.hero และ article) เลื่อน ดูข้อมูลเพิ่มเติมเกี่ยวกับการระบุและแก้ไขการเปลี่ยนเลย์เอาต์ได้ที่การแก้ไขข้อบกพร่องการเปลี่ยนเลย์เอาต์
แก้ไข
วางประกาศเกี่ยวกับคุกกี้ที่ด้านล่างของหน้าโดยใช้การวางตำแหน่งแบบสัมบูรณ์หรือแบบคงที่
ก่อน:
.banner {
position: sticky;
top: 0;
}
หลัง:
.banner {
position: fixed;
bottom: 0;
}
อีกวิธีในการแก้ไขการเปลี่ยนแปลงเลย์เอาต์นี้คือการจัดสรรพื้นที่สำหรับประกาศเกี่ยวกับคุกกี้ที่ด้านบนของหน้าจอ วิธีนี้มีประสิทธิภาพไม่แพ้กัน ดูข้อมูลเพิ่มเติมได้ที่แนวทางปฏิบัติแนะนำเกี่ยวกับประกาศคุกกี้
รูปภาพ
รูปภาพและ Largest Contentful Paint (LCP)
โดยทั่วไปแล้ว รูปภาพจะเป็นองค์ประกอบ Largest Contentful Paint (LCP) ในหน้าเว็บ องค์ประกอบอื่นๆ ของหน้าเว็บที่อาจเป็นองค์ประกอบ LCP ได้แก่ บล็อกข้อความและรูปภาพโปสเตอร์วิดีโอ เวลาที่องค์ประกอบ LCP โหลดจะเป็นตัวกําหนด LCP
โปรดทราบว่าองค์ประกอบ LCP ของหน้าเว็บอาจแตกต่างกันไปจากการโหลดหน้าเว็บหนึ่งๆ ไปเป็นการโหลดหน้าเว็บอื่น ทั้งนี้ขึ้นอยู่กับเนื้อหาที่ผู้ใช้มองเห็นเมื่อหน้าเว็บแสดงขึ้นเป็นครั้งแรก เช่น ในตัวอย่างนี้ พื้นหลังของประกาศเกี่ยวกับคุกกี้ รูปภาพหลัก และข้อความบทความคือองค์ประกอบ LCP ที่เป็นไปได้บางส่วน
ในเว็บไซต์ตัวอย่าง รูปภาพพื้นหลังของประกาศเกี่ยวกับคุกกี้เป็นภาพขนาดใหญ่ หากต้องการปรับปรุง LCP คุณอาจวาดเส้นไล่ระดับใน CSS แทนการโหลดรูปภาพเพื่อสร้างเอฟเฟกต์
แก้ไข
เปลี่ยน CSS .banner ให้ใช้การไล่ระดับสี CSS แทนรูปภาพ โดยทำดังนี้
ก่อน:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
หลัง:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
รูปภาพและการเปลี่ยนแปลงเลย์เอาต์
เบราว์เซอร์จะระบุขนาดของรูปภาพได้ก็ต่อเมื่อรูปภาพโหลดแล้วเท่านั้น หากการโหลดรูปภาพเกิดขึ้นหลังจากที่หน้าเว็บแสดงผลแล้ว แต่ไม่มีการจองพื้นที่สำหรับรูปภาพ เลย์เอาต์จะเปลี่ยนเมื่อรูปภาพปรากฏขึ้น ในตัวอย่าง รูปภาพหลักทําให้เลย์เอาต์เปลี่ยนเมื่อโหลด
ระบุ
หากต้องการระบุรูปภาพที่ไม่มี width และ height ที่ชัดเจน ให้ใช้การตรวจสอบ "องค์ประกอบรูปภาพมีความกว้างและความสูงที่ชัดเจน" ของ Lighthouse
ในตัวอย่างนี้ ทั้งรูปภาพหลักและรูปภาพบทความไม่มีแอตทริบิวต์ width และ height
แก้ไข
ตั้งค่าแอตทริบิวต์ width และ height ในรูปภาพเหล่านี้เพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์
ก่อน:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
หลัง:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
แบบอักษร
เนื่องจากแบบอักษรอาจทำให้การแสดงผลข้อความล่าช้าและทำให้เลย์เอาต์เปลี่ยน ดังนั้น การนำส่งแบบอักษรอย่างรวดเร็วจึงเป็นเรื่องสำคัญ
การแสดงผลข้อความที่ล่าช้า
โดยค่าเริ่มต้น เบราว์เซอร์จะไม่แสดงผลองค์ประกอบข้อความทันทีหากเว็บแบบอักษรที่เชื่อมโยงยังไม่ได้โหลด การดำเนินการนี้ทำเพื่อป้องกัน"ข้อความที่แสดงขึ้นมาอย่างรวดเร็วโดยไม่มีการจัดรูปแบบ" (FOUT) ในหลายกรณี การดำเนินการนี้จะทำให้ First Contentful Paint (FCP) ล่าช้า ในบางกรณี การดำเนินการนี้จะทำให้ Largest Contentful Paint (LCP) ล่าช้า
การเปลี่ยนแปลงเลย์เอาต์
แม้ว่าการสลับแบบอักษรจะเหมาะอย่างยิ่งในการแสดงเนื้อหาต่อผู้ใช้อย่างรวดเร็ว แต่ก็อาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ได้ การเปลี่ยนเลย์เอาต์เหล่านี้เกิดขึ้นเมื่อแบบอักษรเว็บและแบบอักษรสำรองใช้พื้นที่ในหน้าเว็บต่างกัน การใช้แบบอักษรที่มีสัดส่วนคล้ายกันจะช่วยลดขนาดของการเปลี่ยนแปลงเลย์เอาต์เหล่านี้
ระบุ
หากต้องการดูแบบอักษรที่โหลดอยู่ในหน้าเว็บหนึ่งๆ ให้เปิดแท็บเครือข่ายในเครื่องมือสําหรับนักพัฒนาเว็บ แล้วกรองตามแบบอักษร แบบอักษรอาจเป็นไฟล์ขนาดใหญ่ได้ ดังนั้นโดยทั่วไปแล้วการใช้แบบอักษรน้อยลงจะส่งผลดีต่อประสิทธิภาพมากกว่า
หากต้องการดูระยะเวลาที่ใช้ในการขอแบบอักษร ให้คลิกแท็บการกำหนดเวลา ยิ่งขอแบบอักษรเร็วเท่าใด ก็ยิ่งโหลดและใช้งานได้เร็วเท่านั้น
หากต้องการดูเชนคำขอสำหรับแบบอักษร ให้คลิกแท็บผู้เริ่ม โดยทั่วไปแล้ว ยิ่งเชนคำขอสั้นเท่าไหร่ ก็ยิ่งขอแบบอักษรได้เร็วขึ้นเท่านั้น
แก้ไข
การสาธิตนี้ใช้ Google Fonts API Google Fonts มีตัวเลือกในการโหลดแบบอักษรผ่านแท็ก <link> หรือคำสั่ง @import ข้อมูลโค้ด <link> มีคำแนะนำแหล่งข้อมูล preconnect ซึ่งจะช่วยให้การส่งสไตล์ชีตเร็วขึ้นกว่าการใช้เวอร์ชัน @import
ในระดับสูงมาก คุณสามารถมองว่าคำแนะนำเกี่ยวกับทรัพยากรเป็นวิธีบอกให้เบราว์เซอร์ทราบว่าจะต้องตั้งค่าการเชื่อมต่อหรือดาวน์โหลดทรัพยากรที่เจาะจง ด้วยเหตุนี้ เบราว์เซอร์จึงให้ความสำคัญกับการดำเนินการเหล่านี้ เมื่อใช้คำแนะนำทรัพยากร โปรดทราบว่าการกำหนดลำดับความสำคัญของการดำเนินการหนึ่งๆ จะแย่งทรัพยากรเบราว์เซอร์จากการดำเนินการอื่นๆ ดังนั้น คุณควรใช้คำแนะนำเกี่ยวกับทรัพยากรอย่างรอบคอบและไม่ควรใช้กับทุกสิ่ง ดูข้อมูลเพิ่มเติมได้ที่สร้างการเชื่อมต่อเครือข่ายตั้งแต่เนิ่นๆ เพื่อปรับปรุงความเร็วของหน้าเว็บที่ผู้ใช้รับรู้
นำคำสั่ง @import ต่อไปนี้ออกจากสไตล์ชีต
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
เพิ่มแท็ก <link> ต่อไปนี้ลงใน <head> ของเอกสาร
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
แท็กลิงก์เหล่านี้จะสั่งให้เบราว์เซอร์สร้างการเชื่อมต่อก่อนเวลาอันควรกับต้นทางที่ Google Fonts ใช้ และโหลดสไตล์ชีตที่มีประกาศแบบอักษรสำหรับ Montserrat และ Roboto แท็ก <link> เหล่านี้ควรวางไว้ในช่วงต้นของ <head>
ภาพเคลื่อนไหว
วิธีที่ภาพเคลื่อนไหวส่งผลต่อ Web Vitals หลักๆ คือเมื่อทําให้เลย์เอาต์เปลี่ยนไป ภาพเคลื่อนไหวที่คุณควรหลีกเลี่ยงมี 2 ประเภท ได้แก่ ภาพเคลื่อนไหวที่ทริกเกอร์เลย์เอาต์ และเอฟเฟกต์ "คล้ายภาพเคลื่อนไหว" ที่ย้ายองค์ประกอบของหน้า โดยปกติแล้ว ภาพเคลื่อนไหวเหล่านี้สามารถแทนที่ด้วยภาพเคลื่อนไหวที่มีประสิทธิภาพมากขึ้นได้โดยใช้พร็อพเพอร์ตี้ CSS เช่น transform, opacity และ filter ดูข้อมูลเพิ่มเติมได้ที่วิธีสร้างภาพเคลื่อนไหว CSS ที่มีประสิทธิภาพสูง
ระบุ
การตรวจสอบ "หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite" ของ Lighthouse อาจมีประโยชน์ในการระบุภาพเคลื่อนไหวที่มีประสิทธิภาพต่ำ
แก้ไข
เปลี่ยนลำดับภาพเคลื่อนไหว slideIn ให้ใช้ transform: translateX() แทนการเปลี่ยนพร็อพเพอร์ตี้ margin-left
ก่อน:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
หลัง:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
Critical CSS
ไฟล์สไตล์บล็อกการแสดงผล ซึ่งหมายความว่าเมื่อเบราว์เซอร์พบสไตล์ชีต ก็จะหยุดดาวน์โหลดทรัพยากรอื่นๆ จนกว่าจะดาวน์โหลดและแยกวิเคราะห์สไตล์ชีตเสร็จ ซึ่งอาจทำให้ LCP ล่าช้า หากต้องการปรับปรุงประสิทธิภาพ ให้ลองนํา CSS ที่ไม่ได้ใช้ออก แทรก CSS ที่สําคัญในหน้า และเลื่อนเวลา CSS ที่ไม่สําคัญออกไป
บทสรุป
แม้ว่าจะยังมีจุดที่ควรปรับปรุงอีก (เช่น การใช้การบีบอัดรูปภาพเพื่อแสดงรูปภาพได้เร็วขึ้น) แต่การเปลี่ยนแปลงเหล่านี้ได้ปรับปรุง Web Vitals ของเว็บไซต์นี้อย่างมาก หากเป็นเว็บไซต์จริง ขั้นตอนถัดไปคือรวบรวมข้อมูลประสิทธิภาพจากผู้ใช้จริงเพื่อประเมินว่าเป็นไปตามเกณฑ์ของ Web Vitals สําหรับผู้ใช้ส่วนใหญ่หรือไม่ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Web Vitals ได้ที่ดูข้อมูลเกี่ยวกับ Web Vitals