การแก้ปัญหา Eliminate render-blocking Resources ใน WordPress

Render-Blocking Resources คืออะไร?

ทุกครั้งเมื่อมีการเรียกชมเว็บ เบราว์เซอร์จะทำการโหลดข้อมูลเว็บไซต์นั้นๆ โดยอ่านโค้ดจากบนลงล่างไปเรื่อยๆ แต่ในระหว่างที่กำลังโหลดนั้น หากพบไฟล์หรือสคริปต์ CSS กับ JavaScript มันก็จะโหลดไฟล์ javascript และ css ก่อนเพื่อประมวลผลว่าไฟล์ว่า ไฟล์นี้จะถูกนำไปใช้ในส่วนใดของเว็บ จากนั้นถึงค่อยทำการโหลดส่วนต่อไปของเว็บไซต์ จุดนี้แหละ ที่ทำให้เกิด Eliminate render-blocking Resources

ยกตัวอย่างโค้ด HTML ง่ายๆ

<html>
	<head>
		<title>Test</title>
		<script src= "app.js"></script>
	</head>
	<p>Hello World</p>
</html>

เว็บเบราว์เซอร์จะเริ่มอ่านบรรทัดแรกก่อนค่อยๆ ไล่ทีละบรรทัดลงมาตามลำดับ ทีนี้เมื่อมาถึงบรรทัดที่เป็น JavaScript ที่ชื่อ app.js มันก็จะรอให้สคริปต์นี้โหลดให้เสร็จก่อน จากนั้นมันจึงค่อยอ่านบรรทัดต่อไปเรื่อยๆ ซึ่งหากว่าไฟล์ app.js มีขนาดใหญ่ ใช้เวลาโหลดและประมวลผล script นาน ก็เป็นเหตุทำให้เกิดปัญหา Eliminate render-blocking Resources นั่นเอง

วิธีแก้นั้นสามารถทำได้ง่ายๆ โดยการ เลื่อนไฟล์ app.js ไปโหลดด้านล่างแทนเลยดื้อๆ

<html>
	<head>
		<title>Test</title>
	</head>
	<p>Hello World</p>
	<script src= "app.js"></script>
</html>

เท่านี้ปัญหา Eliminate render-blocking Resources ก็จะหมดไปทันที

แล้วจะแก้ปัญหานี้กับ WordPress ได้ยังไง ?

สำหรับ WordPress เราจะไม่สามารถไปเลื่อนการ Preload Script ได้เองง่ายๆ เราจึงจำเป็นต้องใช้ Plugin ช่วยซึ่ง จากการทดสอบแล้วตัวที่ใช้ง่าย เบา ไม่เรื่องมาก เราขอยกให้ Speed Booster Pack ตัวโดย Speed Booster Pack เนี่ยจะช่วยในการจัดการกับไฟล์ CSS และ Javascript ช่วยให้เว็บของเราโหลดได้เร็วขึ้น แถมยังมีฟีเจอร์อื่นๆ ที่น่าสนใจอีกเช่นการ Cache, Minify Code และ Lazy Load Media ว่าแล้วก็ไปลองติดตั้งกันเลย

การติดตั้งปลั๊กอิน Speed Booster Pack สามารถทำได้โดย

1. ทำการ Login เข้าสู่หน้า Dashboard ของ WordPress

2. มาที่ Plugin => Add new ที่ช่องค้นหาให้พิมพ์คำว่า “Speed Booster Pack” เมื่อเจอแล้วให้คลิกที่ Install Now

3. จากนั้นเปิดใช้งานโดยคลิกที่ Activate เป็นอันติดตั้งและเปิดใช้งานเรียบร้อย

ทีนี้มาลองตั้งค่ากัน

4. ที่เมนูด้านซ้ายมือ คลิกที่ Speed Booster => Dashboard

5. คลิกที่แท้บ Assets เปิด Enable/Disable Assets ให้เป็น ON

6. จากนั้นทำการตั้งค่า ดังนี้

  • Optimize JavaScript ให้เลือกเป็น Move to footer
  • Inline all CSS ให้เปิดเป็น ON
  • Minify all inline CSS ให้เปิดเป็น ON

แล้วก็กดปุ่ม Save เป็นอันเสร็จเรียบร้อย

หมายเหตุ : สำหรับใครที่ต้องการใช้ระบบ Cache ของ Plugin นี้ด้วยก็สามารถเปิดใช้งานได้โดยไปที่แท้บ Caching จากนั้นเปิด Enable/Disable Caching ให้เป็น ON ได้เลย

ข้อควรระวัง : การเปิดใช้งานระบบ Cache นี้มีข้อแม้ว่า จะต้องไม่มี plugin Cache อื่นๆ เช่น WP-Super Cache, WP-Fastest Cache หรือ WP-Rocket ติดตั้งหรือทำงานอยู่ก่อนแล้วนะเพราะมันจำทำงานชนกันแล้วเกิด Error ได้

Was this article helpful?

Related Articles