ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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/



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
องค์ประกอบพื้นฐานของการจัดทำ Extension ใน phpBB 3 ส่วนของ admin
โดย Ittichai_chupol พฤ 20 ก.พ. 2020 1:56 pm บอร์ด PHP Knowledge
0
16
พฤ 20 ก.พ. 2020 1:56 pm โดย Ittichai_chupol
ประทานโทษ
โดย noppadonsk พฤ 20 ก.พ. 2020 12:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
พฤ 20 ก.พ. 2020 12:54 pm โดย noppadonsk
มาแล้ว Plugin System MooZiiCart Auto Close สำหรับตั้งเวลาเปิดปิดระบบการสั่งซื้อสินค้าออนไลน์
โดย prmindphp พ 19 ก.พ. 2020 6:40 pm บอร์ด MindPHP News & Feedback
0
25
พ 19 ก.พ. 2020 6:40 pm โดย prmindphp
ถ้าคุณต้องเลือก
โดย noppadonsk พ 19 ก.พ. 2020 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
พ 19 ก.พ. 2020 11:22 am โดย noppadonsk
อยากจะทราบว่าวิธีการแสดงค่าอาเรย์แต่ล่ะค่าครับ
โดย waterwelon พ 19 ก.พ. 2020 11:04 am บอร์ด Programming - PHP
2
33
พ 19 ก.พ. 2020 11:58 am โดย thatsawan
คลายเครียด
โดย noppadonsk อ 18 ก.พ. 2020 2:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
30
อ 18 ก.พ. 2020 2:50 pm โดย noppadonsk
7 สิ่งที่ต้องปรับปรุงเพื่อลดค่า Bounce Rate บนหน้าเว็บไซต์
โดย phasamon อ 18 ก.พ. 2020 10:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
อ 18 ก.พ. 2020 10:22 am โดย phasamon
อยากให้ธุรกิจเป็นที่รู้จักบนโลกออนไลน์ ลองหาบริษัทรับทำ SEO ดูซิ !
โดย totheworld จ 17 ก.พ. 2020 3:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
62
จ 17 ก.พ. 2020 3:34 pm โดย totheworld
สี่เหตุผลที่ควรปรับปรุงเว็บไซต์
โดย phasamon จ 17 ก.พ. 2020 2:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
จ 17 ก.พ. 2020 2:05 pm โดย phasamon
อย่าได้พลาดเชียว
โดย noppadonsk จ 17 ก.พ. 2020 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
จ 17 ก.พ. 2020 10:52 am โดย noppadonsk
วิธีการแก้ไขปํญหา undefined index กรณีกำหนดเงือนไขเทียบค่าอาร์เรย์
โดย Ittichai_chupol ศ 14 ก.พ. 2020 5:50 pm บอร์ด PHP Knowledge
0
75
ศ 14 ก.พ. 2020 5:50 pm โดย Ittichai_chupol
เรื่องน่าเศร้า
โดย noppadonsk ศ 14 ก.พ. 2020 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
69
ศ 14 ก.พ. 2020 10:19 am โดย noppadonsk
อยากทรบวิธีจัดการไม่ให้สมาชิกที่อยู่ในกลุ่มที่กำหนดมาส่องโพสต์ของผู้อื่นได้
โดย Ittichai_chupol พฤ 13 ก.พ. 2020 3:22 pm บอร์ด Programming - PHP
3
100
พฤ 13 ก.พ. 2020 5:31 pm โดย thatsawan
กลับไปเริ่มใหม่
โดย noppadonsk พฤ 13 ก.พ. 2020 10:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
58
พฤ 13 ก.พ. 2020 10:57 am โดย noppadonsk
อยากทราบการเอาเลขมาคุณในช่อง 10อัน แล้วมาแล้วผลข้างล่างครับ
โดย comopal พ 12 ก.พ. 2020 6:49 pm บอร์ด Programming - PHP
1
126
พฤ 13 ก.พ. 2020 9:39 am โดย LEG
ต้องรีบเดี๋ยวลืม
โดย noppadonsk พ 12 ก.พ. 2020 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
55
พ 12 ก.พ. 2020 10:56 am โดย noppadonsk
วิธีการเลือกงาน
โดย jataz2 พ 12 ก.พ. 2020 9:47 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
70
พ 12 ก.พ. 2020 9:47 am โดย jataz2
วิธีการไปสัมภาษณ์งาน
โดย jataz2 พ 12 ก.พ. 2020 9:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
63
พ 12 ก.พ. 2020 9:25 am โดย jataz2
วิธีการ insert ข้อมูลในขั้นตอนติดตั้ง Extension phpbb
โดย Ittichai_chupol อ 11 ก.พ. 2020 5:55 pm บอร์ด PHP Knowledge
1
98
อ 11 ก.พ. 2020 6:01 pm โดย thatsawan
visual studio 2008 crystal reports viewer มี ในToolbox แต่ใช้งานไม่ได้
โดย d.direk อ 11 ก.พ. 2020 2:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
105
อ 11 ก.พ. 2020 2:33 pm โดย d.direk