วิธีปรับปรุงการเปลี่ยนแปลงเค้าโครงสะสม (CLS) สำหรับ WordPress

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

ในกรณีของการพัฒนาเว็บ ผู้ใช้ที่นำทางจากหน้าหนึ่งไปยังอีกหน้าบนเว็บไซต์อาจพบสิ่งที่เรียกว่า Cumulative Layout Shift (CLS) ในบางครั้ง เมื่อองค์ประกอบภาพของหน้ามีการเปลี่ยนแปลงกะทันหันหรือโหลดไม่ถูกต้อง จู่ๆ ข้อความก็ใหญ่ขึ้นหรือเล็กลง รูปภาพเปลี่ยนตำแหน่ง หรือเปลี่ยนเค้าโครงหน้าทั้งหมด

เหตุใดจึงเกิดขึ้น และเราจะแก้ไขได้อย่างไร ในคู่มือนี้ เราจะสำรวจว่า CLS คืออะไรและจะป้องกันได้อย่างไรบนเว็บไซต์ของคุณ

Cumulative Layout Shift คืออะไร?

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

เมื่อหน้าเว็บมีคะแนน CLS สูง เป็นการยากที่จะระบุว่าหน้าเว็บโหลดเต็มที่เมื่อใด ยิ่งเว็บไซต์ซับซ้อนและมีเดียมากเท่าไร โอกาสที่เลย์เอาต์ของประสบการณ์จะเปลี่ยนไปก็จะยิ่งสูงขึ้น

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

อะไรทำให้เกิดการเปลี่ยนแปลงเค้าโครงสะสม

CLS มีแนวโน้มที่จะเกิดขึ้นเนื่องจากเว็บเบราว์เซอร์โหลดองค์ประกอบตามลำดับในเวลาที่ต่างกัน นอกจากนี้ คุณอาจมีองค์ประกอบสื่อบนเว็บไซต์ของคุณด้วยคุณสมบัติที่ไม่รู้จัก (เช่น ขนาด)

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

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

วิธีวัดคะแนน CLS ของเว็บไซต์ของคุณ

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

 คะแนน CLS = เศษส่วนระยะทาง x เศษส่วนกระทบ

เศษส่วนผลกระทบอธิบายว่าองค์ประกอบที่ไม่เสถียรส่งผลต่อพื้นที่ที่รับรู้ได้ระหว่างสองเฟรมมากน้อยเพียงใด เศษส่วนระยะทางอธิบายจำนวนองค์ประกอบที่เลื่อนไปมาระหว่างเฟรม คะแนน CLS ที่ 0.10 และต่ำกว่า (0.0 – 0.10) ถือว่าดีมาก คะแนน CLS สูงกว่า 0.10 แต่ต่ำกว่า 0.25 (0.10 -.25) อยู่ในระดับปานกลางและต้องปรับปรุง ในขณะที่คะแนน CLS สูงกว่า 0.25 (0.25 <) ถือว่าแย่

แนวคิดเหล่านี้อาจเป็นเรื่องยากที่จะสรุป โชคดีที่คุณไม่จำเป็นต้องคำนวณ CLS ของเว็บไซต์ด้วยตนเอง มีเครื่องมือออนไลน์ (และออฟไลน์) มากมายที่สามารถคำนวณคะแนน CLS ให้คุณได้

ในปัจจุบัน วิธีที่นิยมที่สุดในการวัด CLS ของหน้าเว็บของคุณคือการใช้ PageSpeed ​​Insights ของ Google ช่วยให้คุณยืนยันสถิติประสบการณ์ผู้ใช้เว็บไซต์ของคุณสำหรับการทำซ้ำทั้งบนมือถือและเดสก์ท็อป

เครื่องมือ CLS อื่นๆ ได้แก่:

• GT Metrix
• ดีบักเกอร์ Google Web Vitals CLS
• ส่วนขยาย Google Chrome Web Vitals
• Google Lighthouse
• การทดสอบหน้าเว็บ

เนื่องจาก PageSpeed ​​Insights ของ Google เป็นที่คุ้นเคยมากที่สุด เราจะใช้เป็นตัวอย่าง

ในการวัดคะแนน CLS ของคุณ ให้ไปที่โฮมเพจข้อมูลเชิงลึก PageSpeed ​​แทรก URL ของหน้าเว็บของคุณลงในช่องข้อความด้านบนสุด จากนั้นคลิกปุ่ม วิเคราะห์ PageSpeed ​​Insights ควรจัดทำรายงานภายในไม่กี่วินาที ทั้งนี้ขึ้นอยู่กับความนิยมของเว็บไซต์และความเร็วอินเทอร์เน็ตของคุณ

หากต้องการค้นหาคะแนน CLS ให้เลื่อนลงไปที่ส่วนการประเมิน Core Web Vitals

หากเราใช้หน้าแรกของ Amazon เป็นตัวอย่าง มากกว่าที่จะเป็นไปได้ เราจะพบคะแนน CLS น้อยกว่า 0.10 ระหว่างการทดสอบ เราพบว่าเว็บไซต์บนมือถือมีคะแนน CLS 0.01 ในขณะที่เวอร์ชันเดสก์ท็อปมีคะแนน 0.05

แต่พวกเขาจะทำอย่างไรเมื่อไซต์ของพวกเขามีทรัพยากรมาก? มาดูกันว่าคุณจะมีคะแนน CLS เหมือน Amazon ได้อย่างไร

