2009/Jun/28

หลังจาก 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 ได้

 

Comment

Comment:

Tweet


ขอบคุณครับ
#2 by รูปดารา ภาพดารา At 2014-09-16 23:42,
เยี่ยมๆๆ

cขอบคุณที่แปลมาให้ครับ

Hot! Hot! Hot!
#1 by TonHor At 2009-06-28 21:16,

snippet.googalz.com
View full profile