ประมาณเวลาโหลดหน้าเว็บตามขนาดไฟล์และความเร็วอินเทอร์เน็ต
เครื่องมือนี้ช่วยนักพัฒนาเว็บและผู้ดูแลโฮสติ้งประมาณเวลาโหลดหน้าเว็บตามขนาดทรัพยากรแต่ละประเภท
ใช้ปรับแต่ง Core Web Vitals และ SEO โดยระบุขนาด HTML, CSS, JS, รูปภาพ และ Font พร้อมเลือกประเภทการเชื่อมต่อ
ขนาดทรัพยากร (KB)
Core Web Vitals จาก Google
| ตัวชี้วัด | ชื่อ | ดี | ปานกลาง | ต้องปรับปรุง |
|---|---|---|---|---|
| LCP | Largest Contentful Paint | ≤ 2.5s | 2.5–4s | > 4s |
| FID | First Input Delay | ≤ 100ms | 100–300ms | > 300ms |
| CLS | Cumulative Layout Shift | ≤ 0.1 | 0.1–0.25 | > 0.25 |
| TTFB | Time to First Byte | ≤ 800ms | 800ms–1.8s | > 1.8s |
| INP | Interaction to Next Paint | ≤ 200ms | 200–500ms | > 500ms |
การลดขนาดหน้าเว็บ
ลดขนาดรูปได้ 25-35% เมื่อเทียบกับ JPEG/PNG โดยที่คุณภาพใกล้เคียงกัน
ลบ space, comment และ whitespace ลดขนาดได้ 10-20% ก่อน Gzip
โหลดรูปและ iframe เฉพาะเมื่อผู้ใช้เลื่อนถึง ลด Initial load ได้มาก
กระจายเนื้อหาไปยัง Edge Server ใกล้ผู้ใช้ ลด Latency และ TTFB
ใช้ PurgeCSS หรือ Tree Shaking ลบโค้ดที่ไม่ใช้ออก
ส่งหลาย Request พร้อมกันบน Connection เดียว ลด Overhead ของ Handshake
คำถามที่พบบ่อย
Google แนะนำให้หน้าเว็บมีขนาดรวมไม่เกิน 1-2 MB หน้าทั่วไปควรอยู่ที่ 500KB-1MB หลังจาก Gzip สำหรับ Mobile ยิ่งเล็กยิ่งดีเพราะ CPU และ Network จำกัดกว่า
Brotli บีบอัดได้ดีกว่า Gzip ประมาณ 15-25% สำหรับ Text ทุกประเภท แต่ต้องการ CPU มากกว่าเล็กน้อย Browser สมัยใหม่รองรับทั้งคู่ หาก Server รองรับ Brotli ควรเปิดใช้แทน Gzip
Core Web Vitals คือตัวชี้วัด UX ที่ Google ใช้ในอัลกอริทึม SEO ตั้งแต่ 2021 ได้แก่ LCP (ความเร็วโหลด), FID/INP (ตอบสนองต่อการกด), CLS (การกระโดดของเลย์เอาต์) เว็บที่คะแนนดีมีโอกาสติดอันดับสูงขึ้น
เทคนิคที่รอโหลดรูปภาพหรือ iframe จนกว่าผู้ใช้จะเลื่อนหน้าจอมาใกล้ส่วนนั้น ช่วยลดเวลาโหลดหน้าแรกได้มาก ใช้ได้ด้วย attribute loading="lazy" ใน HTML5 โดยไม่ต้องใช้ JavaScript เพิ่ม
CDN ลด Latency โดยให้ผู้ใช้โหลดไฟล์จาก Server ใกล้ตัวแทนที่จะวิ่งข้ามประเทศ ลด TTFB ได้ 50-80% สำหรับผู้ใช้ที่อยู่ห่างไกล Static asset เหมาะกับ CDN มากที่สุด ได้แก่ รูปภาพ, CSS, JS และ Font