Blockdit Logo (Mobile)
Shoper Gamer
•
10 ส.ค. เวลา 06:27 • การศึกษา
Website By Shoper Gamer

media="print" คืออะไร

โดย
ในยุคที่ความเร็วเว็บไซต์เป็นปัจจัยสำคัญต่อทั้งประสบการณ์ผู้ใช้ และ SEO การลด Render-Blocking Resources เป็นเทคนิคที่นักพัฒนาต้องรู้! วันนี้เราจะมาแนะนำเทคนิคการใช้ `media="print" onload="this.media='all'"` ที่ช่วยให้ CSS โหลดเร็วขึ้นแบบไม่บล็อกการแสดงผลหน้าเว็บ
  • ★
    ​ปัญหาของ CSS แบบปกติ
เมื่อเบราว์เซอร์พบแท็ก <link rel="stylesheet"> มันจะ
1. หยุดการแสดงผลหน้าเว็บ (Render Blocking)
2. รอโหลดและประมวลผล CSS เสร็จก่อน
3. จึงแสดงเนื้อหาต่อไป
❌ ผลที่ได้: หน้าเว็บโหลดช้า ผู้ใช้เห็นหน้าขาวนานขึ้น
  • ★
    ​เทคนิค media="print" onload="this.media='all'"
```html
<link
rel="stylesheet"
href="styles.css"
media="print"
onload="this.media='all'"
>
```
  • ★
    ​ทำงานอย่างไร
1. เบราว์เซอร์เห็น `media="print"` จึงไม่บล็อกการแสดงผลหน้าแรก
2. โหลด CSS ในพื้นหลังแบบไม่เร่งด่วน
3. เมื่อโหลดเสร็จ `onload="this.media='all'"` จะเปลี่ยนให้ CSS ใช้กับทุกอุปกรณ์
  • ★
    ​ประโยชน์
✅ ลด Render Blocking - หน้าเว็บแสดงผลเร็วขึ้น
✅ รักษาการแสดงผล - CSS ยังทำงานปกติหลังโหลดเสร็จ
✅ เหมาะกับ CSS ที่ไม่สำคัญต่อการแสดงผลแรก
✅ เพิ่มคะแนน Core Web Vitals
  • ★
    ​ตัวอย่างการใช้งาน
1) สำหรับ CSS ทั่วไป
```html
<link
rel="stylesheet"
href="global.css"
media="print"
onload="this.media='all'"
>
```
2) ร่วมกับ Fallback สำหรับเบราว์เซอร์เก่า
```html
<link
rel="stylesheet"
href="styles.css"
media="print"
onload="this.media='all'"
>
<noscript><link rel="stylesheet" href="styles.css"></noscript>
```
  • ★
    ​ข้อควรระวัง
1) ไม่เหมาะกับ Critical CSS (ควรใช้ inline แทน)
2) ทดสอบการแสดงผลบนอุปกรณ์ต่างๆ
3) ใช้ร่วมกับ Preload สำหรับ CSS ที่สำคัญ
  • ★
    ​เทคนิคเสริมเพื่อประสิทธิภาพสูงสุด
```html
<!-- Preload CSS ที่สำคัญจริงๆ -->
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="critical.css">
<!-- โหลด CSS อื่นแบบไม่บล็อก -->
<link
rel="stylesheet"
href="non-critical.css"
media="print"
onload="this.media='all'"
>
```
✏️ Shoper Gamer
>> https://linkbio.co/ShoperGamer
  • ✓
    ​เพิ่มความเร็วเว็บไซต์ พร้อมกระตุ้น SEO 👇
  • ✓
    ​Async vs Defer เลือกแบบไหนให้เว็บโหลดเร็วที่สุด? 👇
  • ✓
    ​ทำไมต้องมี Framework 👇
Credit :
👇
  • ●
    ​https://github.com/angular/angular-cli/issues/29603
  • ●
    ​https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously
  • ●
    ​https://www.holisticseo.digital/pagespeed/async-css/
  • ●
    ​https://binovarghese.com/notes/2023/08/the-simplest-way-to-load-css-asynchronously/

ดูเพิ่มเติมในซีรีส์

โฆษณา