Principles:

  • เน้นตอบสนองต่อผู้ใช้ (User perception)
  • ลดรอบของการติดต่อผ่าน network (Round-trip)
  • Optimization should not ruin UX.

Techniques:

General Technique

  • ใช้ JS script load ภาพหรืออะไรช้าๆ จาก onload event
  • ลดจำนวน download ที่ไม่จำเป็น
  • พยายามใช้ตัวอักษรตัวเล็ก จะได้เพิ่ม compression rate
  • ควรมี favicon.ico ติด site ไว้เสมอ ไม่งั้น browser จะเสียเวลามา request เปล่าๆ บ่อยๆ
  • Pre-cache page ถัดไป ...

Image file and Tag

  • Move to near top of <body> tag
  • Use Different Domain Name
  • ระบุ width กับ height เสมอ
  • ถ้าจำเป็น ใช้ CSS position ร่วมกับ Javascript เพื่อทำให้การ load image ที่สำคัญเกิดขึ้นในอันดับต้นๆ
  • พยายามวางไว้ก่อนหน้า <script>
  • ใช้ Image sprites แทนการ load ภาพหลายภาพ ถ้าทำได้

JS Scripts

  • Reduce the number of script files as many as possible.  Ideally, one file a page.
  • ไม่ควรใช้ document.write() เพราะมันทำให้เคลื่อนย้ายตำแหน่งที่จะ load JS script ได้ลำบาก
  • Put scripts in the end of HTML file.  Because when a browser loads script, it usually stops loading everything else.
  • เอา <script> ใส่ไว้ใต้ <div> แล้วค่อย manipulate DOM เพื่อย้ายไปตำแหน่งที่ต้องการ (สำหรับ JS script ที่เป็น 3rd party)
  • ใช้ <script defer="true"> ถ้าทำได้

CSS

  • ใช้ CSS เยอะๆ แทนพวก spacer.gif
  • render CSS แบบ embeded ในช่วง PLT1 แล้ว PLT2 ค่อยใช้เป็น <link> tag

HTML

  • ลองพิจารณาใช้ JS แทน content ใหญ่ ถ้ามันทำให้เล็กกว่าได้
  • ถ้าใช้ <table> ควรกำหนด <col width="xx"> ด้วย
  • กำหนด <meta charset> เสมอ (ใส่ก่อน <title>)
  • ใช้ CSS ทำตาราง จะ control load time ได้ง่ายกว่า

Cookies

  • ระวังการ set cookies ที่ไปมีผลกับ static file อื่นๆที่ไม่เกี่ยวข้อง ทางที่ด้วย dynamic content ควรอยู่ใน folder เฉพาะไปเลย