วิธีกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress

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

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

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

ทรัพยากรการบล็อกการแสดงผลคืออะไร

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

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

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

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

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

• Largest Contentful Paint : วัดระยะเวลาในการโหลดเนื้อหาหลักของหน้า
• First Contentful Paint : นี่เป็นเวลาที่เบราว์เซอร์ใช้ในการแสดงเนื้อหา Document Object Model (DOM) ชิ้นแรกบนไซต์ของคุณ
• Total Blocking Time : วัดการหน่วงเวลาระหว่าง First Contentful Paint กับ Time to Interactive (ระยะเวลาที่หน้าเพจจะโต้ตอบได้อย่างสมบูรณ์)

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

ประโยชน์ของการกำจัดทรัพยากรการบล็อกการแสดงผล

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

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

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

วิธีทดสอบเว็บไซต์ของคุณสำหรับทรัพยากรการบล็อกการแสดงผล

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

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

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

PageSpeed ​​Insights ยังทำให้ง่ายต่อการตรวจสอบทรัพยากรการบล็อกการแสดงผล ในการดำเนินการนี้ คุณสามารถเลื่อนลงไปที่ส่วน โอกาส ในที่นี้ คุณจะต้องมองหาคำแนะนำที่มีป้ายกำกับว่า Remove render-blocking resources

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

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

วิธีกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress

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

1. เพิ่มประสิทธิภาพการโหลด CSS

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

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

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

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

ในการเริ่มต้น ให้ไปที่ Plugins → Add New ในแดชบอร์ด WordPress ของคุณและค้นหา Jetpack Boost จากนั้น ติดตั้งและเปิดใช้งานปลั๊กอินบนไซต์ของคุณ

หากคุณติดตั้ง Jetpack แล้ว คุณสามารถไปที่ Jetpack → My Jetpack จากรายการผลิตภัณฑ์ Jetpack ให้มองหา Boost แล้วคลิก Activate

หลังจากเปิดใช้งานปลั๊กอินแล้ว ให้คลิกที่แท็บ Jetpack Boost และเลือก Get Started

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

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

2. เลื่อน JavaScript ที่ไม่จำเป็น

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

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

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

ในการดำเนินการนี้ ให้ค้นหาส่วน Defer Non-Essential JavaScript ซึ่งอยู่ใต้ Optimize CSS Loading และเปิดสวิตช์สลับ

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

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

3. เลื่อนภาพนอกจอ

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

การโหลดรูปภาพที่ขี้เกียจนั้นเกี่ยวข้องกับการโหลดรูปภาพที่ผู้เยี่ยมชมสามารถมองเห็นเท่านั้น เมื่อมีคนเริ่มเลื่อน รูปภาพเหล่านี้จะโหลดทันทีก่อนที่จะปรากฏบนหน้า

เบราว์เซอร์จะพยายามโหลดภาพทั้งหมดบนหน้าพร้อมกันโดยไม่ต้องโหลดแบบ Lazy Loading ซึ่งหมายความว่าจะใช้เวลาโหลดเนื้อหานานขึ้น ซึ่งอาจกระตุ้นให้ผู้คนออกจากไซต์ของคุณ

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

คุณสามารถใช้ Jetpack Boost เพื่อเปิดใช้งานการโหลดแบบ Lazy Loading บนไซต์ของคุณได้ เพียงค้นหาคุณสมบัติ Lazy Image Loading แล้วเปิดใช้งาน

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

4. ลบ JavaScript ที่บล็อกการแสดงผลด้วยตนเอง

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

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

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

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

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

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

 <script src="resource.js" async></script>

อีกทางหนึ่ง สคริปต์อาจมีลักษณะเช่นนี้กับแอตทริบิวต์การเลื่อนเวลา:

 http://resource.js

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

5. ใช้แอตทริบิวต์ async หรือ defer ด้วย plugin

