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



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - ทดลองทำเอกสารยื่นแบบผ่านเน็ตแล้ว ไฟล์ txt ใช้ไม่ได้
โดย natthanit.r2538 พ 01 ก.ค. 2020 4:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
3
21
พ 01 ก.ค. 2020 5:41 pm โดย natthanit.r2538
สรุปการยื่นแบบภาษีออนไลน์
โดย natthanit.r2538 อ 30 มิ.ย. 2020 5:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
20
อ 30 มิ.ย. 2020 7:18 pm โดย natthanit.r2538
หลักการคิดค่าคอมมิชชั่น และวิธีการคิด รายได้จาก Commission
โดย natthanit.r2538 อ 30 มิ.ย. 2020 11:31 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
23
อ 30 มิ.ย. 2020 11:31 am โดย natthanit.r2538
MJUpgrade อัพเกรดไม่สำเร็จ Error: zip file not found
โดย chaiyaphat ศ 26 มิ.ย. 2020 11:01 am บอร์ด Joomla Development
3
470
ศ 26 มิ.ย. 2020 1:24 pm โดย mindphp
ตั้งค่าใช้ Email ใน phpbb เเล้ว ไม่ทำงาน
โดย thatsawan พฤ 25 มิ.ย. 2020 5:37 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
5
61
ส 27 มิ.ย. 2020 4:43 pm โดย thatsawan
เจอปัญหาตอนทำรายการ Omise เป็นบางครั้ง Error Uncaught OmiseInvalidChargeException
โดย thatsawan พฤ 25 มิ.ย. 2020 3:56 pm บอร์ด Programming - PHP
2
44
จ 29 มิ.ย. 2020 5:29 pm โดย thatsawan
ต้องการจะสร้างไฟล์ HTML เเต่นำค่า php ไป HTML โดย Twig เขียนใน phpbb จะทำยังไงคะ
โดย thatsawan พ 24 มิ.ย. 2020 5:45 pm บอร์ด Programming - PHP
3
52
พฤ 25 มิ.ย. 2020 3:49 pm โดย Sirayu
ถ้าเราต้องการแสดงค่าตอน onchange ใน option ที่มี value มากกว่า 1
โดย thatsawan อ 23 มิ.ย. 2020 12:51 pm บอร์ด JavaScript & Jquery Ajax
2
93
อ 23 มิ.ย. 2020 3:01 pm โดย thatsawan
4 จุดเช็คอิน เกาะล้าน ยอดฮิต
โดย A2d จ 22 มิ.ย. 2020 10:44 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
52
ส 27 มิ.ย. 2020 12:01 am โดย A2d
ต้องการจะเปลี่ยนคำปุ่ม omise จาก Pay with Omise เป็นคำที่เรากำหนดขึ้นเอง
โดย thatsawan จ 22 มิ.ย. 2020 5:18 pm บอร์ด PHP Knowledge
2
82
จ 22 มิ.ย. 2020 5:39 pm โดย thatsawan
สาเหตุที่เด็กทารกแพ้นมวัว คุณแม่จะรับมือปัญหานี้อย่างไรดี
โดย medalezga จ 22 มิ.ย. 2020 1:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
จ 22 มิ.ย. 2020 1:58 pm โดย medalezga
ไม่เข้าใจคำสั่ง preg_replace
โดย profess79 ส 20 มิ.ย. 2020 11:56 am บอร์ด Programming - PHP
1
80
ส 20 มิ.ย. 2020 6:19 pm โดย profess79
วิธีการทำทศนิยม 3 ตำแหน่ง ด้วย python
โดย bolue ศ 19 มิ.ย. 2020 4:49 pm บอร์ด Python Knowledge
0
61
ศ 19 มิ.ย. 2020 4:49 pm โดย bolue
วิธีการ เพิ่มข้อมูล ลงฐานข้อมูล พร้อม รีเทิร์น id กลับมา ด้วยคำสั่ง sql
โดย bolue ศ 19 มิ.ย. 2020 3:25 pm บอร์ด SQL Knowledge
0
530
ศ 19 มิ.ย. 2020 3:25 pm โดย bolue
เจอปัญหา ส่งเมลผิดพลาด : Language string failed to load: from_failed บน phpmailer
โดย mindphp ศ 19 มิ.ย. 2020 3:26 am บอร์ด Programming - PHP
2
1415
ศ 19 มิ.ย. 2020 5:47 pm โดย mindphp
กฎหมายที่ใช้ควบคุมโรค โควิด-19 ฝ่าฝืนได้รับโทษอย่างไรบ้าง?
โดย Decha Thaweeumanjvaroj พฤ 18 มิ.ย. 2020 10:17 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
87
พฤ 18 มิ.ย. 2020 10:17 am โดย Decha Thaweeumanjvaroj
ไม่สามารถ start openerp-server ของ openerp 7 ได้
โดย bolue พฤ 18 มิ.ย. 2020 10:09 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
10
134
ศ 19 มิ.ย. 2020 12:49 pm โดย bolue
ติดตั้ง ERP 7 ไม่ได้ค่ะ
โดย bolue พ 17 มิ.ย. 2020 4:01 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
12
121
ส 27 มิ.ย. 2020 12:47 am โดย mindphp
การ count ตาราง จากการรวมข้อมูล 2 ตารางเข้าด้วยกันด้วยคำสั่ง sql
โดย bolue อ 16 มิ.ย. 2020 5:01 pm บอร์ด SQL Knowledge
0
156
อ 16 มิ.ย. 2020 5:01 pm โดย bolue
การใส่ไวยากรณ์สำหรับความคิดเห็นใน php พื้นฐาน
โดย phennapa อ 16 มิ.ย. 2020 3:28 pm บอร์ด PHP Knowledge
0
39
อ 16 มิ.ย. 2020 3:28 pm โดย phennapa