วิธีแก้ปัญหา js/css render-blocking

ปัญหา render-blocking

Written by

torr

in

ผู้เข้าชม 5 uip

แนวทางแก้ไขปัญหา Render-Blocking Resources (ทรัพยากรที่ขวางการเรนเดอร์) ทั้ง CSS และ JavaScript ที่ถือว่าดีที่สุด ณ ตอนนี้ คือ การ จัดลำดับความสำคัญ (Prioritization) และ Asynchronous Loading เพื่อให้เบราว์เซอร์สามารถแสดงผลเนื้อหาสำคัญ (Above-the-Fold Content) ได้โดยเร็วที่สุด

“ลด render-blocking” ≠ “โหลดทุกอย่างแบบ async”

เราควรโหลดเฉพาะสิ่งที่จำเป็นต่อการ render above-the-fold ให้เร็วที่สุด และเลื่อนสิ่งอื่นออกไป โหลดแบบ async ให้หมด อย่างปลอดภัยโดยไม่กระทบกับ layout/interaction

สารบัญ

แก้ปัญหา CSS

ปัญหาของ CSS แบบที่เป็น file.css ที่ปกติเราจะวางมันไว้ที่ <head> มักจะขวางการเรนเดอร์ Render-Blocking เนื่องจากเบราว์เซอร์ต้องรอให้ไฟล์ CSS โหลดเสร็จทั้งหมดก่อนจึงจะสามารถสร้าง Render Tree และเริ่มแสดงผลหน้าเว็บได้ ยิ่งถ้า css หลายไฟล์ ก็รอนานขึ้นอีก

ขั้นตอนที่ 1. Critical CSS

หลักการของ Critical CSS คือ แยก CSS ที่จำเป็นสำหรับเนื้อหาที่ผู้ใช้เห็นทันทีเมื่อโหลดหน้าเว็บ Above-the-Fold Content ออกมา แล้วทำเป็นแบบ Inline CSS <style> แล้วค่อยใส่ใว้ใน <head>

ช่วยให้ browser สามารถเริ่มเรนเดอร์หน้าเว็บได้แบบทันที โดยไม่ต้องรอการดาวน์โหลดไฟล์ CSS ภายนอกแล้ว

ขั้นตอนที่ 2. Deferring Non-Critical CSS

สำหรับ CSS แบบไฟล์ เช่น non-critical.css อันนี้ต้องใช้เทคติกของ jsvascript ช่วยนิดหน่อยครับ ตาม code ตัวอย่างด้านล่าง คือ ให้ media เป็นแบบ print ก่อน พอโหลดหน้าเว็บเสร็จ ค่อยให้คำสั่ง javascript แก้จาก print เป็น all

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

WordPress

สำหรับคนที่ใช้ WordPress ตอนนี้ Gugenberg Block ก็ใช้แนวทางที่ควรจะเป็นอยู่แล้ว คือ ไฟล์ css หลักจะใช้ควบคุม Layout ส่วนที่เหลือจะแยกไปตาม block ใคร block มัน ไม่ได้ไปรวมอยู่ที่ css หลักเหมือนสมัยก่อน

ถ้าใครใช้ WordPress Gutenberg อยู่ก็ไม่น่าจะมีปัญหาอะไรมาก มาถูกทางแล้ว

ส่วนเว็บ torr.dev ไม่ได้ใช้เทคนิค CSS แบบนี้ ผมให้ plugin LiteSpeed Cache รับจบครับ ^^’ ได้คะแนน pagespeed 97 ถือว่ารับได้

แก้ปัญหา JS

สมัยก่อนเราแก้ปัญหาด้วยการเอา file.js ไปใส่ใว้ใน บรรทัดท้ายๆ ก่อนถึง </body> ซึ่งก็ทำงานได้ดี แต่สมัยนี้มีวิธีที่มีประสิทธิภาพดีกว่าด้วย Attribute defer และ async

defer

การใช้ defer ใน ช่วยให้ browser สามารถ เริ่มดาวน์โหลดไฟล์ JavaScript ได้ทันที (ขณะที่ยังคงแยกวิเคราะห์ HTML ต่อไป) แต่ถ้าเราใช้เทคนิคการวางไว้ก่อน </body> js จะเริ่มดาวน์โหลดได้ ก็ต่อเมื่อถึงตำแหน่ง js นั้นใน HTML เท่านั้น

สรุป defer

  • ดาวน์โหลดเร็ว
  • run หลัง DOM พร้อม
  • รับประกันลำดับการ run

async

ส่วน Attribute async จะทำให้ js โหลดเร็วเหมือน defer ครับ ไม่ทำให้มีปัญหา Render-Blocking แต่ script จะถูกเรียกใช้ทันทีที่ดาวน์โหลดเสร็จ คือ run script ทันทีที่โหลดเสร็จ ไม่สนใจลำดับการ run เหมาะกับ script ภายนอก เช่น Ads

สรุป async

  • ดาวน์โหลดเร็ว
  • แต่ run ทันทีที่ไฟล์ js ดาวน์โหลดเสร็จ (อาจก่อนหรือหลัง HTML ถูกแยกวิเคราะห์)
  • ไม่ประกันลำดับการ run

SEO

ชาว SEO ต้องการแก้ปัญหา Render-Blocking
เทคนิคการแก้ปัญหา Render Blocking – SEO

เมื่อเราแก้ปัญหาการ render-blocking ที่เกิดจาก css และ js ได้แล้ว ผู้เข้าชมเว็บไซต์ก็จะได้รับประสบการณ์ที่ดี คะแนน SEO ของเราก็จะดีขึ้นเอง