CSS สำหรับ Web Vitals

เทคนิคที่เกี่ยวข้องกับ CSS สำหรับการเพิ่มประสิทธิภาพ Web Vitals

Katie Hempenius
Katie Hempenius

วิธีที่คุณเขียนสไตล์และสร้างเลย์เอาต์อาจส่งผลอย่างมากต่อ Core Web Vitals โดยเฉพาะอย่างยิ่งสําหรับ Cumulative Layout Shift (CLS) และ Largest Contentful Paint (LCP)

บทความนี้กล่าวถึงเทคนิคที่เกี่ยวข้องกับ CSS ในการเพิ่มประสิทธิภาพ Web Vitals การเพิ่มประสิทธิภาพเหล่านี้จะแบ่งตามแง่มุมต่างๆ ของหน้าเว็บ ได้แก่ เลย์เอาต์ รูปภาพ แบบอักษร ภาพเคลื่อนไหว และการโหลด ในระหว่างนี้ เราจะดูวิธีปรับปรุงหน้าตัวอย่าง ดังนี้

ภาพหน้าจอของตัวอย่างเว็บไซต์

เลย์เอาต์

การแทรกเนื้อหาลงใน DOM

การแทรกเนื้อหาลงในหน้าหลังจากที่เนื้อหาโดยรอบโหลดแล้วจะดันเนื้อหาอื่นๆ ในหน้าลงมา ซึ่งทำให้เกิดการเปลี่ยนเลย์เอาต์

ประกาศเกี่ยวกับคุกกี้ โดยเฉพาะตัวอย่างที่อยู่ด้านบนของหน้าเว็บ คือตัวอย่างหนึ่งของปัญหานี้ที่พบได้บ่อย องค์ประกอบอื่นๆ ของหน้าที่มักทำให้เกิดการเปลี่ยนเลย์เอาต์ประเภทนี้เมื่อโหลด ได้แก่ โฆษณาและการฝัง

ระบุ

การตรวจสอบ "หลีกเลี่ยงการเปลี่ยนเลย์เอาต์ขนาดใหญ่" ของ Lighthouse จะระบุองค์ประกอบของหน้าที่มีการเปลี่ยนแปลง สำหรับการสาธิตนี้ ผลลัพธ์จะมีลักษณะดังนี้

การตรวจสอบ "หลีกเลี่ยงการเลื่อนเลย์เอาต์ขนาดใหญ่" ของ 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 ของหน้าเว็บในสถานการณ์ต่างๆ

ในเว็บไซต์ตัวอย่าง ภาพพื้นหลังของการแจ้งเตือนคุกกี้คือภาพขนาดใหญ่ หากต้องการปรับปรุง 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

การตรวจสอบ "องค์ประกอบรูปภาพมีความกว้างและความสูงที่ชัดเจน" ของ 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) ล่าช้า

การเปลี่ยนเลย์เอาต์

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

แผนภาพที่แสดงการเปลี่ยนแปลงเลย์เอาต์ที่เกิดจากการสลับแบบอักษร
ในตัวอย่างนี้ การเปลี่ยนแบบอักษรทําให้องค์ประกอบของหน้าเลื่อนขึ้น 5 พิกเซล

ระบุ

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

ภาพหน้าจอของแบบอักษรที่แสดงในเครื่องมือสำหรับนักพัฒนาเว็บ

หากต้องการดูระยะเวลาในการขอแบบอักษร ให้คลิกแท็บระยะเวลา ยิ่งขอแบบอักษรเร็วเท่าใด ก็ยิ่งโหลดและใช้งานได้เร็วขึ้นเท่านั้น

ภาพหน้าจอของแท็บ &quot;การวัดเวลา&quot; ในเครื่องมือสําหรับนักพัฒนาเว็บ

หากต้องการดูเชนคำขอสำหรับแบบอักษร ให้คลิกแท็บผู้เริ่ม โดยทั่วไป ยิ่งเชนคำขอสั้นเท่าไร ระบบก็ยิ่งขอแบบอักษรได้เร็วขึ้นเท่านั้น

ภาพหน้าจอของแท็บ &quot;ผู้เริ่ม&quot; ในเครื่องมือสําหรับนักพัฒนาเว็บ

แก้ไข

การสาธิตนี้ใช้ 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 อาจมีประโยชน์ในการระบุภาพเคลื่อนไหวที่มีประสิทธิภาพต่ำ

การตรวจสอบ &quot;หลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite&quot; ของ 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 ได้ที่ดูข้อมูล WebVitals