วิธีแก้ Eliminate render-blocking Resources บน WordPress

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

วิธีการขจัดการบล็อกการเรนเดอร์ (Eliminate Render-Blocking Resources)

ทำความเข้าใจกับ Render-Blocking Resources

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

ปัญหาของการบล็อกการเรนเดอร์

• ความช้าในการโหลดเว็บ: เมื่อมีการบล็อกการเรนเดอร์ ผู้ใช้จะเห็นหน้าเว็บเป็นเวลานานก่อนที่จะโหลดเนื้อหาหลัก
• ผลกระทบต่อ SEO: Google ให้ความสำคัญกับประสบการณ์ผู้ใช้ที่ดี ซึ่งรวมถึงเวลาในการโหลดหน้าเว็บ หากหน้าเว็บโหลดช้า อาจส่งผลให้เว็บไซต์มีอันดับที่ต่ำลงในผลการค้นหาของ Google
• อัตราการตีกลับ (Bounce Rate): เมื่อเว็บไซต์โหลดช้า ผู้ใช้มีแนวโน้มที่จะออกจากเว็บไซต์ก่อนที่มันจะโหลดเสร็จ ซึ่งส่งผลให้มีอัตราการตีกลับสูง

เทคนิคในการลด Render-Blocking Resources

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

1. โหลด JavaScript แบบ Asynchronous

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

• ตัวอย่าง:
  html

  CopyEdit

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


2. ใช้ defer สำหรับการโหลด JavaScript

การใช้ defer จะทำให้บราวเซอร์โหลด JavaScript หลังจากที่พาร์ส HTML เสร็จสมบูรณ์แล้ว ทำให้การเรนเดอร์หน้าเว็บไม่ถูกบล็อก

• ตัวอย่าง:
  html

  CopyEdit

  <script src="example.js" defer></script>


3. ปรับการโหลด CSS

CSS มีผลต่อการแสดงผลของหน้าเว็บ ดังนั้นหากมี CSS ที่ต้องโหลดในลำดับแรกๆ จะทำให้การเรนเดอร์หน้าเว็บช้าลง การใช้การโหลด CSS แบบไม่บล็อกจะช่วยให้การแสดงผลเร็วขึ้น

• เทคนิคการใช้ media attribute: กำหนดว่า CSS ควรจะโหลดในสื่อประเภทใด
  html

  CopyEdit

  <link rel="stylesheet" href="styles.css" media="screen">


4. การโหลดฟอนต์อย่างมีประสิทธิภาพ

การโหลดฟอนต์จากภายนอก (เช่น Google Fonts) อาจทำให้หน้าเว็บโหลดช้าลงได้ การใช้การ preload ฟอนต์จะช่วยให้ฟอนต์สามารถโหลดได้เร็วขึ้นโดยไม่รบกวนการเรนเดอร์ของหน้าเว็บ

• ตัวอย่าง:
  html

  CopyEdit

  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">


5. ลดจำนวน HTTP Requests

การมีทรัพยากรหลายๆ รายการเช่น CSS, JS, และรูปภาพที่ต้องร้องขอจากเซิร์ฟเวอร์ทำให้การโหลดเว็บช้า การรวมไฟล์ CSS/JS หลายๆ ไฟล์เข้าด้วยกันจะช่วยลดจำนวนการร้องขอ HTTP

• เทคนิค: รวมไฟล์ CSS และ JavaScript ให้เหลือน้อยที่สุด

6. การใช้ Lazy Loading สำหรับรูปภาพ

การใช้ loading="lazy" กับแท็ก <img> จะช่วยให้รูปภาพถูกโหลดเมื่อผู้ใช้เลื่อนหน้าเว็บมาถึง ซึ่งจะช่วยลดเวลาในการโหลดในขณะที่หน้าเว็บยังคงถูกเรนเดอร์

• ตัวอย่าง:
  html

  CopyEdit

  <img src="image.jpg" loading="lazy" alt="Image description">


7. ใช้การบีบอัดไฟล์

การบีบอัดไฟล์ CSS, JavaScript, และ HTML เป็นวิธีที่ช่วยลดขนาดของไฟล์และทำให้การโหลดเร็วขึ้น

• เครื่องมือที่สามารถใช้:
  • CSS: ใช้เครื่องมือ เช่น CSSNano หรือ CleanCSS
  • JavaScript: ใช้เครื่องมือ เช่น UglifyJS หรือ Terser
  • HTML: ใช้เครื่องมือ เช่น HTMLMinifier

ตัวอย่างการใช้เทคนิคในการลด Render-Blocking Resources

1. การโหลด JavaScript และ CSS โดยใช้ defer และ async

ในตัวอย่างนี้ เราจะโหลดไฟล์ JavaScript ด้วย defer และ async รวมถึงโหลด CSS โดยใช้ media และ preload ฟอนต์ เพื่อปรับปรุงการเรนเดอร์หน้าเว็บ

2. การบีบอัดไฟล์และรวมไฟล์

ก่อนการบีบอัดไฟล์, ไฟล์ CSS และ JavaScript ที่แยกต่างหากจะรวมกันและบีบอัดโดยใช้เครื่องมือเช่น Terser และ CSSNano

• หลังจากการบีบอัด:
  html

  CopyEdit

  <link rel="stylesheet" href="styles.min.css">
<script src="script.min.js" defer></script>


การตรวจสอบผลลัพธ์หลังจากปรับแต่ง

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

เครื่องมือที่ช่วยในการตรวจสอบ

• Google PageSpeed Insights: เครื่องมือฟรีจาก Google ที่ช่วยให้คุณตรวจสอบความเร็วในการโหลดเว็บไซต์
• GTmetrix: เครื่องมือที่ช่วยให้คุณเห็นปัญหาในการโหลดและคำแนะนำในการปรับปรุง

สรุป

การขจัด render-blocking resources เป็นการปรับปรุงที่สำคัญสำหรับเว็บไซต์ที่ต้องการประสบการณ์ผู้ใช้ที่ดีและการจัดอันดับในผลการค้นหาที่ดีขึ้น ด้วยการใช้เทคนิคต่างๆ เช่น การโหลด JavaScript แบบ asynchronous หรือ defer, การปรับการโหลด CSS, การใช้ lazy loading และการบีบอัดไฟล์ เราสามารถลดเวลาในการโหลดหน้าเว็บและทำให้เว็บไซต์ทำงานได้รวดเร็วขึ้น นอกจากจะส่งผลดีต่อผู้ใช้แล้ว ยังช่วยเพิ่มอันดับ SEO ให้ดีขึ้นในระยะยาวอีกด้วย