13 ข้อ แนวทางการเพิ่มความเร็ว (Speed) ให้กับหน้าเว็บไซต์

จริงๆ แล้วการเพิ่มความเร็วให้หน้าเว็บเพจมีหลายวิธี โพสต์นี้จะเน้นไปที่ 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. แน่นอนควรใช้รูปภาพให้น้อยที่สุดเท่าที่จะเป็นไปได้

12 ข้อแนะนำการเขียน CSS ที่ดีสำหรับมือใหม่

1. ไม่เขียนคำสั่งให้ซ้ำซ้อน ควรแยกคำสั่งให้อ่านง่ายในแต่ละบรรทัด

2. เขียนและตั้งชื่อให้สื่อความหมาย เช่น การตั้งชื่อคลาสต่างๆให้ดูแล้วรู้เลยว่าเอาไว้ทำอะไร

3. ใช้การ Reset CSS เพราะ reset css จะช่วยลดความไม่เข้ากันของแต่ละ Browsers ได้

4. ในไฟล์ css ควรออกแบบจากบนลงล่างให้สอดคล้องกับโครงสร้างหน้าเว็บที่เป็น HTML

5. ควรรวม หรือจัดกลุ่ม elements html ที่มีค่าเหมือนๆกันไว้ด้วยกัน เช่น

6. ควรออกแบบและเขียนโครงสร้าง HTML ก่อน ค่อยสร้างไฟล์ CSS ทีหลัง

7. ใช้ DOCTYPE ของเอกสาร HTML ให้ถูกต้อง เช่น HTML5 จะเป็น

8. ควรใช้การเขียนแบบ Shorthand เพื่อให้โค้ดสั้นลง
เช่น

9. ใส่ comment หรือหมายเหตุด้วย เพื่อตัวเราเองหรือคนอื่นมาพัฒนาต่อจะได้เข้าใจได้ง่าย

10. ใช้ CSS compressors เพื่อช่วยลดขนาดไฟล์ให้น้อยลง ทำให้โหลดได้เร็วขึ้น

11. ถ้าอยากจัดกึ่งกลางให้ layouts ควรใช้

12. ลองใช้ CSS Framework เพื่อลดระยะเวลาพัฒนา จะได้เอาเวลาไปคิดไอเดียอื่น