1. เทคนิคออกแบบเว็บเพจให้
แสดงผลได้รวดเร็ว

2. 1. ลดขนาดไฟล์ HTML โดยกำา จัด
คำา สั่ง
หรือ Tag ที่ไ ม่จ ำา เป็น
• การ Copy เนื้อ หาจากโปรแกรม microsoft
word จะมี tag ที่ไ ม่จ ำา เป็น ติด มาด้ว ย ดัง
นั้น ให้ล บแท็ก ที่ไ ม่เ กี่ย วข้อ งหรือ Copy
เนื้อ หาลงโปรแกรม Notepad ก่อ นแล้ว
ค่อ ยนำา มาวางลง Dreamweaver
• หรือ ใช้ค ำา สั่ง Clean Up HTML และ
Clean Up Word HTML จะกำา จัด Empty
tag(แท็ก ว่า งเปล่า ) , combine nested
Font tag (แท็ก ตัว อัก ษรซำ้า ซ้อ น )ออกไป

3. 2. ใช้ต ัว อัก ษรหรือ ลิง ค์แ บบ HTML
ช่ว ยลดจำา นวนกราฟิก
• พยายามให้จ ำา กัด ขนาดไฟล์
HTML และขนาดกราฟิก และภาพ
เคลือ นไหว
่

4. 3. ใช้ไฟล์กราฟิกให้ถูก
ประเภท
• GIF เหมาะกับรูปที่มสพื้นๆไม่ซับซ้อน
ี ี
เป็นบริเวณกว้าง เช่นโลโก้ ตัวอักษร
ลายเส้น และภาพการ์ตน ู
• JPG เหมาะกับรูปที่มการไล่ระดับสี
ี
อย่างละเอียดและซับซ้อน เช่น รูปถ่าย
ภาพวาด รูปทีมสีหลายๆระดับ การ
่ ี
เลือกใช้ไฟล์ให้ถูกประเภทจะได้รูปทีมี
่
คุณภาพและทำาให้ไฟล์มีขนาดเล็กอีก

5. 4. กำาหนดค่า width and height
ของกราฟิก
• กำาหนดค่า Width และ Height ของ
กราฟิก ใน html เพือให้บราวเซอร์
่
เตรียมพืนทีขนาดตามที่กำาหนดไว้
้ ่
ขณะทีกำาลังดาวน์โหลดกราฟิกนัน
่ ้
บราวเซอร์จะแสดงข้อมูลตัวอักษรก่อน
แล้วค่อยดาวน์โหลดกราฟิกสำาเร็จ
• และกำาหนดค่า alt ของกราฟิกทีเป็น
่
ส่วนของเนวิเกชันจะช่วยให้รู้ว่ารูปนัน
้

6. 5. การกำาหนดค่า lowsrc
และ alt
<img src=“high_quality_picture.jpg”
LOWSCR=“low_quality_picture.jpg”
height=100 widht=100>
<img scr=“hight_quality_pic.jpg”
ALT=“loading picture of Mark (500K)”
height=100 width=100>

7. 6. การนำากราฟิกมาใช้ใหม่ในหน้าอื่น ๆ
(Recycling graphic)
• บราวเซอร์มระบบแคช (cache) จะ
ี
เก็บรวบรวมไฟล์ทเคยดาวน์โหลดมา
ี่
แล้ว เมื่อเปิดหน้าใหม่ทใช้กราฟิกเดิม
ี่
ก็จะเรียกจากแคชมาแสดงได้เร็วขึ้น

8. 7. ใช้ Style Sheet (CSS) ในการ
ออกแบบ
• กำาหนดตัวสไตล์อกษรและองค์
ั
ประกอบต่างๆ และนำาไปใช้ได้กบทุกๆ
ั
หน้า
• ช่วยประหยัดเวลาและลดปริมาณคำาสัง่
เกี่ยวกับรูปแบบต่างๆของภาษา HTML
• ไฟล์มีขนาดเล็กลงกว่าปกติและแสดง
ผลได้รวดเร็วมากขึ้น

9. 8. ตัดแบ่งภาพที่มีขนาดใหญ่ให้เป็น
ภาพชิ้นเล็กๆ
• แบ่งซอยภาพที่มีขนาดใหญ่ให้เป็นภาพชินเล็กๆ
้
โดยใช้ Photoshop

10. 8. ตัดแบ่งภาพที่มีขนาดใหญ่ให้เป็น
ภาพชิ้นเล็กๆ
• แบ่งซอยภาพที่มีขนาดใหญ่ให้เป็นภาพชินเล็กๆ
้
โดยใช้ Photoshop