กำจัด CSS และ JavaScript ที่บล็อกการแสดงผล (Render-Blocking) ใน WordPress เพื่อโหลดหน้าเว็บเร็วขึ้น

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

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

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

คำแนะนำที่คุณจะเห็นบ่อยคือ Eliminate render-blocking resources in WordPress (กำจัดทรัพยากรที่บล็อกการแสดงผลใน WordPress) ในบทความนี้ จะอธิบายว่า Render-blocking resources ใน WordPress คืออะไร และแสดงวิธีปรับปรุงเวลาโหลดหน้าเว็บไซต์โดยการกำจัดพวกเขา

Render-Blocking Resources ใน WordPress คืออะไร

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

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

หากเบราว์เซอร์พบการเรียกไฟล์ CSS หรือ Javascript ภายนอก (External) มันต้องหยุดการแสดงผลหน้าเว็บ และดาวน์โหลดไฟล์ CSS และ Javascript เหล่านี้ก่อน จึงจะประมวลผลได้ ทรัพยากรเหล่านี้จึงถูกพิจารณาว่าเป็น "Render-Blocking (บล็อกการแสดงผล)" เพราะหยุดกระบวนการแสดงผลหน้าเว็บ

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

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

วิธีระบุ Render-Blocking Resources บน WordPress

Render-blocking resources บน WordPress สามารถระบุได้ง่ายด้วยเครื่องมือวัดประสิทธิภาพ (Performance Benchmarking Tools) ต้องทำเพียงใส่ URL ของหน้าที่ต้องการทดสอบ

Google PageSpeed Insights ไฮไลท์เวลาทั้งหมดที่ Render-blocking resources เพิ่มเข้าไปใน First Paint ของหน้าเว็บ ข้างล่างจะมีรายละเอียด แสดง URL ของแต่ละ Render-blocking resource และขนาดไฟล์ ยังแสดงว่าหน้าเว็บอาจโหลดเร็วขึ้นเท่าไหร่ หากกำจัด Render-blocking resource นั้น

GTmetrix ก็รายการ Render-blocking resource ทุกตัว ขนาดไฟล์ และเวลาที่ใช้ดาวน์โหลดไฟล์

แม้ Pingdom Website Speed Test จะไม่มีส่วนเฉพาะที่ไฮไลท์ Render-blocking resources แต่คุณสามารถเห็นได้ว่าอะไรทำให้หน้าเว็บช้าจากพื้นที่ "File Requests"

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

เนื่องจาก WordPress เรียกไฟล์ CSS และ Javascript ต่างๆ ทั่วเว็บไซต์ จึงสำคัญที่จะรันการทดสอบประสิทธิภาพสำหรับหลายหน้า เพื่อตรวจจับ Render-blocking resources ทั้งหมด เช่น อาจรันทดสอบประสิทธิภาพสำหรับพื้นที่สำคัญของเว็บไซต์ เช่น หน้าแรก (Home Page), หน้าดัชนีบล็อก (Blog Index), โพสต์บล็อก (Blog Post), หน้าเกี่ยวกับ (About Page) และหน้าติดต่อ (Contact Page)

การระบุ Critical Resources (ทรัพยากรสำคัญ)

ทรัพยากรถือว่า Critical (สำคัญ) หากจำเป็นต่อการแสดง First Paint (การแสดงผลครั้งแรก) ของหน้าเว็บ ทรัพยากรอื่นๆ ถือว่า Non-critical (ไม่สำคัญ)

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

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

กำจัด Render-Blocking CSS ใน WordPress ด้วย Inline Calls

Google แนะนำให้ย้ายโค้ด Critical ทั้งหมดจาก Render-blocking resources ไปยัง Inline Call จากหน้า HTML ของคุณ สไตล์ที่ Critical ต่อ First Paint ของหน้าสามารถกำหนดได้โดยใช้บล็อก style ภายในส่วน head ของหน้า ในขณะที่ ฟังก์ชัน Javascript ที่ Critical สามารถเรียก Inline ภายในหน้าได้โดยใช้แท็ก Script

บนแพลตฟอร์มไดนามิกอย่าง WordPress ที่โค้ด CSS และ Javascript ถูกเพิ่มเข้าเว็บไซต์ผ่านธีมและปลั๊กอิน อาจไม่เป็นปฏิบัติที่จะย้าย Critical Styling ด้วยตนเอง ดังนั้น ผู้ใช้ WordPress หลายคนใช้บริการอย่าง NitroPack และ Critical CSS เพื่อให้ Critical Stylesheets ถูกดึงออกมา (Extracted) อัตโนมัติ และแสดง Inline ภายในส่วน head

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

กำจัด Render-Blocking Javascript ใน WordPress ด้วย Async และ Defer

Render-blocking Javascript resources ใน WordPress สามารถกำจัดได้ด้วยสองเทคนิคคือ Async และ Defer ทั้งสองวิธีอนุญาตให้เบราว์เซอร์ดำเนินการแสดงผลหน้าเว็บต่อไป ในขณะที่ไฟล์ CSS และ Javascript ที่บล็อกการแสดงผลในเนื้อหา Above-the-fold (ส่วนบนของหน้าเว็บ) ถูกดาวน์โหลดในพื้นหลัง (Background)

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

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

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

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

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

เมื่อคุณระบุ Render-blocking resources บนเว็บไซต์ WordPress แล้ว ด้วย Coverage Tool ของ Chrome หรือบริการวัดประสิทธิภาพอย่าง GTmetrix หรือ Google PageSpeed Insights คุณสามารถนำ Async และ Defer ไปใช้ด้วย HTTP/2 Push Preload แบบไฟล์ต่อไฟล์ (File by file basis)

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

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

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

ข้อคิดสุดท้าย

Render-Blocking Resources ใน WordPress เพิ่มเวลาโหลดหน้ามาก พวกเขายังส่งผลต่อประสบการณ์ผู้ใช้ของเว็บไซต์ เพราะผู้เยี่ยมชมจะเห็นหน้าว่างจนกว่า Render-blocking resources ทั้งหมดจะถูกดาวน์โหลดและรันเสร็จ

Coverage Tool ของ Chrome และบริการอย่าง Google PageSpeed Insights และ GTmetrix ทำให้ง่ายต่อการระบุ Render-blocking resources คุณสามารถกำจัด Render-blocking resources ได้ด้วยปลั๊กอิน WordPress เช่น Async JavaScript และ HTTP/2 Push Preload

ขอบคุณที่อ่านครับ

Kevin