เทคนิคการทำให้เว็บโหลดเร็วขึ้น

[M008]

1.ตั้งค่าความกว้างและความสูงของรูปภาพ และต้องตั้งค่าให้ถูกต้อง
การตั้งค่าความกว้างและความสูงของรูปภาพ ให้ถูกต้องจะช่วย ทำให้เว็บโหลดเร็ว ด้วยคำสั่ง width="" height="" และก็ไม่ควรนำรูปขนาดอื่นๆ มาใส่ width, height ให้ได้ขนาดที่เราต้องการ เราควรจะ resize รูปภาพตามขนาดที่เราต้องใช้และระบุขนาดให้ถูกต้อง ยกเว้นภาพที่เรียกใช้ ใน css

2.เลือกนามสกุลรูปภาพและบันทึกรูปภาพใช้สำหรับเว็บ
รูปภาพมีหลายนามสกุล แต่ละนามสกุลก็จะมีข้อดีของแต่ละตัวแตกต่างกัน เช่น ไฟล์นามสกุล png สามารถทำให้มองทะลุไปยังข้างหลังได้ เหมาะแก่การนำมาทำเมนู ปุ่มกดต่างๆ รูปภาพไอคอน แต่ถ้าหากเป็นรูปภาพที่มีขนาดใหญ่ รูปคน รูปวิวต่างๆ ควรจะใช้รูปภาพที่มีนามสกุล jpg เพราะไฟล์นามสกุลนี้มีขนาดเล็ก เป็นต้น การบันทึกภาพก็มีส่วนสำคัญ เราควรบันทึกภาพให้มีคุณภาพเหมาะสมกับรายละเอียดของภาพ อาจจะปรับภาพให้เล็กลง เพื่อคุณภาพเท่าเดิม และจะทำให้หน้าเว็บโหลดเร็วขึ้นอีกด้วย

3.แสดงรูปภาพขนาดเล็กด้วย CSS Image Sprites
หากเราต้องการแสดงรูปภาพ ไอคอน หรือรูปภาพรายการต่างๆ ที่เป็นรูปขนาดเล็กหลายๆ รูป หากเรียกใช้แบบปกติทั่วไป เวลาโหลดหน้าเว็บเกิดการร้องขอไปที่เซพเวอร์จำนวนมาก ทำให้ใช้ทรัพยากรเซพเวอร์จำนวนมาก เราควรนำรูปขนาดเล็กมารวมกันเป็นรูปเดียว แล้วใช้คำสั่ง css กำหนดตำแหน่งรูปภาพที่ต้องการแสดง เป็นเทคนิคที่ทำให้เว็บโหลดเร็วขึ้นอย่างมาก เช่น เรามีรายการ ต้องการแสดงในแท็ก ul > li เรากำหนดให้แท็ก <ul class="list"> ใน css สั่งให้ .list li{ background-image:รูปภาพ; } ในแท็ก <li class="row_a"> ใน css สั่งว่า .row_a{ background-position: 32px -32px; } ในแท็ก li แต่ละตัวก็ใช้คลาสที่ตั้งค่า background-position ใว้ต่างกัน รูปที่ออกมาก็จะแสดงไม่เหมือนกัน ตามรูปแบบรูปภาพและการเล็งตำแหน่งที่กำหนดใว้ นี่เป็นเพียงแนวคิดการทำ CSS Image Sprites เพื่อเป็นการเพิ่มประสิทธิภาพในการทำงานของหน้าเว็บ

4.ไม่ออกแบบหน้าเว็บที่ออกแบบด้วย Table
table จุดประสงค์ของ แท็กนี้คือการแสดงรายการข้อมูล แต่ช่วงหลายปีก่อนเป็นที่นิยมในการใช้ออกแบบเลย์เอ้าหน้าเว็บ แต่ table มีข้อเสียคือทำให้หน้าเว็บไซต์มีขนาดใหญ่ และประมวลผลช้า ถ้าเราจะออกแบบหน้าเว็บควรใช้แท็ก div เป็นดีที่สุด ควรศึกษารายละเอียดแท็กต่างๆ ให้ดีและใช้ให้ถูกต้อง นอกจากทำให้เว็บโหลดเร็วแล้วยังมีคุณภาพและยังง่ายต่อการ ทำให้ติดอันดับสูงๆ ใน search engine ด้วย

5.พยายามไม่ใช้ แท็ก <style> ในหน้าเว็บ
คนที่ทำเว็บไซต์แน่นอนจะต้องออกแบบหน้าเว็บด้วย css แต่ถ้าหากเราวางโค้ดนี้จำนวนมากใว้ในหน้าเว็บจะทำให้หน้าเว็บของเราโหลดช้าลง เพราะตัวเว็บต้องรอข้อมูลในแท็ก head โหลดให้เสร็จก่อน ถึงจะโหลดส่วนของ body หากเรามี code ไฟล์ css จำนวนมากควรจะแยกออกเป็นไฟล์ css ต่างหาก และไม่ควรมีไฟล์ css แยกย่อยหลายๆ ไฟล์ ควรจะรวมกันเป็นไฟล์เดียว ส่วนการวางแท็ก style ในส่วนของ body เป็นเรื่องที่ไม่ควรอย่างมาก ยิ่งเป็นการหน่วงหน้าเว็บลงไปอีก และ browser อย่าง ie บางครั้งยังไม่ยอมอ่านค่า css อยู่ในแท็ก style ในแท็ก body อีกด้วย หากจำเป็นต้องใส่ค่าแสดงผลให้แท็กควรจะใส่แบบนี้ <div style="width:100px;">

6.บีบอัดไฟล์ javascript และ css ให้มีขนาดเล็ก
เราสามารถลดขนาดของไฟล์ javascript หรือ css ลงได้โดยการเว้นช่องว่างที่ไม่จำเป็นของโค้ดออกไป เวลาเราเขียนเว็บขึ้นมา เราจะเว้นช่องว่างใว้ และขึ้นบรรทัดใหม่ เพื่อความเข้าใจใน code ของคนเขียน เมื่อเราจะนำมาใช้งานจริงๆ แล้ว เราควรจะบีบอัดไฟล์ก่อนที่จะเอามาใช้งานจริง เพื่อลดขนาดของไฟล์ที่เกินจำเป็นลงได้

7.พยายามอย่าให้มีลิ้งขาดในเว็บ
หลังจากที่เราทำเว็บเมื่อใช้งานไปเรื่อยๆ อาจจะมีรูปภาพหรือไฟล์ อย่าง javascript,css เปลี่ยนที่อยู่หรือถูกลบไป ทำให้เมื่อหน้าเว็บของเรา เมื่อส่งคำร้องขอไฟล์แต่ไม่ได้รับการตอบกลับจะทำให้หน้าเว็บของเราต้องรอจนกว่าจะได้รับการตอบกลับว่าไม่มีไฟล์ หรือ หมดเวลา (timeout) ไปเอง ส่วนมากมักเจอในรูปภาพ นอกจากจะทำให้เว็บโหลดช้า และหน้าเว็บยังไม่สวยอีกด้วย