#Web Performance

เปลี่ยนชื่อไฟล์รูป 1,707 ไฟล์เป็นภาษาไทยเพื่อ SEO โดยไม่ทำลิงก์พัง
รูปแกลเลอรีทั้งเว็บชื่อเป็นรหัสสุ่มไม่มีความหมาย เครื่องมือค้นหาอ่านไม่ออกสักไฟล์ บทความนี้เล่าการเปลี่ยนชื่อไฟล์ 1,707 ไฟล์เป็นภาษาไทยพร้อมอัปเดตทุกที่ที่อ้างถึงในทรานแซกชันเดียว และกับดักที่กินเวลาหนึ่งวันเต็มคือ curl ยิงพาธไทยดิบได้ 400 ทั้งที่เบราว์เซอร์เปิดได้ปกติ

รูปไม่โหลดในหน้าที่ซ่อนด้วย display:none เฉพาะบนมือถือ
หน้าเว็บแบบสลับหน้าด้วย display:none พอกดเปิดหน้าใหม่บนมือถือแล้วรูปดำเปล่า ทั้งที่ไฟล์คืน 200 และ fetch กับ new Image สำเร็จทั้งคู่ ตัวจริงคือ IntersectionObserver ของ loading=lazy ที่ไม่ยิงตอนหน้าเปลี่ยนจาก none เป็น block และการตั้ง loading=eager เฉย ๆ ก็ยังไม่พอ

deploy แล้วเว็บไม่อัปเดต — ไล่แคชห้าชั้นให้จบในครั้งเดียว
อัปไฟล์ขึ้นแล้ว เปิดดูยังเป็นของเก่า กด Ctrl+F5 ก็ยังเก่า — เพราะระหว่างไฟล์บนดิสก์กับสิ่งที่คนเห็นมีแคชคั่นอยู่ห้าชั้น แต่ละชั้นล้างคนละวิธี บทความนี้คือลำดับล้างที่ผมใช้ประจำ พร้อมกับดักที่ทำให้เว็บ 500 ค้างหลังสั่งล้าง view cache

ย้ายการคำนวณจาก PHP ไปทำในเบราว์เซอร์: 12 วินาที เหลือ 12 มิลลิวินาที
หน้าเดียวยิง subquery หลักหมื่นครั้งจนโหลดนาน 12 วินาที ผมแก้ด้วยการทำตารางสรุปไว้ล่วงหน้า ส่ง dataset ก้อนเดียว 107 KB แล้วย้ายสูตรไปคำนวณในเบราว์เซอร์ เหลือ 12 มิลลิวินาที พร้อม parity test ที่บังคับให้ผลฝั่ง JS ตรงกับ PHP ทุกแถว