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

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

ส่วนสำคัญในการเพิ่มประสิทธิภาพเว็บไซต์คือการวิเคราะห์หน้าเว็บโดยใช้เครื่องมือเปรียบเทียบประสิทธิภาพ เช่น Google PageSpeed ​​Insights, GTmetrix และ Pingdom Website Speed ​​Test บริการเหล่านี้จะให้คะแนนประสิทธิภาพของ URL ยืนยันขนาดของหน้า และยืนยันระยะเวลาที่ใช้ในการโหลดหน้า

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

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

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

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

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

หากเบราว์เซอร์พบการเรียกไปยังไฟล์ CSS หรือ Javascript ภายนอก เบราว์เซอร์จะต้องหยุดการแสดงผลหน้าและดาวน์โหลดไฟล์ CSS และ Javascript เหล่านี้ก่อนจึงจะประมวลผลได้ ทรัพยากรเหล่านี้จึงถือเป็น “การบล็อกการแสดงผล ” เนื่องจากกำลังหยุดกระบวนการแสดงหน้าเว็บ

ทรัพยากรการบล็อกการแสดงผลช่วยเพิ่มเวลาที่เบราว์เซอร์ใช้ในการแสดงเนื้อหาหลักต่อผู้ใช้ ซึ่งเป็นตัวชี้วัดประสิทธิภาพที่สำคัญและการจัดอันดับของเครื่องมือค้นหาที่ Google เรียกว่า First Meaningful Paint (FMP)

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

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

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

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

GTmetrix ยังแสดงรายการทรัพยากรการบล็อกการแสดงผลแต่ละรายการ ขนาดของไฟล์ และเวลาที่ใช้ในการดาวน์โหลดไฟล์

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

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

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

การระบุทรัพยากรที่สำคัญ

ทรัพยากรถือว่ามีความสำคัญหากจำเป็นต้องแสดงสีแรกของหน้าเว็บ ทรัพยากรอื่นๆ ทั้งหมดถือว่าไม่สำคัญ

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

ในภาพหน้าจอด้านล่าง คุณจะเห็นได้ว่าบน WordPress.org โค้ดจำนวนมากในไฟล์ CSS และ Javascript ที่บล็อกการแสดงผลไม่ได้ถูกใช้งาน สถานการณ์นี้เลวร้ายยิ่งกว่าในเว็บไซต์ WordPress หลายแห่ง โดยการทดสอบความครอบคลุมได้เน้นที่ไฟล์หลายไฟล์ที่ไม่ได้ใช้ 100% ของแต่ละไฟล์

กำจัด CSS ที่บล็อกการแสดงผลใน WordPress โดยใช้การโทรแบบอินไลน์

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

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

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

ลบ Javascript ที่บล็อกการแสดงผลใน WordPress โดยใช้ Async &Defer

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

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

สามารถใช้ Async และ Defer ได้ทั่วทั้งเว็บไซต์ของคุณโดยใช้ปลั๊กอินประสิทธิภาพ WordPress

ในบล็อกส่วนตัวของฉัน ฉันใช้ปลั๊กอิน Async JavaScript เพื่อเลื่อน Javascript บนหน้าต่างๆ พัฒนาโดย Autoptimize ผู้สร้าง Frank Goossens Async Javascript ให้คุณปรับใช้ Async และ Defer กับไฟล์ Javascript ที่ไม่สำคัญ และให้คุณมีตัวเลือกในการใช้การตั้งค่าต่างๆ กับไฟล์ JQuery

วิซาร์ดการตั้งค่าของปลั๊กอินจะทำการทดสอบ GTmetrix หลายครั้งเพื่อกำหนดการตั้งค่าที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

ฉันเลือก Async JavaScript เนื่องจากจะใช้ Async หรือ Defer โดยอัตโนมัติทั่วทั้งเว็บไซต์ นี่เป็นวิธีที่ง่ายที่สุดในการกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress อย่างไม่ต้องสงสัย แต่คุณอาจเห็นผลลัพธ์ที่ดีขึ้นด้วยปลั๊กอิน WordPress HTTP/2 Push Preload

เมื่อคุณระบุทรัพยากรการบล็อกการแสดงผลบนเว็บไซต์ WordPress โดยใช้เครื่องมือครอบคลุมของ Chrome หรือบริการเปรียบเทียบประสิทธิภาพ เช่น GTmetrix หรือ Google PageSpeed ​​Insights คุณสามารถใช้ Async และ Defer โดยใช้ HTTP/2 Push Preload ในแต่ละไฟล์

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

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

สำหรับภาพรวมที่ครอบคลุมมากขึ้นของหัวข้อนี้ โปรดอ่านบทความของฉัน “วิธีชะลอการแยกวิเคราะห์ Javascript ใน WordPress โดยใช้ Defer และ Async”

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

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

เครื่องมือและบริการที่ครอบคลุมของ Chrome เช่น Google PageSpeed ​​Insights และ GTmetrix ทำให้ระบุทรัพยากรการบล็อกการแสดงผลได้ง่าย จากนั้น คุณจะกำจัดทรัพยากรการบล็อกการแสดงผลได้โดยใช้ปลั๊กอิน WordPress เช่น Async JavaScript และ HTTP/2 Push Preload

ขอบคุณสำหรับการอ่าน

เควิน