เว็บ static ที่ดูมีชีวิต: 3D, motion และงบเวลา 2 วินาที

เว็บ static มักถูกมองว่าเร็วแต่ดูแข็งๆ ไม่จำเป็นต้องเป็นอย่างนั้น เว็บ Nuxt ที่ generate เป็น static ใส่ hero แบบ 3D และ motion ตาม scroll ได้ และยังแสดงหน้าจอแรกได้ภายในสองวินาทีบนมือถือระดับกลาง ถ้าทุก effect เคารพงบเดียวกัน

สองวินาทีคืองบ ไม่ใช่เป้าหมาย

เรามองสองวินาทีแรกจนหน้าจอใช้งานได้เหมือนเงินในบัญชี ฟอนต์ hero และ section แรกต่างก็ใช้เงินจากบัญชีนี้ อะไรที่ไม่พอดีงบต้องรอจนหน้าเว็บใช้งานได้แล้ว หรือไม่ได้ขึ้นเว็บเลย

• เขียนงบไว้ก่อน design review ไม่ใช่หลังการตรวจ performance ครั้งแรก
• ทุก effect ต้องมีเจ้าของและมีต้นทุนเป็นมิลลิวินาที
• เมื่อชนกัน ให้ตัด effect ไม่ใช่ตัดงบ

ส่ง HTML ไปก่อน

ทุกหน้าถูก prerender ไว้ browser จึงได้เนื้อหาที่อ่านได้ตั้งแต่ response แรก ฉาก 3D และ library ด้าน motion โหลดตามมาเป็น lazy chunk และ markup แสดงสถานะสุดท้ายของทุก effect เสมอ ผู้ที่ใช้เน็ตช้าหรือเปิด prefers-reduced-motion ก็ยังได้หน้าเว็บครบ

Motion ที่รอคิวของตัวเอง

Motion ควรช่วยอธิบายหน้าเว็บ ไม่ใช่แค่ประดับ หัวข้อขยับขึ้นครั้งเดียว แต่ละ section ปรากฏเมื่อเลื่อนมาถึง และไม่มีอะไรขยับตอนที่ผู้อ่านกำลังอ่าน ทุกอย่างเริ่มหลังจากหน้าจอแรกพร้อมแล้วเท่านั้น

ถ้าเอา animation ออกแล้วมีคนคิดถึง ให้เก็บไว้ ถ้าไม่มีใครคิดถึง ให้ตัดทิ้ง

วัดผลบนมือถือที่ช้าที่สุดในห้อง

Laptop ของนักพัฒนาทำให้ทุกอย่างดูดีเกินจริง เราทดสอบบนมือถือ Android ระดับกลางที่จำกัดความเร็ว ผ่านเน็ตช้า และตรวจงบตั้งแต่ตอน build รูปที่หนักเกินหรือ import ที่โหลดเร็วเกินไปจึงพังก่อนที่ผู้เยี่ยมชมจะได้เห็น