Optimize front-end to improve performance - Part 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/

---

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