Cumulative Layout Shift (CLS) ใน WordPress: วิธีกำจัดมัน

ในบทนี้เกี่ยวกับ Cumulative Layout Shift เราใกล้จะถึงจุดสิ้นสุดของมินิซีรีส์เกี่ยวกับ Core Web Vitals สำหรับผู้ใช้ WordPress ในบทก่อนหน้านี้เกี่ยวกับ Largest Contentful Paint และ First Input Delay เราได้พูดถึงความหมายที่แท้จริงของคำเหล่านั้นและวิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับแต่ละคำ ตอนนี้เราต้องการทำเช่นเดียวกันสำหรับ CLS

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

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

ความหมายของการเปลี่ยนแปลงเค้าโครงสะสมคืออะไร?

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

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

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

ทำไมมันถึงสำคัญ?

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

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

CLS เกิดจากอะไร

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

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

แหล่งที่มาอื่นของ CLS อาจเป็นมาร์กอัป CSS และ JavaScript ที่ขัดแย้งกัน เมื่อพวกเขาบล็อกกัน มันหยุดกระบวนการโหลดหน้าเว็บ

มีการคำนวณกะเค้าโครงสะสมอย่างไร

ตรงกันข้ามกับรุ่นก่อน การคำนวณ Cumulative Layout Shift นั้นซับซ้อนกว่าเล็กน้อย เพื่อให้เข้าใจตรงกัน เราจำเป็นต้องทำความเข้าใจเงื่อนไขบางประการก่อน:

• การเปลี่ยนเลย์เอาต์ — นั่นคือเมื่อองค์ประกอบที่มองเห็นได้บนเพจแล้วย้ายจากตำแหน่งเริ่มต้นหลังจากแสดงผลไปแล้ว องค์ประกอบประเภทนี้เรียกว่า องค์ประกอบที่ไม่เสถียร (ฉันรู้ว่าสร้างสรรค์)
• การเปลี่ยนแปลงเลย์เอาต์ที่คาดหวังและที่ไม่คาดคิด — การเปลี่ยนแปลงเลย์เอาต์จะเป็นค่าลบหากผู้ใช้ไม่ได้คาดหวัง นอกจากนี้ยังมีการเปลี่ยนแปลงเค้าโครงที่คาดหวังและยินดีต้อนรับ เช่น หลังจากการโต้ตอบกับหน้าเว็บ (เช่น การส่งแบบฟอร์ม) ภาพเคลื่อนไหวและการเปลี่ยนผ่าน CSS เป็นตัวอย่างอื่นๆ สำหรับการเปลี่ยนแปลงเลย์เอาต์ที่คาดไว้ เพื่ออธิบายเรื่องนี้ CLS จะพิจารณาการเปลี่ยนแปลงโครงร่างทั้งหมดที่เกิดขึ้นภายใน 500 มิลลิวินาทีของการโต้ตอบของผู้ใช้ที่คาดว่าจะเกิดขึ้น
• เศษส่วนผลกระทบ — เปอร์เซ็นต์ของวิวพอร์ต (ส่วนที่มองเห็นได้ของเว็บไซต์บนหน้าจอ) ที่องค์ประกอบที่เคลื่อนไหวส่งผลกระทบเป็นเลขทศนิยม (เช่น 0.5 หากส่งผลกระทบต่อ 50% ของหน้าจอ)
• เศษส่วนระยะทาง — ระยะทางเป็นเปอร์เซ็นต์ของหน้าจอที่องค์ประกอบที่ไม่เสถียรเคลื่อนที่ระหว่างกะ กำหนดให้เป็นเลขฐานสิบด้วย
• คะแนนการเปลี่ยนแปลงเลย์เอาต์ — คำนวณโดยการคูณเศษส่วนของผลกระทบกับเศษส่วนของระยะทาง (เช่น 0.4 x 0.15 = 0.06) ผลที่ตามมาคือองค์ประกอบขนาดใหญ่ที่เคลื่อนที่เป็นระยะทางไกลส่งผลให้คะแนนสูงกว่าองค์ประกอบขนาดเล็กที่เคลื่อนที่ในระยะทางสั้นๆ

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

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

คะแนนกะเค้าโครงที่ดีคืออะไร?

คะแนนที่ดีคือมีค่า CLS เท่ากับ 0.1 หรือน้อยกว่า มากถึง 0.25 ต้องการการปรับปรุง สิ่งใดที่เหนือกว่านั้นไม่ดีและน่าจะส่งผลให้ประสิทธิภาพการค้นหาลดลง

วิธีทดสอบการเลื่อนเค้าโครงแบบสะสม

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

