CSS สำหรับ Web Vitals

เทคนิคที่เกี่ยวข้องกับ 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">

แบบอักษร

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

การแสดงข้อความล่าช้า

โดยค่าเริ่มต้น เบราว์เซอร์จะไม่แสดงองค์ประกอบข้อความโดยทันทีหากแบบอักษรของเว็บที่เชื่อมโยงยังไม่ได้โหลด ทั้งนี้เพื่อป้องกันไม่ให้มี "Flash ของข้อความที่ไม่มีการจัดรูปแบบ" (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 ใช้และโหลดสไตล์ชีตที่มีการประกาศแบบอักษรสำหรับมอนต์เซอร์รัตและ 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);
  }
}

CSS ที่สำคัญ

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

บทสรุป

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