HTML optimize ลดขนาดเพิ่มสปีด
บทความนี้ผมไปเจอมาจากเว็บพันทิพผู้แปลก็แปลจากต้นฉบับจาก mozilla ครับ ที่เอาเรื่องนี้มาลง ก็เห็นว่าเป็นเรื่องพื้นฐานที่บางท่านอาจจะลืมๆไปบ้างแล้ว
ทิปการเขียน HTML ให้โหลดเร็วๆ
1. ลดน้ำหนักมันซะบ้าง
ไฟล์ขนาดยิ่งใหญ่ก็ยิ่งต้องโหลดนาน เป็นเรื่องปกติอยู่แล้ว ดังนั้นการลดน้ำหนักของไฟล์ HTML ลง ด้วยการลบ whitespaces (ช่องว่าง, แท็บ, การขึ้นบรรทัดใหม่), คอมเมนต์ทั้งหลายที่ไม่จำเป็น และย้ายสคริปต์,CSS ต่างๆไปเก็บแยกไฟล์ไว้ ก็ช่วยลดขนาดของไฟล์ลงไปได้ โดยไม่กระทบกระเทือนกับรูปหน้าโดยรวมของเพจนั้นๆ
ทูลเช่น HTML Tidy สามารถช่วยตรงนี้ได้ และยังมีทูลบางตัวที่สามารถบีบอัดไฟล์ javascript ได้ด้วย
2. ใช้ไฟล์ภายนอกให้น้อยที่สุด
จริงอยู่ที่การแยก script, css ออกจาก html จะลดขนาดของไฟล์ html ลงได้ แต่ก็ไม่ควรที่จะมีลิ้งค์ไปยังไฟล์มากเกินไป (รวมทั้งรูปด้วย) เพราะยิ่งลิ้งค์ไฟล์มาก ก็จะยิ่งเสียเวลาในการโหลด Header ต่างๆของ HTTP Protocol
3. เรียกไฟล์จากโดเมนอื่นๆให้น้อยที่สุด
การลิ้งค์ไฟล์จากเว็บอื่นๆนั้น จะมีเวลาส่วนหนึ่งเสียไปกับการ DNS lookup ดังนั้นจึงไม่ควรโหลดไฟล์จากเว็บอื่นๆให้มากนัก แต่อยากไรก็ตาม ในทางปฎิบัติ หากจำเป็นต้องลิ้งค์ไฟล์จากภายนอก ก็พยายามใช้ให้น้อยที่สุด
4. จัดลำดับการโหลดของข้อมูล
ควรเขียนให้มีการโหลดเนื้อหาของหน้านั้นๆก่อน (เนื้อหา, css, script ที่จำเป็นต่อการแสดงผล) ส่วนของพวก DHTML ที่ปกติต้องรอหน้านั้นโหลดจนครบแล้วให้ทำงาน ก็ควรจะนำไปไว้ที่ท้ายสุดของการโหลด
5. ลดการใช้ inline scripts
การใช้ inline scripts อาจทำให้การแสดงผลต้องยืดเยื้อออกไปมากได้ เพราะตัว browser ต้องมีการคิดคำนวณดูว่าสคริปต์ที่ใส่เข้าไปนั้น มีผลกับการแสดงผลหรือไม่ ดังนั้นควรพยายามลดการใช้ inline scripts และลดการใช้ document.write() เพื่อแสดงผลข้อมูล จะช่วยให้สามารถแสดงผลหน้านั้นๆได้เร็วขึ้น
6. แยกเนื้อหาออกเป็นส่วนเล็กๆ
ลดการใช้ nested table,div หรือการซ้อนแท็กหลายๆชั้น เช่น
....
แต่เปลี่ยนมาใช้เป็น
....
....
....
แทน
7. ระบุขนาดของรูป และตารางลงไปด้วย
การระบุขนาดของรูปและตารางลงไปตั้งแต่แรก จะช่วยให้ตัวแสดงผลของ browser สามารถแสดงผลได้เร็วขึ้น เนื่องจากจะสามารถเผื่อพื้นที่ไว้ให้คอนเทนต์นั้นๆได้เลย ดังนั้นแท็ก img ควรมีการกำหนด height และ width ด้วย และแท็ก table ก็ควรใช้ css table-layout:fixed ไว้ และกำหนดความกว้างของแต่ละคอลัมน์ไว้ด้วยในแท็ก COL หรือ COLGROUP
ตัวอย่าง STRUCTURE ของ HTML
HTML
HEAD
LINK (สำหรับไฟล์ CSS)
SCRIPT (สคริปต์ที่จำเป็นต่อการโหลดหน้านั้นๆ ที่ไม่ใช่ DHTML ต่างๆ)
BODY
แยกข้อมูลเป็นส่วนย่อยๆ จะช่วยให้สามารถแสดงผลได้โดย ไม่ต้องรอให้โหลดเสร็จทั้งหน้า
SCRIPT (สคริปต์ DHTML ต่างๆ เช่น menu ที่ปกติต้องรอให้เพจโหลดเสร็จก่อน แล้วจึงทำงานได้ ควรนำมาใส่ไว้ที่ด้านท้ายของหน้านั้นๆ ไม่ควรนำไปใส่ไว้ส่วน HEAD เพราะจะเสียเวลาโหลด ทำให้แสดงผลช้าลงไปอีก)
เครดิต จากคุณ Dr.Yes แห่งพันทิพดอทคอม
ต้นฉบับ จากhttp://developer.mozilla.org/
