Hướng dẫn Optimize front-end để nâng cao tốc độ load webpage

Phần 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 ^^'

Phần 2

Trong phần 1 của loạt bài "Optimize front-end to improve performance" mình đã giới thiệu tới các bạn 2 kỹ thuật nhưng cả 2 kỹ thuật đó đều nhằm một mục đích là làm giảm số lượng request lên server. Số lượng request server càng ít mà vẫn đáp ứng đủ nhu cầu website thì sẽ cải thiện rất đáng kể về tốc độ thực thi website đó.

Trong phần 2 này, mình cũng giới thiệu thêm 1 kỹ thuật và mục đích cũng là làm giảm số lượng request lên server. Trong phần 1, việc kết nối các file css, hay file js là chúng ta làm một cách thủ công. Nhưng đôi khi sẽ xảy ra trường hợp tại trang A.php tôi cùng dùng a.js, b.js nhưng tại trang B.php tôi lại muốn dùng a.js, c.js. Nên việc chúng ta dùng thủ công kết nối các file này sẽ rất khó khăn hoặc là chịu sự chồng chéo. Điều này dễ bị dẫn tới tình trạng không cải thiện được mà còn thêm xấu đi. Dưới đây là kỹ thuật kết nối các file này một cách tự động.

mod_concat

Đây là một module của Apache server được phát triển bởi Ian Holsman. Nhiệm vụ của module này là kết nối các file css, js lại thành một request duy nhất. Chúng ta cùng xem các kết quả thí nghiệm cho việc bật/tắt module concat này với các ví dụ sau.

Kết quả 1: Không dùng module concat của Apache server. Mất tới 16 request.

Kết quả 2: Dùng module concat của Apache server. Mất 6 request. Như vậy chúng ta thấy rõ số lượng request đã giảm đi rất đáng kể, và performance sẽ được cải thiện cũng rất đáng kể.

Sử dụng mod_concat

Sau khi chúng ta cài đặt thành công mod_concat cho Apache server, chúng ta sử dụng công thức sau để kết nối các file css, js lại thành một request.

Đối với CSS

<link rel="stylesheet" type="text/css" media="screen" href="http://example.com/static/??file1.css,file2.css" />

Đối với JS

<script type="text/javascript" src="http://example.com/static/??file_1.js,file_2.js"></script>

Hiện tại mod_concat đã phát triển một phiên bản cho lighttpd server. Mọi người có thể tham khảo thêm link sau: http://code.google.com/p/lighttpd-mod-concat/