ให้เรตสมาชิก: 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/



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แสดงสินค้าที่ขายได้ล่าสุด ด้วย Module Latest Sold Products ใน MooZiiCart
โดย bolue จ 19 ต.ค. 2020 6:53 pm บอร์ด MindPHP News & Feedback
0
5
จ 19 ต.ค. 2020 6:53 pm โดย bolue
ติดปัญหาเรื่อง การทำปุ่ม ค้นหา ที่มีการเชื่อมความสัมพันธ์ Laravel Framework
โดย makup จ 19 ต.ค. 2020 6:23 pm บอร์ด Programming - PHP
0
7
จ 19 ต.ค. 2020 6:23 pm โดย makup
วิธีการกำหนด Routing ใน Laravel Framework
โดย makup จ 19 ต.ค. 2020 7:15 am บอร์ด PHP Knowledge
0
19
จ 19 ต.ค. 2020 7:15 am โดย makup
วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework
โดย makup อ 18 ต.ค. 2020 6:21 pm บอร์ด PHP Knowledge
0
24
อ 18 ต.ค. 2020 6:21 pm โดย makup
เจอปัญหา ในฐาน Joomla Out of resources when opening file '/tmp/#sql_7059_0.MAD' (Errcode: 24 "Too many open files")
โดย mindphp อ 18 ต.ค. 2020 5:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
12
อ 18 ต.ค. 2020 5:41 pm โดย mindphp
Re: Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ(PHP)
โดย kimmyth ศ 16 ต.ค. 2020 11:26 pm บอร์ด Programming - PHP
1
50
ส 17 ต.ค. 2020 10:02 am โดย mindphp
Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ
โดย kimmyth ศ 16 ต.ค. 2020 11:22 pm บอร์ด Programming - PHP
0
32
ศ 16 ต.ค. 2020 11:22 pm โดย kimmyth
อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ
โดย makup ศ 16 ต.ค. 2020 7:25 pm บอร์ด Programming - PHP
2
41
ศ 16 ต.ค. 2020 7:48 pm โดย makup
การคำนวณต้นทุนสินค้า แบบ FIFO และ Weighted Average
โดย bolue ศ 16 ต.ค. 2020 6:53 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
45
ศ 16 ต.ค. 2020 6:53 pm โดย bolue
วิธีการเชื่อมความสัมพันธ์ข้อมูล one to many บน Laravel Framework
โดย makup ศ 16 ต.ค. 2020 6:40 pm บอร์ด PHP Knowledge
0
40
ศ 16 ต.ค. 2020 6:40 pm โดย makup
Function Validate Laravel Framework
โดย makup ศ 16 ต.ค. 2020 4:22 pm บอร์ด PHP Knowledge
0
42
ศ 16 ต.ค. 2020 4:22 pm โดย makup
จะอัพเกรด Joomla 1.5 เป็น Joomla 3 ควรใช้ php อะไร
โดย Anonymous พฤ 15 ต.ค. 2020 10:13 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
43
ศ 16 ต.ค. 2020 12:48 am โดย mindphp
ตัวอย่างการใช้ gettype , var_dump
โดย makup พฤ 15 ต.ค. 2020 12:36 pm บอร์ด PHP Knowledge
1
39
พฤ 15 ต.ค. 2020 12:41 pm โดย thatsawan
วิธีการใช้ Function each
โดย makup พฤ 15 ต.ค. 2020 11:58 am บอร์ด PHP Knowledge
2
44
พฤ 15 ต.ค. 2020 7:27 pm โดย makup
การใช้ Function pop และ push
โดย makup พฤ 15 ต.ค. 2020 11:25 am บอร์ด PHP Knowledge
0
30
พฤ 15 ต.ค. 2020 11:25 am โดย makup
สอบถามการทำเมนูหลายภาษาบน joomla ค่ะ
โดย bolue พ 14 ต.ค. 2020 10:25 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
12
122
พ 14 ต.ค. 2020 2:16 pm โดย bolue
วิธีการใช้งาน Template engine ของ Laravel Framework
โดย makup พ 14 ต.ค. 2020 9:15 am บอร์ด PHP Knowledge
0
63
พ 14 ต.ค. 2020 9:15 am โดย makup
การติดตั้งโปรแกรม xampp ผ่าน Command terminal ในนาม root
โดย makup อ 13 ต.ค. 2020 11:03 am บอร์ด Linux - Web Server
0
55
อ 13 ต.ค. 2020 11:03 am โดย makup
วิธีแก้ ติดปัญหา you are not owner so cannot change permissions
โดย makup อ 13 ต.ค. 2020 10:13 am บอร์ด Linux - Web Server
0
53
อ 13 ต.ค. 2020 10:13 am โดย makup
Influencer Marketing คือ ? มีกี่ประเภท? บทความนี้มีคำตอบ
โดย ploypola จ 12 ต.ค. 2020 6:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
61
จ 12 ต.ค. 2020 6:30 pm โดย ploypola