ทำเว็บให้เบาและเร็ว: บทเรียนจากการรื้อเว็บบริษัท

เว็บบริษัทส่วนใหญ่ที่เรารับมารื้อ มีปัญหาเดียวกันคือ “แบกของที่ไม่ได้ใช้” ทั้ง JavaScript สไลเดอร์ ฟอนต์หลายชุด และรูปที่ใหญ่เกินจำเป็น

เริ่มจากส่ง HTML ให้ก่อน

หน้าเนื้อหา (หน้าแรก บริการ บทความ) ไม่จำเป็นต้องรันเฟรมเวิร์กฝั่ง client เรนเดอร์เป็น HTML ตั้งแต่ตอน build แล้วเติม JavaScript เฉพาะจุดที่ต้อง interactive จริง ๆ เท่านั้น เว็บนี้ทั้งเว็บมีสคริปต์แค่ตัวกรองผลงานหน้าเดียว

รูปคือตัวการหลัก

• กำหนด width/height ทุกรูปเพื่อกัน layout shift
• เสิร์ฟ AVIF/WebP และปรับขนาดตามจุดที่แสดงผล
• โหลดรูปที่อยู่นอกจอแบบ loading="lazy"

ฟอนต์

เลือกฟอนต์ให้น้อยชุด โฮสต์เอง preload เฉพาะน้ำหนักที่ใช้ และตั้ง font-display: swap เพื่อไม่ให้ข้อความหายระหว่างโหลด

วัดผลด้วยเครื่องมือ ไม่ใช่ความรู้สึก

รัน Lighthouse และดู field data จาก Search Console จริง ตัวเลขที่สำคัญคือ LCP, CLS และ INP ทำให้ผ่านเกณฑ์ก่อน แล้วค่อยไปสนใจรายละเอียดอื่น