แก้ปัญหา Eliminate Render Blocking Resources จาก Link CSS
หลังจากนำ Markdown Style ของ GitHub มาแปะ คะแนน PageSpeed Insights ก็ตกอีกแล้ว 😭 เลยต้องมาแก้กัน
ทำไมคะแนนถึงตก
ปัญหา Eliminate render-blocking resources เนี่ย มันเกิดจากมีบางคำสั่งทำงานนานและคำสั่งนี้มันดันไปขัดขวางการทำงานของส่วนการแสดงผล
ในกรณีของผมคือเครื่องของผู้อ่านต้องทำการโหลด <link rel="stylesheet"> จนเสร็จก่อนถึงเริ่มแสดงผล แปลว่าผู้อ่านจะเห็นหน้าสีขาวซักพักก่อนข้อมูลจะเริ่มปรากฏให้เห็น (จริง ๆ ก็ไม่ได้ช้าอะไร PageSpeed Insights ชอบทำให้เป็นเรื่องใหญ่ 🙄)
แก้ไขอย่างไร
วิธีแก้ตามคำแนะนำที่ให้มาใน PageSpeed Insights คือ
- นำโค้ด CSS มาแปะใน
<head>เลย (Internal CSS) หรือ - โหลดแบบ Asynchronously (ใช้
rel="preload")
ซึ่งผมไม่เลือกทั้ง 2 วิธีนี้ (อ้าว 555)
- ที่ไม่เลือกข้อ 1 เพราะไม่อยากให้ไฟล์ HTML มันใหญ่เกินไป
- ที่ไม่เลือกข้อ 2 เพราะเว็บบราวเซอร์เพิ่งจะ รองรับครบ (ใช่ Firefox นายน่ะแหล่ะ 😠 ช้าไปนะ)
เลยขอใช้วิธีเก่าดั้งเดิมที่เคยใช้มาก่อนแทน
แล้วใช้วิธีไหน
ที่เราต้องทำก็คือการเพิ่มโค้ด media="print" onload="this.media='all' ไปใน Link ของเรา
อธิบายการทำงานของโค้ดนี้นิดนึง
เราตั้ง CSS ตัวนี้ให้เป็น CSS สำหรับการพิมพ์ (media="print") เท่านั้นก่อน (เว็บบราวเซอร์จะไม่โหลดหากไม่ได้แสดงผลเพื่อการพิมพ์) หลังจากนั้นจึงค่อยเปลี่ยนเป็น CSS สำหรับทุกอย่าง (media="all") เพื่อไม่ให้มันไปขัดขวางการแสดงผลในตอนแรกให้คะแนนเราตก
Happy Coding ครับ 😎