หลังจาก Google ได้ให้ความสำคัญกับวิธีการเขียนเวบโดยยึดหลักความเร็วในการโหลดข้อมูลบนหน้าเวบเพจ โดยเปิดเวบ http://code.google.com/speed/index.html เผื่อให้คนเขียนเวบสามารถเข้าถึงวิธีการและปรับปรุงพร้อมแชร์ประสบการณ์ผ่านทางเวบไซด์นี้ ในฐานะที่เป็นคนที่เขียนเวบคนหนึ่งต้องเข้าไปดูครับโดยเฉพาะ Web Performance Best Practices ได้บอกถึงวิธีการเขียนเวบให้สามารถโหลดได้เร็วโดยวิธีการต่างๆ มองเห็นภาพการทำงานและสามารถนำไปใช้ได้จริง จึงขอสรุปตามความเข้าใจของตัวเอง เน้นที่ความเข้าใจของตัวเองหากผิดพลาดขอคำแนะนำผ่าน Comment ด้านล่างหรือขาดตกบ่งพร่องตรงไหน ยินดีน้อมรับคำแนะนำโดยเริ่มจาก
การจัดการประสิธิภาพของแคช (Caching)
โดยปกติแล้วในหน้าเวบเพจหนึ่งหน้าจะมีการอ้างอิงข้อมูลที่มักจะเปลี่ยนแปลงบ่อยๆ อาทิเช่น ไฟล์ CSS ,ไฟล์ js หรือ Javascript , ไฟล์รูป ไฟล์พวกนี้จะมีการโหลดทุกครั้งที่มีการเรียกหน้าเวบเพจ ดังนั้นวิธีการที่จะช่วยลดเวลาในการโหลดคือการทำ HTTP Caching เก็บข้อมูลพวกนี้ไว้บน Browser หรือ Proxy แบบชั่วคราว ปกติแล้วถ้ามีการ reload หน้าเวบเพจ Brower จะไปดึงข้อมูลนั้นมาใหม่จาก Server แต่ถ้าข้อมูลมีการทำแคชเก็บไว้ Browser หรือ Proxy จะอ้างอิงข้อมูลพวกนี้ถายในเครื่อง จึงเป็นการลดเวลาในการโหลดหน้าเวบเพจที่ได้ผลและเห็นได้ชัดมาก อีกทั้งเป็นการช่วยลดจำนวน Bandwidth และตังค์ในกระเป๋าได้อย่างสบาย
ทำความเข้าใจกับ Browser caching
HTTP Protocol สนับสนุนให้ Browser ทำ caching ข้อมูลที่เป็น static เพราะไม่มีประโยชน์อะไรเลยที่ Web Server ต้องทำการเรียกข้อมูลเดิมซ้ำๆ ดังนั้นเราต้องสั่งให้ Web Server กำหนด caching headerให้สามารถเก็บแคชได้ ไม่ว่าจะเป็นไฟล์ JS(Javascript) , CSS (Cascading Style Sheets) , Imags และ ไฟล์ที่เป็นไบนารีอื่นๆ (มีเดียไฟล์,PDF ไฟล์ , Flash ไฟล์) ส่วน HTML นั้นไม่ใช่ข้อมูลที่เป็น static ดังนั้นจึ้งไม่สามารถทำแคชได้
HTTP/1.1 provides the following caching response headers :
Expires และ Cache-Control:max-age เป็นการกำหนดช่วงเวลาของข้อมูลที่ทำแคชว่ามีเวลาเท่าไหร่ โดยที่ไม่มีการตรวจสอบข้อมูลใหม่จาก Web Server
Last-Modified และ ETag เป็นการกำหนดชุดอักษรชุดหนึ่งที่เป็น UID (Uniquely IDentifies) เก็บไว้ใน ETag เพื่อให้ Browser สามารถตรวจสอบและกำหนด Last-Modifies header ของข้อมูลที่ทำแคชได้
กำหนดแคชได้โดย
- กำหนด Expires อย่างน้อยหนึ่งเดือน โดยเฉพาะอย่างยิ่งควรกำหนดให้มากกว่าหนึ่งปีเผื่อไว้ในอนาคต (แนะนำให้กำหนดเป็น max-age เพราะมีช่วงเวลาที่มากที่สุดที่ Browser สนับสนุน)
- กำหนด Last-Modifies date เป็นวันที่เปลี่ยนแปลงล่าสุดของข้อมูลที่ทำแคช
ใช้ fingerprinting เพื่อทำ Dynamic enable caching
สำหรับข้อมูลที่ใช้ทำแคชมีการเปลี่ยนแปลงเป็นบางโอกาส เราสามารถทำ Browser caching ข้อมูลจนกว่าจะมีการเปลี่ยนข้อมูลบน Web server โดยการกำหนดให้ server บอกกับ browser ว่ามีการเปลี่ยนแปลงข้อมูลเกิดขึ้น วิธีนี้ทำได้โดยการฝั่ง fingerprint ของข้อมูลไว้บน URL(file path) ซึ่งจะใช้วิธีนี้ได้นั้นจำเป็นต้องรู้ fingerprinted URL
กำหนด Vary header โดยตรงใน Internet Explorer
ใน IE จะไม่สามารถทำแคชกับข้อมูลใดๆได้ถ้ามีการใช้ Vary headerดังนั้นควรเอาVary header ออกถ้าเกิดbrowser ที่ใช้เป็น ie
หลีกเลี่ยงการใช URLs ซึ่งเป็นสาเหตุการชนกันของแคชใน Firefox
ใน disk cache hash function ของ firefox จะสร้างความแตกต่างของ URLs ซึ่งมีความแตกต่างน้อยมากทำให้มี hash key ที่เหมือนกัน เกิดการชนกันของ URLs
ตัวอย่าง
เป็นไฟล์ style sheet ใน Google Calendar ซึ่งมีการใช้ fingerprint ในชื่อของ fileด้วย
calendar/static/fingerprint_keydoozercompiled.css
fingerprint_key= key ขนาด 128 บิต เป็นเลขฐาน 16
ถ้าดูจากรูปแล้ว ต้องลง Page Speed Plugin ใน firefox และสังเกตดูว่า fingerprint = 82b6bc440914c01297b99b4bca641a5d วิธีการหรือการทำงานของ fingerprint จะทำการ กำหนดให้ Expires Header มีอายุนาน 1 ปี จากวันที่มีการร้องขอข้อมูล Last-Modifies คือวันที่มีการเปลี่ยนแปลงล่าสุดของไฟล์ข้อมูล style sheet และ Cache-Control: max-age header = 3153600 seconds คือ 1 ปี ในตัวอย่างนี้ client หรือ Brower จะโหลดไฟล์นี้อีกครั้งก็ต่อเมื่อ ไฟล์นี้มีการเปลี่ยนแปลงก่อนที่จะหมดอายุตามวันหมดอายุ(expires date) หรือ อายุสูงสุดของแคช maximum age และ fingerprint url จะเปลี่ยนก็ต่อเมื่อไฟล์ข้อมูลมีการเปลี่ยนแปลง
ทำความรู้จัก Proxy Caching
เป็นการกำหนด HTTP header สำหรับข้อมูลที่เป็น static ไปใช้ caching ที่เป็น public กล่าวคือ Browser จะดึงข้อมูลแคชจาก proxy server แทนที่จะ web server (ถ้ารู้่จักโปรแกรมอย่าง Squid คงพอจะนึกออก) เปรียบเสมือน proxy server เป็นตัวกลางในการเชื่อมต่อ ดังรูปด่านล่าง ดังนั้นเราควรกำหนด Cache-Control: public
ข้อแนะนำ
- ไม่ควรเพิ่มเติ่ม Query String ใน URL ที่เป็นข้อมูล Static
เช่น style.css?0010220200 เพราะ proxies ส่วนใหญ่ จะไม่สามารถทำ cacheได้ ถ้าหาก Cache-control เป็น public
- ไม่ควรเปิดใช้ proxy caching สำหรับข้อมูลที่ set cookie
- ระวังการใช้ proxy caching สำหรับข้อมูลที่เป็น CSS และ JS
บาง public proxies อาจจะมีบักทำให้ไม่สามารถบอก content-encoding response header ได้
