Optimize front-end to improve performance - Part 1

Loạt bài viết tiếp theo của blog cá nhân, mình sẽ giới thiệu tới mọi người kỹ thuật optimize front-end nhằm nâng cao tốc độ cho việc load webpage. Nếu như website bạn có thể áp dụng được tất cả những kỹ thuật bên dưới, bạn sẽ thấy tốc độ được cải thiện một cách rõ rệt và đáng kể.


CSS Sprites
Kỹ thuật này nhằm gom nhiều file hình nhỏ vào cùng 1 file hình lớn nhằm giảm số lần request lên server, mặt khác cũng làm cho chúng ta dễ quản lý hơn và linh động hơn trong việc xử dụng các file hình này. Ví dụ ban đầu bạn có 6 hình riêng lẻ, bạn sẽ tốn 6 request lên server để lấy 6 hình này. Nhưng khi bạn gom thành 1 hình, bạn chỉ còn tốn 1 lần request để lấy đủ 6 hình. Vấn đề còn lại là chúng ta sẽ dùng CSS để chỉnh vị trí hiển thị hình nhỏ ra cho đúng. Và cách tốt nhất để làm tốt vấn đề này là nên gom thành từng chủ đề. Quan trọng là đừng gom thành 1 hình quá lớn, nếu không sẽ bị phản tác dụng và còn chậm hơn.

Gom nhiều file JS, CSS thành một file
Cũng như CSS Sprites, kỹ thuật này cũng nhằm giảm thiểu số lượng request lên server để lấy các file JS, CSS về. Chúng ta cũng nên gom thành từng chủ để, từng thể loại để dễ quản lý và dễ tái sử dụng cho nhiều nơi. Và dĩ nhiên, khi gom thì nhiều file JS thành 1 file, nhiều file CSS thành 1 file, chứ đừng ai gom CSS và JS vào chung 1 file là khỏi chạy luôn ^^'

---

Optimize front-end to improve performance - Part 2
Optimize front-end to improve performance - Part 3 Optimize front-end to improve performance - Part 4