ทรัพยากรการบล็อกการแสดงผลคืออะไร & วิธีแก้ไขปัญหาการบล็อกการแสดงผล

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

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

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

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

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

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

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

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

วิธีแก้ไขปัญหาการบล็อกการแสดงผล

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

Render-Blocking CSS

มีสามวิธีในการแก้ไขปัญหา CSS ที่บล็อกการแสดงผล:

• เรียกไฟล์ CSS ของคุณอย่างถูกต้อง – ไฟล์ CSS ของคุณควรเชื่อมโยงในไฟล์ HTML ของคุณดังนี้: <link rel="style.css" href=“style.css"> แทนที่จะใช้เมธอด @import เมธอด @import มักจะอยู่ใกล้ด้านบนสุดของสไตล์ชีตปกติของคุณและทำให้เบราว์เซอร์ย้อนกลับและค้นหาไฟล์ที่นำเข้าก่อนที่จะสามารถอ่านไฟล์ CSS ที่เหลือและทำให้การแสดงผลหน้าเว็บของคุณล่าช้ายิ่งขึ้น
• ลดจำนวนไฟล์ CSS ในเส้นทางวิกฤต – ถ้าเป็นไปได้ ให้รวมไฟล์ CSS ต่างๆ เข้าด้วยกันเป็นไฟล์เดียว และยกเลิกการเรียกไฟล์เหล่านั้นออกจาก HTML ของคุณ

Render-Blocking JavaScript

หากต้องการลบ JavaScript ที่บล็อกการแสดงผล คุณจำเป็นต้องทราบจำนวนไฟล์ JavaScript ที่โหลดและไฟล์ HTML ถูกเรียกจากที่ใด วิธีที่ดีในการค้นหาสิ่งนี้คือการใช้เครื่องมือ Google PageSpeed ​​Insights เมื่อบริษัททำความสะอาดในออสเตรเลีย This Is Neat Cleaning กำลังสร้างเว็บไซต์ พวกเขาใช้ PageSpeed ​​Insights ของ Google เป็นเกณฑ์มาตรฐาน ทดสอบสถานการณ์ต่างๆ เพื่อค้นหาสิ่งที่พวกเขาต้องการสำหรับทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อป

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

การใช้ปลั๊กอิน

แน่นอน เช่นเดียวกับทุกอย่างที่เกี่ยวข้องกับ WordPress คุณสามารถใช้ปลั๊กอินเพื่อแก้ไขปัญหาการบล็อกการเรนเดอร์ได้ ด้วยการติดตั้งที่แอ็คทีฟทั้งหมดกว่าล้านรายการ ไม่ใช่เรื่องง่ายเลยที่ This is Neat Cleaning จะใช้ W3 Total Cache สำหรับการแคช การลดขนาด และการปรับประสิทธิภาพให้เหมาะสม

ต่อไปนี้คือวิธีที่คุณสามารถใช้ W3 Total Cache เพื่อแก้ไขปัญหาการบล็อกการเรนเดอร์

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

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

กลับไปที่แดชบอร์ด WordPress และไปที่ W3 Total Cache > Performance > Minify เลื่อนลงไปที่ส่วน JavaScript และภายใต้ Operations in areas ตรวจสอบให้แน่ใจว่าประเภทการฝังถูกตั้งค่าเป็น Non-blocking using defer สำหรับส่วน <head> จากนั้นคลิกปุ่ม เพิ่มสคริปต์ แล้ววาง URL ที่คุณคัดลอกจากเครื่องมือ Google PageSpeed

เมื่อคุณเพิ่มไฟล์สคริปต์ทั้งหมดแล้ว ให้เลื่อนลงไปที่ส่วน CSS คลิก เพิ่มสไตล์ชีต และเพิ่ม URL ของไฟล์สไตล์ชีตที่คัดลอกมาจาก Google PageSpeed ​​Insights

เมื่อเสร็จแล้ว ให้คลิกปุ่ม บันทึกการตั้งค่าและล้างแคช

ความคิดสุดท้าย

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