หากคุณใช้งานเว็บไซต์ผ่าน Lighthouse คุณอาจสังเกตเห็นคำแนะนำให้ลบทรัพยากรที่ปิดกั้นการแสดงผล
ด้วยการหน่วงเวลา JavaScript และวางสไตล์ CSS ที่สำคัญไว้ในบรรทัด คุณสามารถกำจัดทรัพยากรใน WordPress ที่ทำให้การแสดงผลช้าลง สิ่งนี้รองรับโดยปลั๊กอินแคชส่วนใหญ่ Autoptimize และ Async JavaScript ทั้ง Elementor และ Divi มีวิธีที่มีอยู่แล้วในการกำจัดทรัพยากรที่ทำให้หน้าเว็บหยุดแสดงผล โดยใช้ CSS แบบเลื่อนเวลาและอินไลน์ การลบ CSS, JavaScript และโค้ดของบุคคลที่สามที่ไม่จำเป็นออกสามารถช่วยในการแก้ปัญหาได้เช่นกัน
ในบทความนี้ เราจะกำหนดทรัพยากรการปิดกั้นการแสดงผลและพูดถึงข้อดีของการกำจัดทรัพยากรเหล่านี้ออกจากเว็บไซต์ของคุณ จากนั้น เราจะสาธิตวิธีอื่นๆ อีก 5 วิธีในการกำจัดสิ่งเหล่านี้ให้คุณ
ทรัพยากรการปิดกั้นการเรนเดอร์คืออะไร?
การทำความเข้าใจกระบวนการโหลดเว็บไซต์โดยทั่วไปเป็นสิ่งสำคัญก่อนที่เราจะพิจารณาอย่างละเอียดยิ่งขึ้นเกี่ยวกับทรัพยากรการบล็อกการแสดงผล เนื้อหาทั้งหมดของเว็บไซต์ของคุณต้องแสดง (หรือดาวน์โหลด) โดยเบราว์เซอร์ของผู้เข้าชมหลังจากที่พวกเขาคลิกลิงก์ไปยังเนื้อหานั้น มันอ่าน HTML, CSS และ JavaScript ทั้งหมดบนเว็บไซต์ของคุณจากบนลงล่าง เว็บไซต์ของคุณจะไม่ปรากฏแก่ผู้เข้าชมจนกว่าเบราว์เซอร์จะอ่านคิวของสคริปต์นี้เสร็จสิ้น พวกเขาอาจต้องรอนานหากมีทรัพยากรที่ปิดกั้นการเรนเดอร์ โดยพื้นฐานแล้ว ไฟล์ CSS หรือ JavaScript ที่ป้องกันไม่ให้เบราว์เซอร์โหลดเนื้อหาอื่นในขณะที่กำลังดำเนินการนั้นเป็นทรัพยากรที่ปิดกั้นการแสดงผล การดำเนินการนี้อาจหยุดกระบวนการแสดงผลและทำให้หน้าดูไม่เสร็จหรือว่างเปล่า
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยเมื่อมีทรัพยากรที่ปิดกั้นการแสดงผลบนเว็บไซต์ของคุณ ไฟล์เพิ่มเติมจะถูกโหลดที่ด้านบนของโค้ด ก่อนเข้าดูเว็บไซต์ ผู้ใช้ต้องรอในขณะที่ประมวลผลไฟล์เหล่านี้ ทรัพยากรการปิดกั้นการแสดงผลมีศักยภาพที่จะมีอิทธิพลต่อตัวบ่งชี้ประสิทธิภาพเว็บไซต์หลายตัว เช่น การระบายสีเนื้อหาที่ใหญ่ที่สุดจะวัดระยะเวลาที่เนื้อหาหลักของหน้าจะโหลด ครั้งแรกที่เนื้อหาจาก Document Object Model (DOM) ของไซต์ของคุณแสดงผลโดยเบราว์เซอร์ จะเรียกว่าการระบายสีเนื้อหาครั้งแรก Totalblockingtime คือเวลาระหว่างการระบายสีเนื้อหาครั้งแรกและเวลาในการโต้ตอบ (ระยะเวลาที่หน้าเว็บจะโต้ตอบได้อย่างสมบูรณ์)
แม้ว่าจะไม่จำเป็นสำหรับการโหลด แต่รีซอร์สการบล็อกการเรนเดอร์อาจขัดขวางการเรนเดอร์ ประสบการณ์ผู้ใช้ของเว็บไซต์ของคุณอาจได้รับผลกระทบ (UX) ดังนั้น สิ่งสำคัญคือคุณต้องกำจัดสิ่งเหล่านี้เพื่อหยุดผู้เข้าชมไม่ให้ออกจากหน้าเว็บของคุณ
ประโยชน์ของการขจัดทรัพยากรการบล็อกการเรนเดอร์
ผู้ใช้อินเทอร์เน็ตมักไม่ชอบรอให้เว็บไซต์โหลด เว็บไซต์ที่รวดเร็วสามารถดึงดูดผู้ใช้ให้สำรวจเนื้อหาของคุณและป้องกันไม่ให้พวกเขาไปพบคู่แข่ง ด้วยการลบองค์ประกอบการบล็อกการแสดงผล คุณจะสร้างโค้ดของเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพ เป็นไปได้น้อย ซึ่งสามารถเป็นความลับเพื่อเพิ่มความเร็วของหน้าได้ เนื่องจากประสิทธิภาพไซต์และการมีส่วนร่วมของผู้ใช้เป็นสองปัจจัยที่ยักษ์ใหญ่เครื่องมือค้นหาอย่าง Google พิจารณาเมื่อประเมินเว็บไซต์ การลบไฟล์ที่ปิดกั้นการแสดงผลสามารถช่วยเพิ่มอันดับเครื่องมือค้นหาของไซต์ของคุณได้
วิธีกำจัดทรัพยากรการบล็อกการเรนเดอร์ใน WordPress
คุณอาจสงสัยว่าจะลบองค์ประกอบที่ปิดกั้นการแสดงผลออกจากเว็บไซต์ของคุณได้อย่างไร ตอนนี้คุณเข้าใจวิธีสังเกตองค์ประกอบเหล่านี้ใน WordPress แล้ว โชคดีที่เราได้รวบรวมแนวทางต่างๆ มากมายที่คุณสามารถทำได้เพื่อบรรลุเป้าหมายนี้ โดยเริ่มจากวิธีที่ง่ายที่สุด
เพิ่มประสิทธิภาพการโหลด CSS
การเพิ่มความเร็วที่ CSS โหลดบนเว็บไซต์ของคุณเป็นเทคนิคหนึ่งในการกำจัดทรัพยากรที่ปิดกั้นการแสดงผล เบราว์เซอร์จะโหลดหน้าเว็บของคุณจากบนลงล่างตามที่เคยกล่าวไว้ ซึ่งอาจทำให้กระบวนการโหลดใช้เวลานานขึ้นเมื่อจำเป็นต้องประมวลผลไฟล์บางไฟล์ สิ่งสำคัญคือต้องจำไว้ว่าต้องโหลดไฟล์ CSS บางไฟล์เท่านั้นจึงจะแสดงหน้าเว็บได้ ดังนั้น คุณสามารถแสดงไฟล์ที่สำคัญที่สุดก่อนได้เมื่อคุณเพิ่มประสิทธิภาพการโหลด CSS คุณสามารถลบ CSS ที่บล็อกการแสดงผลได้ด้วยตนเอง แต่คุณสามารถติดตั้งปลั๊กอินเพื่อทำให้สิ่งต่างๆ ง่ายขึ้นได้ คุณสามารถเพิ่มประสิทธิภาพเว็บไซต์ของคุณได้จากแดชบอร์ด WordPress โดยใช้ Jetpack Boost ปลั๊กอินนี้ทำให้การโหลดแบบ Lazy Loading ง่ายขึ้น เลื่อน JavaScript ที่ไม่จำเป็นออกไป และปรับปรุงการโหลด CSS หนึ่งในวิธีที่ง่ายที่สุดในการกำจัดทรัพยากรที่บล็อกการเรนเดอร์ใน WordPress คือการทำเช่นนี้
เริ่มต้นด้วยการค้นหา Jetpack Boost ภายใต้ Plugins Add New ในแดชบอร์ด WordPress ของคุณ ติดตั้งแล้วเปิดปลั๊กอินบนเว็บไซต์ของคุณ
คุณสามารถไปที่ Jetpack My Jetpack หากคุณโหลด Jetpack ไว้แล้ว ค้นหา Boost และเลือกเปิดใช้งานจากรายการสินค้า Jetpack
หลังจากเปิดใช้งานปลั๊กอินแล้ว ให้คลิกแท็บ Jetpack Boost แล้วเลือกเริ่มต้นใช้งาน
เว็บไซต์ของคุณจะได้รับคะแนนประสิทธิภาพจาก Jetpack ทันที คุณจะเห็นเกรดตัวอักษรพร้อมกับข้อมูลบนเดสก์ท็อปและคะแนนมือถือของคุณ
จากนั้น เปิดใช้งานคุณสมบัตินี้โดยเลื่อนลงไปที่ Optimize CSS Loading เมื่อเปิดใช้งาน Jetpack Boost จะเพิ่ม CSS ที่สำคัญสำหรับเว็บไซต์ของคุณเพื่อให้โหลดเร็วขึ้น
เลื่อน JavaScript ที่ไม่จำเป็นออกไป
คุณสามารถใช้มาตรการเพิ่มเติมเพื่อกำจัดทรัพยากรที่บล็อกการเรนเดอร์ใน WordPress นอกเหนือไปจากการเพิ่มประสิทธิภาพการโหลด CSS เท่านั้น JavaScript ที่ไม่จำเป็นสามารถเลื่อนออกไปได้เช่นกัน เพื่อเพิ่มความเร็วในการโหลดเว็บไซต์ของคุณให้ดียิ่งขึ้นไปอีก JavaScript ที่ไม่จำเป็นอาจถูกหน่วงเวลาเพื่อให้กระบวนการบางอย่างล่าช้าจนกว่าจะโหลดเนื้อหาของคุณเสร็จ คุณสามารถหยุดเบราว์เซอร์ไม่ให้เรียกใช้ไฟล์ JavaScript หากไม่จำเป็นต้องโหลดหน้าเว็บ โชคดีที่การใช้ปลั๊กอิน Jetpack Boost ทำให้สิ่งนี้ตรงไปตรงมา คุณสามารถเลื่อน JavaScript ที่ไม่จำเป็นออกไปได้ง่ายๆ หลังจากที่คุณปรับกระบวนการโหลด CSS ให้เหมาะสมแล้ว สลับการสลับการสลับของพื้นที่ Defer Non-Essential JavaScript เป็นเปิด ส่วนนี้อยู่ใต้ส่วนเพิ่มประสิทธิภาพการโหลด CSS
ปลั๊กอินจะอัปเดตการประเมินประสิทธิภาพโดยรวมของเพจของคุณหลังจากที่คุณเปิดใช้งานการตั้งค่านี้ คะแนนของคุณทั้งก่อนและหลังการใช้ Jetpack Boost จะแสดงขึ้น
ดูคะแนนในภาพหน้าจอที่ถ่ายทั้งก่อนและหลังเราทำขั้นตอนนี้เสร็จแล้ว คุณจะทราบว่าการเพิ่มความเร็วของหน้าเว็บทำได้โดยการหน่วงเวลา JavaScript ที่ไม่จำเป็นและโหลด CSS ได้อย่างมีประสิทธิภาพมากขึ้น เบราว์เซอร์สามารถโหลดเนื้อหาของคุณได้เร็วขึ้นเนื่องจากไม่ต้องเรียกใช้สคริปต์ขนาดใหญ่
เลื่อนภาพนอกจอ
แม้ว่ารูปภาพจะไม่ใช่ทรัพยากรที่ป้องกันไม่ให้หน้าแสดงผล คุณอาจต้องการคิดเกี่ยวกับการเพิ่มความเร็วในการโหลด เว็บไซต์มักมีรูปภาพนอกหน้าจอซึ่งจะไม่แสดงจนกว่าผู้ใช้จะโต้ตอบกับหน้า เช่น การเลื่อน คุณสามารถเลื่อนการโหลดแบบ Lazy Loading ออกไปได้ เนื่องจากไม่จำเป็นสำหรับการโหลดหน้าเว็บ โหลดเฉพาะภาพที่ผู้เข้าชมสามารถดูได้แบบขี้เกียจๆ รูปภาพเหล่านี้จะโหลดก่อนที่จะแสดงบนหน้าเมื่อผู้ใช้เลื่อนดู เบราว์เซอร์จะพยายามโหลดทุกภาพในหน้าพร้อมกันหากไม่ได้เปิดใช้งานการโหลดแบบขี้เกียจ ยิ่งเนื้อหาของคุณใช้เวลาในการโหลดนานเท่าใด โอกาสที่ผู้เยี่ยมชมจะออกจากไซต์ของคุณก็จะยิ่งมากขึ้นเท่านั้น
การโหลดเป็นประจำอาจไม่ใช่ปัญหาหากผู้เข้าชมใช้คอมพิวเตอร์เดสก์ท็อป ในทางกลับกัน สมาร์ทโฟนและแท็บเล็ตมีหน้าจอที่เล็กกว่าและแบนด์วิธที่น้อยกว่า เว็บไซต์ของคุณอาจใช้แบนด์วิธมากขึ้นและใช้เวลาในการโหลดนานขึ้นสำหรับผู้ใช้โทรศัพท์มือถือหากโหลดรูปภาพทั้งหมดพร้อมกันจนเต็ม ปัญหานี้แก้ไขได้ด้วยการโหลดแบบขี้เกียจ
หากต้องการเปิดใช้งานการโหลดแบบ Lazy Loading บนไซต์ของคุณ ให้ใช้ Jetpack Boost เพียงมองหาตัวเลือก Lazy Image Loading และเปิดใช้งาน
ผู้ดูจะเห็นเฉพาะรูปภาพที่โหลดบนเว็บไซต์ของคุณเมื่อเลื่อนหน้าลงมาหากคุณทำเช่นนี้ แม้ว่ารูปภาพจะไม่ใช่ทรัพยากรที่แสดงผลการบล็อก แต่การเปิดใช้งานการโหลดแบบขี้เกียจสามารถเพิ่มความเร็วให้กับเพจของคุณได้
กำจัด Render-Blocking Resources ด้วย Elementor/Divi
ทั้ง Elementor และ Divi มีตัวเลือกสำหรับการลบการเรนเดอร์ทรัพยากรที่ขัดขวาง
เปิดใช้การโหลด CSS ที่ปรับปรุงแล้วและอินไลน์แบบอักษรที่ยอดเยี่ยมในการตั้งค่า Elementor Experiments เพื่อโหลด CSS และฟอนต์แบบอินไลน์ ทำให้ไม่บล็อกการแสดงผล การโหลดเนื้อหาที่ได้รับการปรับปรุงจะกำจัด CSS/JavaScript ที่ไม่จำเป็น ซึ่งช่วยปรับปรุงเว็บไวต์พื้นฐานในหลายๆ วิธี
ด้วยการใช้ CSS ที่สำคัญ การเลื่อน CSS/JavaScript และการโหลดแบบอักษรแบบอินไลน์ ตัวเลือกประสิทธิภาพของ Divi ยังสามารถลดทรัพยากรการบล็อกการแสดงผลได้อีกด้วย
ลบ JavaScript ที่ปิดกั้นการแสดงผลด้วยตนเอง
คุณยังสามารถลบทรัพยากรที่บล็อกการแสดงผลได้ด้วยตนเอง แม้ว่าการติดตั้งปลั๊กอินเพิ่มประสิทธิภาพจะเป็นตัวเลือกที่ง่ายกว่ามาก ตามหลักการแล้ว คุณควรคิดถึงตัวเลือกนี้หากคุณเป็นผู้เขียนโค้ดที่มีประสบการณ์เท่านั้น หากคุณต้องการลดจำนวนปลั๊กอินบนเว็บไซต์ ขั้นตอนนี้อาจมีประโยชน์เช่นกัน คุณสามารถกำหนดคุณสมบัติ async หรือ defer ให้กับไฟล์ของคุณเพื่อช่วยให้ JavaScript ทำงานได้อย่างมีประสิทธิภาพมากขึ้น เบราว์เซอร์จะได้รับคำแนะนำให้แสดงสคริปต์ที่ไม่สำคัญแยกกันโดยทำเครื่องหมายไว้เช่นนั้น คุณลักษณะทั้งสองสามารถใช้เพื่อเพิ่มความเร็วในการโหลดข้อมูล HTML
ไฟล์ HTML จะถูกแยกวิเคราะห์ในลักษณะทั่วไปจนกระทั่งพบไฟล์สคริปต์ การแยกวิเคราะห์จะหยุดลงในขณะที่ค้นหาสคริปต์ หลังจากดาวน์โหลดและเรียกใช้ การแยกวิเคราะห์จะดำเนินต่อไป
ขณะประมวลผล HTML ที่เหลือ เบราว์เซอร์สามารถดาวน์โหลด JavaScript ได้ด้วยคุณสมบัติ async หลังจากดาวน์โหลด มันสามารถหยุดการประมวลผล HTML และเรียกใช้สคริปต์
แอตทริบิวต์ defer ทำงานคล้ายกัน โดยอนุญาตให้เบราว์เซอร์ดาวน์โหลดสคริปต์ในขณะที่แยกวิเคราะห์ HTML ความแตกต่างคือมันยังหน่วงเวลาการเรียกใช้สคริปต์จนกว่าการแยกวิเคราะห์ HTML จะเสร็จสิ้น
คุณต้องใส่รหัสในไฟล์ functions.php ของคุณเพื่อใช้คุณสมบัติเหล่านี้อย่างใดอย่างหนึ่ง คุณต้องค้นหาแท็ก script> ของทรัพยากรการบล็อกการแสดงผลก่อน ต่อไปนี้เป็นแอตทริบิวต์ async:
<script src="resource.js" async></script>อีกทางเลือกหนึ่ง ให้พิจารณาว่าสคริปต์อาจมีลักษณะอย่างไรเมื่อใช้คุณสมบัติการเลื่อนเวลา:
http://resource.jsแม้ว่าปลั๊กอินสามารถดูแลแอตทริบิวต์เหล่านี้ให้คุณได้ แต่การทำเองอาจเหมาะกับความต้องการของคุณมากกว่า หากเป็นเช่นนั้น สิ่งสำคัญคือต้องทำความเข้าใจว่าควรใช้แอตทริบิวต์แต่ละรายการเมื่อใด คุณต้องใช้คุณสมบัติเลื่อนสำหรับสคริปต์ที่ไม่จำเป็นซึ่งขึ้นอยู่กับสคริปต์อื่น ตัวเลือก async เหมาะสมกับสคริปต์อื่นๆ
ใช้แอตทริบิวต์ async หรือ defer ด้วยปลั๊กอิน
ใช้ปลั๊กอินเช่น Async JavaScript หากคุณมีปัญหาในการแก้ไขสคริปต์ด้วยตนเอง คุณสามารถควบคุมสคริปต์ที่มีคุณสมบัติ async หรือ defer ได้อย่างสมบูรณ์ด้วยเครื่องมือนี้
หลังจากติดตั้งปลั๊กอินแล้ว ให้เลือกเปิดใช้งาน Async JavaScript ภายใต้การตั้งค่า Async JavaScript
จากนั้นไปที่หัวข้อ Async JavaScript Method คุณสามารถเลือกว่าจะเปิดใช้งาน async หรือ defer แอตทริบิวต์ที่นี่
เป็นความคิดที่ดีที่จะยกเว้นสคริปต์เหล่านี้ เนื่องจากปลั๊กอินจำนวนมากขึ้นอยู่กับ jQuery การใช้คุณสมบัติ async กับ jQuery อาจส่งผลให้เว็บไซต์ของคุณเสียหายได้
หากมีข้อสงสัย คุณสามารถใช้แอตทริบิวต์ defer ได้ แต่การยกเว้น jQuery ทั้งหมดเป็นแนวทางปฏิบัติที่ดีที่สุด
ตอนนี้คุณสามารถระบุสคริปต์ที่คุณต้องการเรียกใช้แบบ async หรือ defer คุณต้องระมัดระวังในการใส่แต่ละสคริปต์ในส่วนที่เหมาะสม
คุณสามารถแสดงรายการสคริปต์ใดๆ ที่คุณต้องการยกเว้นจากขั้นตอนนี้ภายใต้ส่วนการยกเว้นสคริปต์
นอกจากนี้ยังมีตัวเลือกสำหรับการยกเว้นปลั๊กอินและธีมที่ด้านล่างของหน้า สคริปต์สำหรับธีมหรือปลั๊กอินใดๆ ที่คุณกล่าวถึงที่นี่จะไม่สามารถใช้ได้กับลักษณะ async หรือ defer
หลังจากทำการปรับเปลี่ยนที่จำเป็นแล้ว คุณสามารถคลิก บันทึกการตั้งค่า วิธีการนี้อาจเป็นประโยชน์ในการประนีประนอมระหว่างการแก้ไขสคริปต์ด้วยตนเองและการใช้ปลั๊กอินเพื่อจัดการงานให้คุณ อีกทางเลือกหนึ่งคือ คุณสามารถกำจัดขั้นตอนพิเศษเหล่านี้ได้โดยใช้แอปพลิเคชันแบบครบวงจร เช่น Jetpack Boost
ห่อ
การทำให้เบราว์เซอร์ของผู้เยี่ยมชมเลื่อนการแสดงผลเนื้อหาครึ่งหน้าบนในขณะที่ดาวน์โหลดเนื้อหาที่ไม่จำเป็นในทันที ทรัพยากรการบล็อกการแสดงผลจะเพิ่มเวลาในการโหลดหน้าเว็บที่รับรู้ของไซต์ WordPress ของคุณ คุณควรชะลอการโหลดทรัพยากรที่ไม่จำเป็นในทันที เพื่อช่วยผู้เข้าชมในการโหลดพื้นที่ที่มองเห็นได้ของหน้าเว็บของคุณเร็วขึ้น ใช้ปลั๊กอินที่สร้างไว้ล่วงหน้าเพื่อกำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์บน WordPress คุณสามารถรวม Autoptimize และ Async JavaScript ซึ่งเป็นปลั๊กอินสองตัวที่สร้างโดยนักพัฒนาคนเดียวกันเข้าด้วยกันสำหรับโซลูชันที่ไม่มีค่าใช้จ่าย คุณสามารถใช้ WP Rocket ซึ่งมีปฏิสัมพันธ์เฉพาะกับ Kinsta และสามารถช่วยเหลือในการปรับแต่งประสิทธิภาพ WordPress เพิ่มเติมอีกมากมาย หากคุณพร้อมที่จะจ่ายเงิน
