คู่มือสำหรับผู้เริ่มต้นใช้งาน: แก้ไขการเปลี่ยนแปลงเค้าโครงสะสมใน WordPress

มีปัญหากับ Cumulative Layout Shift ใน WordPress หรือไม่?

Cumulative Layout Shift หรือ CLS เรียกสั้นๆ ว่า CLS เป็นเมตริกที่เน้นประสบการณ์ของผู้ใช้ ซึ่งเป็นส่วนหนึ่งของความคิดริเริ่ม Core Web Vitals ใหม่ของ Google

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

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

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

สารบัญ:

• Cumulative Layout Shift คืออะไร?
• วิธีระบุปัญหาของ Cumulative Layout Shift
• วิธีแก้ไข Cumulative Layout Shift

บทนำสู่ Cumulative Layout Shift ใน WordPress

การเปลี่ยนเลย์เอาต์เกิดขึ้นเมื่อเนื้อหาบนเพจของคุณเคลื่อนที่ไปมาโดยที่ผู้ใช้ไม่ต้องโต้ตอบ

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

นี่คือภาพที่เป็นประโยชน์จากผู้ใช้ที่ web.dev – ผู้ใช้ตั้งใจจะคลิก “ไม่ กลับไป” แต่บังเอิญคลิก “ใช่ สั่งซื้อสินค้าของฉัน” แทน เนื่องจากการเปลี่ยนเลย์เอาต์ทำให้ตำแหน่งของปุ่มย้ายหลังจากการโหลดหน้าแรก:

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

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

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

ขออภัย ปัญหาที่มีคะแนน Cumulative Layout Shift สูงไม่ได้จบเพียงแค่นั้น Cumulative Layout Shift เป็นส่วนหนึ่งของความคิดริเริ่ม Core Web Vitals ใหม่ของ Google จากการอัปเดต Page Experience ของ Google คะแนน Core Web Vitals ของเว็บไซต์ของคุณเป็นปัจจัยการจัดอันดับ SEO ขนาดเล็ก ซึ่งหมายความว่าปัญหาเกี่ยวกับ CLS อาจส่งผลต่อการจัดอันดับเว็บไซต์ของคุณ

วิธีระบุปัญหากับ Cumulative Layout Shift ใน WordPress

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

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

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

• ดี ซึ่งเท่ากับหรือน้อยกว่า 0.1
• ตกลง ซึ่งอยู่ระหว่าง 0.1 ถึง 0.25
• แย่ ซึ่งมีค่าเท่ากับ 0.25 หรือมากกว่า

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

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

วิธีแก้ไข Cumulative Layout Shift ใน WordPress (3 วิธี)

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

1. เพิ่มมิติให้กับรูปภาพ วิดีโอ และโฆษณาของคุณ

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

โดยพื้นฐานแล้ว ความแปรปรวนนี้ไม่ส่งผลกระทบโดยตรงต่อคะแนน CLS ของคุณ อย่างไรก็ตาม มันยังคงเป็นภัยคุกคาม หากคุณไม่ระบุขนาดของรายการ คุณสามารถเริ่มประสบปัญหาได้

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

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

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

อย่างไรก็ตาม หากคุณเคยเพิ่มรูปภาพด้วยตนเองด้วยโค้ดหรือผ่านปลั๊กอิน คุณจะต้องแน่ใจว่าขนาดของรูปภาพนั้นอยู่ที่นั่น

ปัญหาที่ใหญ่กว่ามากกับ CLS บน WordPress คือโฆษณา หากคุณกำลังวางโฆษณาในเนื้อหาของคุณ คุณจะต้องแน่ใจว่าคุณจองพื้นที่สำหรับโฆษณาเหล่านั้นเพื่อหลีกเลี่ยง CLS

วิธีหนึ่งในการทำเช่นนี้คือการใช้คุณสมบัติ CSS min-height min-width กับคอนเทนเนอร์ <div> ที่มีโฆษณาของคุณ Google มีคำแนะนำที่ดีเกี่ยวกับวิธีการทำสิ่งนี้ให้สำเร็จ

ตัวอย่างเช่น หากคุณแสดงโฆษณาขนาด 300x250px ภายใน div ด้วยรหัส in-content-ad คุณสามารถจองพื้นที่โดยใช้รหัสนี้:

 <div>วางโค้ดโฆษณาที่นี่</div>

เครื่องมือโฆษณาบางอย่างอาจเสนอเครื่องมือที่จะช่วยให้คุณบรรลุเป้าหมายนี้ ตัวอย่างเช่น หากคุณใช้ Google Ads Google จะจัดเตรียม Ad Editor เพื่อช่วยในเรื่องนี้

2. โหลดฟอนต์ของคุณล่วงหน้า

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

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

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

ปลั๊กอินประสิทธิภาพ WordPress จำนวนมากมีตัวเลือกในการโหลดแบบอักษรล่วงหน้า ตัวอย่างเช่น Autoptimize, Asset CleanUp, Perfmatters และ WP Rocket

สำหรับคนส่วนใหญ่ การใช้ปลั๊กอินเหล่านี้เป็นวิธีแก้ปัญหาที่ง่ายที่สุดในการโหลดฟอนต์ WordPress ล่วงหน้า

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

เมื่อคุณแก้ไข header.php ในธีมย่อย ให้เลื่อนไปที่ด้านล่างของหน้า จากนั้นคัดลอกและวางโค้ดบรรทัดต่อไปนี้ อย่าลืมแทนที่ลิงก์แบบอักษรตัวอย่าง – roboto.woff2 ในตัวอย่างนี้ – ด้วย ลิงก์จริงไปยังไฟล์ฟอนต์ที่คุณใช้บนไซต์ของคุณ:

 <link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

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

3. เพิ่มประสิทธิภาพเนื้อหาแบบไดนามิกของคุณ

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

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

มีสองวิธีในการแก้ไขปัญหานี้:

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

แก้ไขการเปลี่ยนแปลงเค้าโครงสะสมใน WordPress ให้ดี

ในบทความนี้ เราได้กล่าวถึงสามวิธีในการแก้ไขและลดการเปลี่ยนแปลงเค้าโครงสะสมใน WordPress:

1. ตรวจสอบให้แน่ใจว่าสื่อและโฆษณาทั้งหมดของคุณมีมิติที่กำหนดไว้อย่างชัดเจน WordPress จะจัดการรูปภาพที่คุณฝังในตัวแก้ไขโดยอัตโนมัติ แต่คุณอาจต้องกำหนดขนาดด้วยตนเองสำหรับโฆษณาและรูปภาพใดๆ ที่คุณเพิ่มภายนอกตัวแก้ไข
2. โหลดแบบอักษรของคุณล่วงหน้าเพื่อหลีกเลี่ยงการปรับเปลี่ยนในนาทีสุดท้าย
3. ให้ความสนใจกับวิธีที่คุณใช้เนื้อหาแบบไดนามิก – โดยกำหนดให้ผู้ใช้โต้ตอบหรือจองพื้นที่สำหรับองค์ประกอบแบบไดนามิกใดๆ

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