ภาพปกสร้างด้วย AI เพื่ออธิบายร้านสมมติ ไม่ใช่ภาพระบบที่ติดตั้งหรือผลทดสอบจริง
ภาพอะไหล่ขนาดใหญ่ถูกส่งให้มือถือทุกครั้ง สคริปต์หลายชุดเริ่มทำงานก่อนลูกค้ากดค้นหา และหน้าสินค้าเดิมยังถามฐานข้อมูลซ้ำ ถ้าเป็นร้านสมมติช่างพร้อม ผมจะลดงานเหล่านี้ก่อนซื้อกำลังเพิ่ม เพราะงานที่ไม่ต้องทำช่วยทั้งเวลาของลูกค้าและภาระระบบ แต่ข้อมูลที่ลดได้ต้องแยกจากข้อมูลที่จำเป็นต้องสดและตรงสิทธิ
ตอนนี้ต่อจากการวัดในตอนแรก ตัวเลขและเหตุการณ์ของร้านยังเป็นกรณีสมมติ จุดหมายคือเลือกให้ออกว่าอะไรควรทำในเบราว์เซอร์ อะไรเตรียมไว้ล่วงหน้า และอะไรเก็บใช้ซ้ำได้ ไม่ใช่ติดตั้ง CDN แล้วถือว่าเว็บทุกส่วนเร็วและปลอดภัยขึ้นเอง
แยกเวลารอเครือข่ายออกจากงานบนเครื่องลูกค้า
ถ้าเซิร์ฟเวอร์ตอบเร็วแต่หน้าเว็บยังโต้ตอบช้า ปัญหาอาจอยู่ที่ JavaScript ที่ดาวน์โหลด แปล และรันบนมือถือ หรือการจัดหน้าใหม่ซ้ำ การลด API latency เพียงด้านเดียวจึงอาจไม่เปลี่ยนเวลาที่คนกดได้จริง เริ่มจากเส้นทางสำคัญและข้อมูลที่วัดจากอุปกรณ์ใกล้ลูกค้า ไม่ใช้เครื่องนักพัฒนาแทนทุกคน
งานของ browser มีทั้งรับข้อมูล สร้างโครงหน้า คำนวณสไตล์ จัดวาง และวาดภาพ ถ้าส่งงานยาวมาขวางเธรดหลัก การกดของผู้ใช้ต้องรอ อย่าเพียงซ่อนปุ่มหรือแสดงวงล้อแล้วเรียกว่าเร็วขึ้น ควรลดโค้ดที่ไม่จำเป็น แยกงานตามหน้าที่ใช้ และไม่โหลดเครื่องมือการตลาดหลายตัวจนรบกวนเส้นทางซื้อ
เมื่อเลือก SSR หรือสร้าง HTML จากฝั่งเซิร์ฟเวอร์ ผู้ใช้มักเริ่มเห็นเนื้อหาได้โดยไม่รอ JavaScript ทุกส่วน แต่ยังมีค่าเตรียมหน้าและอาจต้องผูกการโต้ตอบกลับเข้ากับหน้าเดิมหรือ hydration ส่วน CSR ที่ให้ browser สร้างหน้ามีประโยชน์กับบางแอป แต่ย้ายงานไปที่เครื่องลูกค้า การเลือกจึงขึ้นกับงานและข้อมูล ไม่ใช่ชื่อ framework ที่กำลังนิยม
เนื้อหาสาธารณะที่เปลี่ยนไม่บ่อยอาจสร้าง HTML ไว้ล่วงหน้าหรือ static rendering เพื่อลดการสร้างหน้าต่อคำขอ แต่ข้อมูลเฉพาะบัญชียังต้องโหลดผ่านเส้นทางที่ตรวจสิทธิ การเตรียมหน้าล่วงหน้าจึงต้องมีวิธีเผยแพร่การแก้ไขและไม่เผลอฝังราคาของลูกค้าคนใดไว้ในหน้าที่ทุกคนอ่านได้
Streaming ส่งบางส่วนของหน้ามาก่อนได้โดยไม่ต้องรอทุกส่วนเสร็จ แต่ไม่ได้ลบงานที่เหลือ ส่วนการผูก JavaScript เฉพาะบริเวณที่ต้องโต้ตอบหรือ partial hydration ช่วยจำกัดงานบน browser ได้ในบางแบบ แต่เพิ่มการออกแบบขอบเขตและการส่งสถานะ เลือกใช้เมื่อผลวัดของหน้านั้นคุ้มกับภาระดูแล
เลือกไฟล์และจำนวนไบต์ที่จำเป็น
จัดวางและวาดโดยไม่กระโดด
ไม่ปล่อยงานยาวขวางการโต้ตอบ
ส่งภาพให้พอดีกับที่ใช้จริง
รูปสินค้าที่แสดงกว้างไม่กี่ร้อยพิกเซลไม่จำเป็นต้องดาวน์โหลดไฟล์ต้นฉบับเต็มทุกครั้ง สร้างขนาดที่ใช้จริง เลือกชนิดไฟล์ตามเนื้อหา และใช้ responsive images ให้ browser เลือกไฟล์ที่เหมาะ ระบุความกว้างและสูงหรืออัตราส่วนเพื่อจองพื้นที่ ลดการกระโดดของข้อความขณะภาพโหลด
ภาพที่เป็นเนื้อหาหลักด้านบนไม่ควรถูกหน่วงแบบเดียวกับภาพท้ายหน้า หากไป lazy-load ภาพหลักโดยไม่พิจารณา อาจทำให้ LCP แย่ลง ส่วนภาพที่อยู่นอกจอใช้ lazy loading ได้ตามความเหมาะสม อย่า preload ทุกอย่างพร้อมกัน เพราะทรัพยากรที่ตั้งใจช่วยกันอาจแย่งแบนด์วิดท์ของงานสำคัญ
ฟอนต์ไทยต้องอ่านได้และไม่ตัดวรรณยุกต์ เลือกชุดและน้ำหนักที่ใช้จริง ตรวจการแสดงก่อนและหลังฟอนต์โหลด และระวังการแบ่งไฟล์ที่ทำให้อักษรไทยตกหล่น การบีบไฟล์จนตัวหนังสือผิดหรือการเปลี่ยนฟอนต์ที่เจ้าของอนุมัติแล้วไม่ใช่การปรับความเร็วที่สำเร็จ เราต้องวัดคู่กับคุณภาพการอ่าน
แคชคือการใช้คำตอบเดิมซ้ำ ภายใต้เงื่อนไข
แคชใน browser และแคชร่วมที่ CDN ช่วยหลีกเลี่ยงการส่งข้อมูลหรือทำงานซ้ำ CDN กระจายเนื้อหาไปยังจุดบริการใกล้ผู้ใช้ในหลายพื้นที่ แต่ผลขึ้นกับตำแหน่ง เครือข่าย ชนิดข้อมูล และอัตราที่พบคำตอบอยู่แล้วหรือ cache hit งานที่ไม่พบจะส่งต่อไปยังแคชชั้นถัดไปหรือต้นทางตามการตั้งค่า
คำถามแรกของแคชคือใครใช้คำตอบเดียวกันได้ และยอมให้เก่าได้นานเท่าใดไฟล์ภาพสาธารณะกับราคาพิเศษของลูกค้าไม่ได้มีคำตอบเหมือนกัน แม้จะอยู่ใต้โดเมนเดียวกัน การตั้งอายุแคชก่อนตอบเรื่องสิทธิอาจทำให้ความเร็วแลกมาด้วยข้อมูลรั่ว
ร้านช่างพร้อมอาจเก็บภาพที่ระบุเวอร์ชันไว้ได้นาน ขณะที่คำอธิบายสินค้าต้องมีวิธีเปลี่ยนเวอร์ชันหรือทำให้แคชเก่าหมดอายุ ราคาตามสัญญาและตะกร้าของแต่ละบัญชีควรใช้เส้นทางและนโยบายที่ตรวจสิทธิถูกต้อง การมีคุกกี้อยู่ในคำขอไม่ได้แปลว่า shared cache จะรู้เองว่าห้ามเก็บคำตอบนั้น
| ข้อมูล | ใครใช้ร่วมกันได้ | เรื่องที่ต้องตัดสินใจก่อนแคช |
|---|---|---|
| ภาพสินค้าแบบมีเวอร์ชัน | ทุกคนที่เข้าถึงสินค้าสาธารณะ | URL เวอร์ชันจริง ขนาดไฟล์ และการลบไฟล์เก่า |
| คำอธิบายสินค้า | ตามภาษาและสถานะเผยแพร่ | อายุข้อมูล การแก้ข้อความ และป้องกันร่างหลุด |
| ราคาตามบัญชี | เฉพาะผู้มีสิทธิตามเงื่อนไข | ไม่ให้ shared cache ปะปนสิทธิและตรวจหลังเปลี่ยนบัญชี |
| ยืนยันคำสั่งซื้อ | ตามเจ้าของรายการ | ตรวจสิทธิและผลธุรกรรม ไม่ใช้คำตอบเก่าแทนการบันทึก |
ตั้ง Cache-Control ให้ตรงความหมาย
ตามมาตรฐาน HTTP คำว่า no-cache ไม่ได้แปลว่าห้ามเก็บ แต่ต้องตรวจสอบกับต้นทางก่อนนำคำตอบที่เก็บมาใช้ซ้ำ ส่วน no-store สั่งไม่ให้แคชเก็บคำขอหรือคำตอบตามข้อกำหนด และ private จำกัดไม่ให้ shared cache เก็บคำตอบนั้น การเลือกต้องตรงความอ่อนไหวและพฤติกรรมที่ต้องการ พร้อมทดสอบการตั้งจริงของ proxy และ CDN
cache key คือข้อมูลที่ใช้แยกคำตอบ เช่น URL พารามิเตอร์ และส่วนหัวที่มีผลต่อเนื้อหา ถ้าคำตอบต่างตามภาษาแต่ key ไม่แยกภาษา ลูกค้าอาจได้เนื้อหาผิดภาษา ถ้าคำตอบต่างตามสิทธิแต่ใช้ key เดียวกัน ผลอาจร้ายแรงกว่านั้น อย่าแก้ด้วยการยัดทุก header ลง key เพราะอาจแตกแคชเป็นจำนวนมากโดยยังพิสูจน์ความถูกต้องไม่ได้
ใช้ Vary ให้ตรงส่วนหัวที่ทำให้คำตอบเปลี่ยน และตรวจนโยบายเฉพาะของระบบที่ใช้อยู่ด้วย สำหรับข้อมูลส่วนตัว การกำหนดว่าใครเข้าถึงได้ต้องอยู่ที่ระบบตรวจสิทธิ ไม่ใช่อาศัยความลับของ URL หรือหวังว่าแคชจะไม่ส่งข้ามคน แคชช่วยประสิทธิภาพ ไม่ได้แทน authorization
ภาพและเนื้อหาสาธารณะที่กำหนดความสดแล้ว
ราคาเฉพาะบัญชี ตะกร้า และคำสั่งซื้อ
Hit สูงไม่ได้แปลว่าต้นทางไม่มีวันล่ม
สมมติมีคำขออ่านสินค้าสาธารณะ 1,000 ครั้งในช่วงเดียวกันและแคชตอบได้ 900 ครั้ง ต้นทางอาจเหลืองานประเภทนั้น 100 ครั้ง แต่ตัวเลขนี้ไม่ได้รวมคำสั่งซื้อ งานที่ bypass แคช หรือการสร้างคำตอบย่อย บอกได้เพียงผลตามขอบเขตสมมติ ห้ามนำไปประกาศว่ากำลังระบบเพิ่มสิบเท่าทั้งเว็บ
เมื่อแคชหมดอายุพร้อมกันหรือมีสินค้ายอดนิยมตัวใหม่ คำขอจำนวนมากอาจวิ่งเข้าต้นทางพร้อมกัน เตรียมวิธีรวมคำขอที่ถามข้อมูลเดียวกัน การหมดอายุที่ไม่กระจุก และการตอบข้อมูลเก่าที่อนุญาตไว้ล่วงหน้า แต่ราคาที่ผูกสัญญาหรือสถานะสต็อกตอนยืนยันรายการอาจใช้ข้อยกเว้นแบบเดียวกับบทความสาธารณะไม่ได้
ติดตามทั้ง hit ratio งานที่ต้นทางรับจริง เวลาในกรณี miss และความถูกต้องหลังแก้ข้อมูล ทดสอบแคชเย็น ไม่ใช่ทดสอบหลังระบบอุ่นแล้วตลอด ถ้าต้อง purge ให้กำหนดผู้รับผิดชอบและขอบเขต เพราะการ purge ทั้งระบบบ่อยอาจเป็นภาระใหม่ และไม่ได้ลบสำเนาที่ดาวน์โหลดไปแล้วทุกแห่งตามใจเรา
ลดงานที่ไม่ได้ช่วยให้ลูกค้าตัดสินใจ
หน้าสินค้าไม่ควรดึงประวัติคำสั่งซื้อทั้งหมดเพื่อบอกว่าลูกค้ามีรายการล่าสุดหรือไม่ ใช้ข้อมูลเท่าที่ต้องแสดง แบ่งหน้าและกำหนดจำนวนผลลัพธ์ ฝั่ง browser ก็ไม่ควรเรียกค้นหาทุกครั้งที่กดแป้นโดยไม่คุมจังหวะ ระวังคำขอเก่าที่กลับมาทีหลังแล้วเขียนทับผลล่าสุด ต้องจัดการการยกเลิกหรือแยกเวอร์ชันคำขอตามงาน
การแบ่งหน้าไม่ได้ทำให้ปัญหาหายไปถ้าลูกค้าต้องกดหลายสิบครั้งเพื่อทำงานเดียว จึงต้องทบทวนรูปแบบค้นหาและตัวกรองคู่กับจำนวนข้อมูลที่ส่ง เป้าหมายคือจบงานด้วยแรงและเวลาที่เหมาะสม ไม่ใช่ลดไบต์ในหนึ่งคำขอแล้วสร้างคำขอเพิ่มจนรวมแพงกว่าเดิม
ตรวจสิ่งที่ถูกส่งจริง ไม่ใช่ชื่อที่ตั้งไว้
URL ที่เขียนว่ารูปขนาดเล็กไม่ได้พิสูจน์ว่าไฟล์เล็กลง ต้องดูขนาดพิกเซล ไบต์ และไฟล์ที่ browser เลือกจริง หากหลาย URL ส่งต้นฉบับเดียวกัน การตั้ง srcset สวยงามก็ยังไม่ช่วย การบีบอัดลดข้อมูลที่ส่งได้ แต่ไม่ได้ลบงานถอดรหัสภาพ แปลสคริปต์ หรือคำนวณหน้าจอทั้งหมด
HTTP/2 และ HTTP/3 ปรับการส่งข้อมูลและการจัดการสตรีมในระดับโปรโตคอล แต่ยังมีงานต้นทางและงานบนเครื่องลูกค้า ถ้า API รอ query หลายวินาที การเปลี่ยนโปรโตคอลอย่างเดียวไม่ลบเวลานั้น ตรวจการเชื่อมต่อที่ใช้อยู่จริงและสภาพเครือข่ายก่อนอ้างผล ไม่จำเป็นต้องเปลี่ยนหลายชั้นในรอบเดียว
การตรวจส่งมอบควรครอบคลุมรูปที่เลือกบนหน้าจอแคบ ภาพหลักที่ไม่ถูกเลื่อนโหลด ฟอนต์ไทยที่มีอักษรครบ และเนื้อหาหลังเปลี่ยนภาษา/บัญชี รวมถึงเส้นทางที่ cache miss และแคชเย็น เมื่อแต่ละส่วนผ่านจึงวัดทั้งหน้าอีกครั้ง เพราะการแก้ไฟล์หนึ่งอาจทำให้ทรัพยากรอีกตัวกลายเป็นสิ่งที่ผู้ใช้ต้องรอนานที่สุดแทน
ไบต์ พิกเซล และชนิดไฟล์
ไฟล์ที่ browser เลือกและงานประมวลผล
ภาพชัด ฟอนต์ครบ และข้อมูลไม่ผิดสิทธิ
ผมจะรับการเปลี่ยนแปลงเมื่อเส้นทางเดิมเร็วขึ้นบนอุปกรณ์ที่เป็นตัวแทน ข้อมูลยังตรงสิทธิและสดตามกติกา และต้นทางทำงานน้อยลงจริง จากนั้นจึงเก็บผลเป็นฐานใหม่สำหรับทดสอบการเพิ่มเครื่องในตอนถัดไป
เอกสารส่งมอบของรอบนี้ควรมีรายการทรัพยากรที่ตัดออก นโยบายแคชแยกชนิดข้อมูล วิธีแก้ข้อมูลแล้วไม่ค้างสำเนาเก่า และผลทดสอบสลับบัญชีที่ไม่เห็นข้อมูลของกันและกัน เครื่องมืออาจช่วยหาไฟล์ใหญ่ได้ แต่ทีมต้องเป็นคนตัดสินว่าคำตอบใดใช้ร่วมกันได้
อ่านต้นทางและขอบเขตของตัวอย่าง
เอกสารต่อไปนี้เป็นแหล่งอธิบายแนวคิดและข้อจำกัด ตรวจเมื่อ 18 ตุลาคม 2569 ตัวเลขร้านสมมติและข้อเสนอการเลือกทางเป็นการเรียบเรียงของผู้เขียน ไม่ใช่ราคา ผลทดสอบ หรือคำรับรองของแหล่งอ้างอิง ก่อนนำไปตั้งค่าจริงต้องตรวจรุ่น แผน และเงื่อนไขที่ใช้อยู่