สรุป key points ของ Web optimization
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 เฉพาะไปเลย