หากคุณประสบปัญหาในการแก้ไขสคริปต์ด้วยตนเอง คุณสามารถใช้ปลั๊กอิน เช่น Async JavaScript เครื่องมือนี้ช่วยให้คุณควบคุมได้อย่างเต็มที่ว่าสคริปต์ใดมีแอตทริบิวต์ async หรือ defer

เมื่อคุณติดตั้งปลั๊กอินแล้ว ให้ไปที่ การตั้งค่า → Async JavaScript และเลือก Enable Async JavaScript

จากนั้นไปที่ส่วน Async JavaScript Method ที่นี่ คุณสามารถเลือกได้ว่าต้องการเปิดใช้งานแอตทริบิวต์ async หรือ defer

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

หากไม่แน่ใจ คุณสามารถใช้แอตทริบิวต์ defer ได้ แต่แนวทางปฏิบัติที่ดีที่สุดคือการยกเว้น jQuery ทั้งหมด

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

ในส่วนการ ยกเว้นสคริปต์ คุณสามารถแสดงรายการสคริปต์ใดๆ ที่คุณต้องการแยกออกจากกระบวนการนี้

ที่ด้านล่างของหน้า คุณจะเห็นตัวเลือกสำหรับการยกเว้นปลั๊กอินและธีม เมื่อคุณแสดงรายการธีมหรือปลั๊กอินที่นี่ สคริปต์ของธีมจะไม่มีผลกับแอตทริบิวต์ async หรือ defer

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

คำถามที่พบบ่อย (FAQ)

อย่างที่คุณเห็น มีหลายวิธีในการกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress มาดูคำถามที่พบบ่อยที่สุดเกี่ยวกับกระบวนการนี้กัน

ฉันจะทดสอบไซต์ WordPress ของฉันสำหรับทรัพยากรบล็อกการแสดงผลได้อย่างไร

คุณสามารถทดสอบเว็บไซต์ WordPress ของคุณโดยป้อน URL ของเว็บไซต์ใน PageSpeed ​​Insights ในผลลัพธ์ของคุณ ให้มองหาทรัพยากรการบล็อกการแสดงภายใต้ส่วน โอกาส

ทรัพยากรการบล็อกการแสดงผลเกี่ยวข้องกับ Core Web Vitals หรือไม่

ใช่ ทรัพยากรการบล็อกการแสดงผลอาจส่งผลเสียต่อคะแนน Core Web Vitals ของไซต์ของคุณ สคริปต์ที่ไม่ได้รับการปรับให้เหมาะสมสามารถเพิ่ม Largest Contentful Paint (LCP), Total Blocking Time (TBT) และ First Contentful Paint (FCP) หากคุณทดสอบเว็บไซต์ของคุณด้วยซอฟต์แวร์ Core Web Vitals เช่น PageSpeed ​​Insights อาจแนะนำให้กำจัดทรัพยากรการบล็อกการแสดงผลเพื่อปรับปรุงคะแนนของคุณ

HTML เป็นทรัพยากรบล็อกการแสดงผลหรือไม่

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

รูปภาพกำลังบล็อกการแสดงภาพหรือไม่

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

เพิ่มประสิทธิภาพเว็บไซต์ของคุณเพื่อให้โหลดเร็วขึ้น

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

หากต้องการตรวจสอบ ต่อไปนี้คือห้าวิธีในการกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress:

1. เพิ่มประสิทธิภาพการโหลด CSS ด้วย Jetpack Boost
2. เลื่อน JavaScript ที่ไม่จำเป็นออกไป
3. เลื่อนภาพนอกจอ
4. นำทรัพยากรการบล็อกการแสดงผลออกด้วยตนเอง
5. ใช้แอตทริบิวต์ async หรือ defer กับปลั๊กอิน Async JavaScript

เมื่อคุณลบทรัพยากรการบล็อกการแสดงผล ผู้เยี่ยมชมของคุณสามารถเพลิดเพลินกับการโหลดเร็วขึ้น!