ภาคภูมิ

ผมไม่ได้เริ่มทดสอบ noah345 จาก Wi-Fi เร็ว ๆ เพราะถ้าจะดู Performance จริง ผมอยากเห็นตอนเครือข่ายไม่สมบูรณ์มากกว่า

จุดแรกที่ผมดูคือหน้าเว็บแสดง “อะไรขึ้นมาก่อน”

ถ้าภาพ Hero ขนาดใหญ่ ไฟล์ตกแต่ง และเอฟเฟกต์ทั้งหมดพยายามโหลดพร้อมกัน คนใช้มือถือจะรู้สึกว่าเว็บช้าแม้ HTML จะตอบสนองเร็วอยู่แล้ว ในเว็บธีมเขียว–ทองที่มีงานภาพค่อนข้างละเอียด ผมจึงมองเรื่อง Responsive Image กับ Lazy Loading เป็นพิเศษ

สิ่งที่ควรทำคือภาพส่วนบนใช้ขนาดที่พอดีกับหน้าจอ ไม่ส่งไฟล์ระดับเดสก์ท็อปมาให้มือถือโหลดโดยไม่จำเป็น ส่วนภาพด้านล่างควรค่อยโหลดเมื่อผู้ใช้เลื่อนเข้าใกล้

อีกเรื่องคือ Font ถ้ามีหลาย Weight มากเกินไป หน้าแรกอาจต้องรอไฟล์ฟอนต์หลายชุดก่อนข้อความนิ่ง ผมชอบแนวทางที่ให้ข้อความอ่านได้ก่อน แล้วค่อยเติมรายละเอียดภาพภายหลัง มากกว่าปล่อยให้หน้าสวยครบแต่ต้องรอ

จุดที่ชอบ: ธีม noah345 มี Contrast ชัด ทำให้สามารถลดรายละเอียดบางส่วนบนมือถือได้โดยยังรักษา Brand Identity อยู่

ข้อสังเกต: งานกราฟิกของแบรนด์ค่อนข้างหนัก ถ้าไม่มี Performance Budget ชัด ๆ จำนวนภาพจะเพิ่มตามจำนวนหน้าและเริ่มกระทบความเร็วได้ในระยะยาว

ถ้าจะให้ผมเลือก Metric ที่ควรติดตาม ผมจะดู LCP, CLS และ INP แยกตามมือถือมากกว่าดูคะแนนรวมเพียงตัวเดียว