มีหลายวิธีในการตรวจสอบว่า Cumulative Layout Shift เป็นปัญหาในไซต์ WordPress ของคุณหรือไม่ ซึ่งเกือบจะเหมือนกับเมตริก Core Web Vitals อื่นๆ พอร์ตการโทรแรกของคุณควรเป็น PageSpeed ​​Insights เสมอ ซึ่งจะแสดงเมตริกในหน้าผลลัพธ์

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

นอกจากนี้ PageSpeed ​​Insights ยังแสดงอัตราส่วนขององค์ประกอบแต่ละรายการที่ส่งผลต่อคะแนน CLS สิ่งนี้ทำให้คุณสามารถจัดลำดับความสำคัญของสิ่งที่มีผลกระทบด้านลบมากที่สุด

นอกจากนั้น คุณยังสามารถใช้สิ่งต่อไปนี้:

• รายงาน Core Web Vitals ภายใน Google Search Console
• เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ Chrome
• ประภาคาร
• ไลบรารี JavaScript ของ web-vitals

นอกจากนี้ยังมีส่วนขยายของ Chrome ที่เรียกว่า CLS Visualizer เน้นองค์ประกอบที่เปลี่ยนไปในหน้าเว็บของคุณ สำหรับ Firefox ให้ลองใช้ SpeedVitals

วิธีลดการเปลี่ยนแปลงเค้าโครงสะสมบนเว็บไซต์ WordPress ของคุณ

หากคุณสังเกตเห็นว่า CLS เป็นปัญหาในไซต์ WordPress ของคุณ คุณอาจต้องการแก้ไข นี่คือเนื้อหาส่วนที่เหลือของบทความนี้

ให้ขนาดสื่อ

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

น่าเสียดาย เป็นเรื่องปกติที่การออกแบบที่ตอบสนองตามอุปกรณ์จะไม่ให้ขนาดภาพที่เฉพาะเจาะจง โดยมากแล้ว รูปภาพจะถูกตั้งค่าเป็น width หรือ max-width: 100%; และ height: auto; . จากนั้น ก็ขึ้นอยู่กับเบราว์เซอร์ที่จะพิจารณาว่าขนาดจริงเป็นอย่างไรเมื่อดาวน์โหลดภาพ

ในอดีต สิ่งนี้มักจะนำไปสู่ประเภทของพฤติกรรมที่เราพยายามหลีกเลี่ยง จู่ๆ ภาพต่างๆ ก็ปรากฏขึ้น เคลื่อนย้ายสิ่งอื่นๆ ไปรอบๆ ดังนั้น คุณควรระบุขนาดสำหรับภาพของคุณเสมอ หรืออย่างน้อยอัตราส่วนภาพ CSS

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

หากไม่ใช่สำหรับภาพใดภาพหนึ่ง คุณสามารถแก้ไขได้ในโปรแกรมแก้ไข Gutenberg

การจัดการกับโฆษณา การฝัง และเนื้อหาที่คล้ายกัน

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

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

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

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

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

ปรับเนื้อหาไดนามิกให้เหมาะสม

เนื้อหาแบบไดนามิกคือองค์ประกอบของเพจที่เพิ่มลงในเพจหลังจากที่โหลดไปแล้ว ตัวอย่างก่อนหน้านี้เป็นภาพที่โหลดแบบ Lazy Loading แต่โดยทั่วไปแล้วยังมีสิ่งต่างๆ เช่น แบนเนอร์ แบบฟอร์ม หรือแม้แต่ผลิตภัณฑ์ที่เกี่ยวข้องที่แสดงบนสกรอลล์

โดยปกติแล้ว หากคุณไม่ได้วางแผนอย่างเหมาะสม ก็อาจนำไปสู่การเปลี่ยนเลย์เอาต์ได้ ต่อไปนี้คือวิธีหลีกเลี่ยง:

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

ปรับปรุงการจัดการแบบอักษรบนเว็บ

แบบอักษรบนเว็บยังทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์ รูปแบบทั่วไปสองรูปแบบคือคุณจะเห็นข้อความที่ไม่มีการจัดรูปแบบก่อนที่จะมีแบบอักษรบนเว็บ (Flash of Unstyled Text หรือ FOUT) หรือไม่เห็นข้อความเลยในตอนแรก จากนั้นจึงปรากฏขึ้นพร้อมกับแบบอักษรของเว็บ (Flash of Invisible Text หรือ ฟอท).

ทั้งสองอย่างอาจนำไปสู่การเปลี่ยนเค้าโครงได้ และนี่คือสิ่งที่คุณสามารถทำได้:

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

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

อย่าปล่อยให้เลย์เอาต์สะสมเปลี่ยนไซต์ WordPress ของคุณ

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

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

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

คุณมีเคล็ดลับเพิ่มเติมเกี่ยวกับวิธีป้องกัน Cumulative Layout Shift ใน WordPress หรือไม่? แจ้งให้เราทราบในความคิดเห็นด้านล่าง!