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



กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีใช้โปรแกรม Weka ในการทำนายข้อมูล
โดย Grammanano ส 07 ธ.ค. 2019 6:54 pm บอร์ด Share Knowledge
0
2
ส 07 ธ.ค. 2019 6:54 pm โดย Grammanano
พื้นฐาน RML เพื่อทำใบปริ้นท์ในระบบ ERP
โดย Grammanano ส 07 ธ.ค. 2019 4:58 pm บอร์ด M098 - อนงค์นาท ไฝขาว
1
6
ส 07 ธ.ค. 2019 5:47 pm โดย Grammanano
แนะนำฟีเจอร์ Coupons ของ MooZiiCart ตัวช่วย ทำ คูปองส่วนลด ในเว็บขายของ สำหรับร้านค้าออนไลน์ ที่จะกระตุ้นยอดขายบางช่วง
โดย prmindphp ส 07 ธ.ค. 2019 3:56 pm บอร์ด MindPHP News & Feedback
0
10
ส 07 ธ.ค. 2019 3:56 pm โดย prmindphp
ใน ปล๊กอิน เราสามารถนำข้อความในไฟล์ภาษาออกมาแสดงได้อย่างไร ครับ
โดย jamepiyawat ส 07 ธ.ค. 2019 2:21 pm บอร์ด Joomla Development
0
9
ส 07 ธ.ค. 2019 2:21 pm โดย jamepiyawat
Block IP เข้าเว็บ เซิร์ฟเวอร์ เป็นข่วง ด้วย .htaccess
โดย mindphp ส 07 ธ.ค. 2019 2:12 pm บอร์ด Linux - Web Server
1
9
ส 07 ธ.ค. 2019 3:37 pm โดย mindphp
ภาพประกอบ Extensions
โดย numtan5839 ส 07 ธ.ค. 2019 11:19 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
2
ส 07 ธ.ค. 2019 11:19 am โดย numtan5839
งานประจำวันที่ 7 ธันวาคม 2562
โดย numtan5839 ส 07 ธ.ค. 2019 10:15 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
8
ส 07 ธ.ค. 2019 7:02 pm โดย numtan5839
งานประจำวันที่ 7 ธันวาคม 2562
โดย Grammanano ส 07 ธ.ค. 2019 10:05 am บอร์ด M098 - อนงค์นาท ไฝขาว
3
16
ส 07 ธ.ค. 2019 7:33 pm โดย mindphp
คำว่า extension ผิดค่ะ
โดย numtan5839 ศ 06 ธ.ค. 2019 8:17 pm บอร์ด MindPHP News & Feedback
1
14
ส 07 ธ.ค. 2019 1:20 am โดย mindphp
ทำอย่างไรให้ google slide นั้นสามารถแสดงหน้าที่เรากำหนดได้ ผ่าน url ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 5:23 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
19
ส 07 ธ.ค. 2019 5:42 pm โดย numtan5839
การทำนายข้อมูลแบบ Dicision Tree ด้วยโปรแกรม Weka
โดย Grammanano ศ 06 ธ.ค. 2019 5:16 pm บอร์ด Share Knowledge
0
10
ศ 06 ธ.ค. 2019 5:16 pm โดย Grammanano
ทำไม แปลงวันเดือนปีเป็นวันที่ ตามระบบของ Joomla แล้ววันถึงถอยไปวันหนึ่งครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 3:23 pm บอร์ด Joomla Development
1
15
ศ 06 ธ.ค. 2019 4:51 pm โดย thatsawan
คำสั่งพื้นฐานในการใช้ Matlab เพื่อการทำ Image Processing
โดย Grammanano ศ 06 ธ.ค. 2019 3:20 pm บอร์ด Share Knowledge
0
11
ศ 06 ธ.ค. 2019 3:20 pm โดย Grammanano
Introducing the Module Weather Forcecast.
โดย numtan5839 ศ 06 ธ.ค. 2019 2:34 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
13
ส 07 ธ.ค. 2019 3:25 pm โดย numtan5839
เขียนบทความ แต่พอ save แล้วเนื้อหาไม่แสดง
โดย numtan5839 ศ 06 ธ.ค. 2019 2:30 pm บอร์ด MindPHP News & Feedback
0
11
ศ 06 ธ.ค. 2019 2:30 pm โดย numtan5839
จะทำอย่างไรให้ดึงข้อความ 10 ตัวท้ายได้ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 11:39 am บอร์ด Programming - PHP
3
20
ศ 06 ธ.ค. 2019 2:04 pm โดย jamepiyawat
จะทำอย่างไรให้ Plugin Content Change Log แสดงข้อความด้านบนได้ ครับ
โดย jamepiyawat ศ 06 ธ.ค. 2019 11:03 am บอร์ด Joomla Development
1
17
ศ 06 ธ.ค. 2019 7:42 pm โดย thatsawan
งานประจำวันที่ 6 ธันวาคม 2562
โดย Grammanano ศ 06 ธ.ค. 2019 9:43 am บอร์ด M098 - อนงค์นาท ไฝขาว
5
33
ส 07 ธ.ค. 2019 6:59 pm โดย Grammanano
งานประจำวันที่ 6 ธันวาคม 2562
โดย numtan5839 ศ 06 ธ.ค. 2019 9:34 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
10
33
ศ 06 ธ.ค. 2019 7:42 pm โดย numtan5839
เปิดตัวเว็บบอร์ด รูปแบบใหม่ ของเรา มีอะไรมาใหม่ ลองมาดูกัน เราใช้ phpBB 3.2 นะ
โดย mindphp พ 04 ธ.ค. 2019 7:44 pm บอร์ด MindPHP News & Feedback
1
34
พ 04 ธ.ค. 2019 8:03 pm โดย thatsawan