วิธีเพิ่มประสิทธิภาพ CLS

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

ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณมี CLS ที่น่านับถือนั้นสำคัญพอๆ กับการทำให้แน่ใจว่ามี SEO ท้องถิ่นที่แข็งแกร่งและเนื้อหาที่เกี่ยวข้อง เสิร์ชเอ็นจิ้นของ Google มักจะให้ความสำคัญกับเว็บไซต์ที่ให้ประสบการณ์ผู้ใช้ที่ยอดเยี่ยมและเหมาะสมที่สุด

ด้วยเหตุนี้ ต่อไปนี้คือขั้นตอนในการปรับปรุงคะแนน CLS ของไซต์ของคุณ:

เพิ่มคุณสมบัติมิติให้กับไฟล์สื่อทั้งหมด

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

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

ตรวจสอบให้แน่ใจว่าโหลดฟอนต์ในเครื่อง

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

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

หลีกเลี่ยง FOIT และ FOUT

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

ระหว่างแสดงข้อความที่ไม่จัดรูปแบบ (FOUT) คุณจะเห็นแบบอักษรทางเลือกเริ่มต้นของเว็บเบราว์เซอร์จนกว่าจะโหลดแบบอักษรที่คุณระบุได้ ในการแก้ไขปัญหานี้ คุณสามารถเพิ่มคุณสมบัติ font-display: swap

หากคุณเคยดาวน์โหลดแบบอักษรจาก Google คุณจะสังเกตเห็นว่ามันเพิ่มแท็กนี้ที่ส่วนท้ายของแต่ละ URL วิธีที่ง่ายที่สุดในการเพิ่มคุณสมบัตินี้ด้วยตัวคุณเองคือการใช้ปลั๊กอิน Swap Google Fonts Display บน WP

อย่างไรก็ตาม โปรดทราบว่าปลั๊กอินนี้ใช้งานได้กับแบบอักษรของ Google เท่านั้น และจะผนวกคุณสมบัติการสลับการแสดงผลต่อท้าย URL เหล่านั้นโดยอัตโนมัติ หากคุณกำลังโฮสต์ฟอนต์ในเครื่อง คุณสามารถใช้ปลั๊กอินตัวระบุตำแหน่งสตริงเพื่อค้นหาไฟล์ฟอนต์ทั้งหมดของคุณและแก้ไขได้ คุณจะต้องเปิดสไตล์ชีตแบบอักษรใน WP และแก้ไข

อีกทางหนึ่ง คุณสามารถใช้ปลั๊กอินแคช เช่น ปลั๊กอินที่จะปรับแต่งฟอนต์ให้คุณโดยอัตโนมัติโดยเพิ่มคุณสมบัติการสลับฟอนต์

โหลดฟอนต์ล่วงหน้า

เพื่อให้แน่ใจว่าคุณกำลังโฮสต์ฟอนต์ในเครื่อง คุณสามารถโหลดฟอนต์ล่วงหน้าด้วยปลั๊กอินเช่น:

• WP Rocket
• Pre* คำแนะนำทรัพยากรพรรค
• เรื่องที่เกี่ยวข้อง

หากคุณไม่สามารถใช้ปลั๊กอินเหล่านี้ได้ คุณสามารถโหลดแบบอักษรล่วงหน้าได้โดยแก้ไขไฟล์ header.php เพียงตรวจสอบให้แน่ใจว่าคุณทดสอบไซต์ของคุณอย่างละเอียดหลังจากโหลดแบบอักษรล่วงหน้า การโหลดแบบอักษรล่วงหน้ามากเกินไปอาจเป็นอันตรายต่อเว็บไซต์ของคุณ เช่นเดียวกับโอกาสแบ็คเอนด์ที่สำคัญ เราขอแนะนำให้คุณสำรองข้อมูลไซต์ WordPress ของคุณไว้ล่วงหน้า

ปิดใช้งานการเพิ่มประสิทธิภาพการส่ง CSS

หากคุณใช้ WP Rocket เพื่อเพิ่มประสิทธิภาพการส่ง CSS หรือโหลด CSS แบบอะซิงโครนัสกับ LiteSpeed ​​Cache อาจทำให้เนื้อหาที่ไม่จัดรูปแบบ (FOUC) ปรากฏขึ้น หากคุณต้องการปรับปรุงคะแนน CLS เราแนะนำให้ปิดการใช้งานตัวเลือกเหล่านี้ในปลั๊กอินที่เกี่ยวข้อง

หรือคุณสามารถตั้งค่าสิ่งที่เรียกว่า CSS ทางเลือกที่สำคัญ สิ่งนี้เกี่ยวข้องกับการสร้างสคริปต์ทางเลือกที่สำคัญโดยใช้เครื่องมือเช่นตัวสร้าง CSS เส้นทางที่สำคัญ

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

ปิดการใช้งานแอนิเมชั่น

หากคุณกำลังใช้แอนิเมชั่น เราขอแนะนำให้คุณปิดการใช้งานแอนิเมชั่นสำหรับเว็บไซต์เวอร์ชันมือถือของคุณ เนื่องจากแอนิเมชั่นสามารถจำกัดเวลาในการโหลดเว็บไซต์ของคุณได้ หากคุณยืนยันที่จะมีแอนิเมชั่นสำหรับเว็บไซต์ของคุณ เราขอแนะนำให้ใช้ตัวเลือกการแปลงและแปล CSS

หรือคุณสามารถใช้ปลั๊กอิน Happy Addons Elementor ซึ่งจะทำให้องค์ประกอบเคลื่อนไหวได้โดยไม่ทำให้เกิดการเลื่อนเลย์เอาต์

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