Tôi lại với chủ đề optimize cho website của mình sau bài viết 3 tuyệt chiêu tối ưu hóa tốc độ tải trang với .htaccess. Trong bài viết này, tôi cố gắng trình bày thêm một số kinh nghiệm trong việc tối ưu hóa frontend website với bạn đọc. Hi vọng nó sẽ tiếp tục giúp ích cho bạn.
Phụ mục
CSS Sprites và gom nhiều file stylesheet và javascript vào chung một file
Tại sao chúng ta cần gom lại chung một file ? Việc chia nhiều file có phải giúp chúng ta quản lý được code dễ dàng hơn theo chứng năng mà bạn gán cho từng file ?
Bình thường, với việc chia nhỏ nhiều file có lẽ là giúp chúng ta dễ quản lý file hơn. Đúng ! Kết luận đó hoàn toàn đúng. Nhưng điều này cũng làm cho số lượng request của chúng ta lên server nhiều hơn vì server phải xử lý việc cho phép tải xuống nhiều hơn.
Bình thường, để tải các icon cho website bạn sẽ sử dụng riêng từng file ảnh và gọi request lên máy chủ để xin phép tải xuống các file tương ứng. Như vậy, số lượng request gửi lên máy chủ cũng sẽ tăng theo, tương tự như vậy, chúng ta cũng tốn nhiều request gửi lên máy chủ hơn khi gọi nhiều file css, file javascript riêng biệt.
Giải pháp để giảm thiểu số lượng request gửi lên server trong trường hợp này là bạn có thể gom những file stylesheet, những file javascript riêng lẻ thành một file lớn rồi gửi một request lên server để tải về.
Đối với hình ảnh, bạn cũng có thể xử lý tương tự. Bằng việc kết hợp nhiều ảnh nhỏ thành một ảnh lớn, bạn có thể sử dụng CSS để chọn vị trí hiển thị tương ứng của hình. Cách làm này được nhiều website lớn thực hiện. Bạn có thể xem thêm bài hướng dẫn này để hiểu chi tiết.
Giảm request với module mod_concat
Trong một số trường hợp bạn không thể kết hợp được tất cả các file được mà vẫn phải tải từng file. Để có thể giảm được số lượng request gửi lên máy chủ bạn có thể sử dụng mod mod_concat đượ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.Tiếp theo, chúng ta xem tiếp khi bật module này lên số lượng request sẽ giảm xuống như thế nào:
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ể.Bạn cần cài đặt mod mod_concat cho Apache server, cách cài đặt bạn có thể tìm và download trên Internet để lấy phiên bản mới nhất.
Cách sử dụng module này như sau
Với CSS
[code language=”html”] <link rel="stylesheet" type="text/css" media="screen" href="http://example.com/static/??file1.css,file2.css" />[/code]
Với Javascript
[code language=”html”] <script type="text/javascript" src="http://example.com/static/??file_1.js,file_2.js"></script>[/code]
CSS on top – JS on bottom
Nói một cách đơn giản: bạn hãy đặt các file CSS trên phần head, còn các file javascript hãy đặt nó ở cuối trang.
Tại sao ?
Có một lý giải được post trên blog của tmquang6805 như sau:
Việc render HTML sẽ được thực hiện tuần tự từ trên xuống, nếu chúng ta đã khai báo các style sheet ngay trên đầu, thì việc hiển thị nội dung tới đâu nó sẽ map với các class của CSS tương ứng và render ngay. Nếu chúng ta đặt CSS ngay cuối trang web (gần thẻ