Blockdit Logo (Mobile)
Shoper Gamer
•
เมื่อวาน เวลา 05:37 • การศึกษา
Website By Shoper Gamer

Async vs Defer เลือกแบบไหนให้เว็บโหลดเร็วที่สุด?

โดย
เมื่อพูดถึงการเพิ่มความเร็วเว็บไซต์การโหลด JavaScript (JS) อย่างมีประสิทธิภาพ เป็นปัจจัยสำคัญที่หลายคนมองข้าม! โดยเฉพาะการเลือกใช้ `async` และ `defer` ซึ่งช่วยควบคุมการโหลด JS ไม่ให้บล็อกการแสดงผลหน้าเว็บ
ในบทความนี้ เราจะเจาะลึกความแตกต่างระหว่าง async และ defer พร้อมตัวอย่างการใช้งานจริง เพื่อให้คุณเลือกใช้ได้อย่างเหมาะสม และ เพิ่มความเร็วเว็บไซต์ให้ปังที่สุด!
  • ★
    ​JavaScript โหลดช้าทำำมถึงส่งผลต่อเว็บไซต์?
โดยปกติเมื่อเบราว์เซอร์โหลดหน้าเว็บ มันจะหยุดการแสดงผล (Render Blocking) ทุกครั้งที่พบ <script> เพื่อโหลดและ ประมวลผล JS ก่อน
❌ ปัญหาที่เกิดขึ้น
- หน้าเว็บโหลดช้า เพราะต้องรอ JS โหลดเสร็จก่อน
- ผู้ใช้เห็นหน้าจอขาวนานขึ้น (Bad User Experience)
- SEO แย่ลง เพราะ Google ใช้ความเร็วเป็นปัจจัยจัดอันดับ
วิธีแก้ไขคือใช้ `async` หรือ `defer` เพื่อควบคุมการโหลด JS!
  • ★
    ​Async VS Defer ต่างกันอย่างไร?
☆ <script async>
- การโหลด: โหลดแบบไม่หยุดการแสดงผลหน้าเว็บ
- การประมวลผล: ประมวลผลทันทีเมื่อโหลดเสร็จ
- ลำดับการทำงาน: ไม่รักษาลำดับ (รันตามที่โหลดเสร็จ)
- เหมาะกับ: สคริปต์ที่ไม่พึ่งพาสคริปต์อื่น
☆ <script defer>
- การโหลด: โหลดแบบไม่หยุดการแสดงผลหน้าเว็บ
- การประมวลผล: ประมวลผลหลังจาก HTML โหลดเสร็จ
- ลำดับการทำงาน: รักษาลำดับ (รันตามลำดับใน HTML)
- เหมาะกับ: สคริปต์ที่พึ่งพาสคริปต์อื่น
☆ <script> แบบปกติ
- การโหลด: หยุดการแสดงผลจนกว่า JS จะโหลดเสร็จ
- การประมวลผล: ประมวลผลทันทีเมื่อโหลดเสร็จ
- ลำดับการทำงาน: รักษาลำดับ
- เหมาะกับ: สคริปต์ที่ต้องทำงานทันที
  • ★
    ​ควรใช้ Async หรือ Defer เมื่อไหร่?
✅ ใช้ async เมื่อ
- สคริปต์ไม่ต้องพึ่งพาสคริปต์อื่น
- สคริปต์ไม่ต้องเข้าถึง DOM
- ตัวอย่าง: Google Analytics, Facebook Pixel
```html
<script async src="analytics.js"></script>
```
✅ ใช้ defer เมื่อ
- สคริปต์ต้องพึ่งพาสคริปต์อื่น
- สคริปต์ต้องรอ DOM โหลดเสร็จก่อน
- ตัวอย่าง: jQuery, Bootstrap JS, Custom Scripts
1
```html
<script defer src="jquery.js"></script>
<script defer src="main.js"></script> <!-- รันหลังจาก jquery.js -->
```
✅️ ใช้ <script> แบบปกติ เมื่อ
- สคริปต์ต้องทำงานทันที และสำคัญต่อการแสดงผลแรก
- ตัวอย่าง: Critical JS, สคริปต์ที่ต้องรันก่อนแสดงเนื้อหา
```html
<script src="critical-script.js"></script>
```
  • ★
    ​ตัวอย่างการใช้งาน
1) ตัวอย่างที่ดี (Recommended)
```html
<head>
<!-- โหลดเร็วโดยไม่บล็อกการแสดงผล -->
<script async src="analytics.js"></script>
<script defer src="jquery.js"></script>
<script defer src="main.js"></script>
</head>
<body>
<!-- JS ที่สำคัญมาก วางก่อนปิด body -->
<script src="critical.js"></script>
</body>
```
2) ตัวอย่างที่แย่ (Avoid)
```html
<head>
<!-- ห้ามทำ! จะบล็อกการโหลดหน้าเว็บ -->
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
```
  • ★
    ​ทดสอบประสิทธิภาพด้วย Lighthouse
หลังจากปรับใช้ async และ defer ให้ตรวจสอบผลผ่าน
1) Google Lighthouse (ใน Chrome DevTools)
2) PageSpeed Insights
3) WebPageTest
✏️ Shoper Gamer
>> https://linkbio.co/ShoperGamer
  • ✓
    ​เพิ่มความเร็วเว็บไซต์ พร้อมกระตุ้น SEO 👇
  • ✓
    ​JavaScript คืออะไร? ทำไมถึงสำคัญที่สุดในโลกเว็บ 👇
  • ✓
    ​ทำไมโค้ดถึงมีความเร็วที่ต่างกัน 👇
Credit :
👇
  • ●
    ​https://pagespeedchecklist.com/async-and-defer
  • ●
    ​https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm
  • ●
    ​https://medium.com/@Knfrmd/javascript-async-and-defer-47350d314bc1
  • ●
    ​https://medium.com/@moh.mir36/async-vs-defer-in-html-6b97c988698f
  • ●
    ​https://www.debugbear.com/blog/async-vs-defer

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

โฆษณา