จริงๆ แล้วการเพิ่มความเร็วให้หน้าเว็บเพจมีหลายวิธี โพสต์นี้จะเน้นไปที่ CSS นะครับ และเพิ่มเรื่องการจัดการรูปภาพให้ด้วยครับ
…………………………………………………….
9 แนวทางเพิ่มความเร็วให้เว็บไซต์ด้วย CSS
…………………………………………………….
1. เขียนโค้ดแบบ Shorthand แน่นอนเมื่อโค้ดสั้นลง การประมวลผลย่อมน้อยลง ส่งผลให้หน้าเว็บโหลดเร็วขึ้น
2. หลีกเลี่ยงการทำ CSS Hacks ให้กับแต่ละบราวเซอร์ เพราะมันเพิ่มขนาดให้กับไฟล์และซับซ้อน
3. ลดขนาดไฟล์ของ CSS ลง เพื่อเพิ่มความเร็วในการโหลด
4. ควรเขียน CSS ใน tag <head>
5. พยายามใช้ external CSS เพียง 1 ไฟล์
6. อย่าใช้การเรียกแบบ @import
7. เอา CSS ที่ไม่ใช้ออกให้หมด อย่าปล่อยทิ้งไว้
8. อย่าเขียน CSS ให้ tag HTML เช่น h1 และ DIV
9. ถ้าเป็นเพียงคำสั่ง CSS เล็กๆ ก็ให้เขียนแบบ inline ได้
………………………………………………………………………………..
4 แนวทางเพิ่มความเร็วให้กับเว็บไซต์ด้วยการจัดการรูปภาพ (Images)
………………………………………………………………………………..
1. นามสกุลรูปภาพ ใช้ JPGs เมื่อภาพมีคุณภาพ ความละเอียดสูง
ใช้ PNG กับรูปภาพที่เป็นไอคอน,โลโก้,ข้อความ,สัญลักษณ์ต่างๆ
ใช้ GIFs สำหรับภาพเล็กๆ ไม่มีรายละเอียดมาก และแน่นอนควรหลีกเลี่ยง BMPs หรือ TIFFs.
2. ขนาดภาพควรเหมาะสม ควรบันทึกรูปภาพให้พอดีกับความกว้างของ Template สร้างรูปภาพในแบบ Responsive โดยกำหนดความกว้างคงที่แต่ความสูงให้กำหนดเป็นแบบ auto
3. การบีบอัดรูปภาพ สำหรับนามสกุล JPGs ให้ใช้การบีบอัดที่ 60-70% และสำหรับหน้าจอแบบ Retina ให้เพิ่มขึ้นเป็น 150-200%
4. แน่นอนควรใช้รูปภาพให้น้อยที่สุดเท่าที่จะเป็นไปได้