Optimize front-end cho website

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.

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ẻ ) thì trang web sẽ hiển thị một cách “kinh dị” vì thiếu các file định dạng CSS cho tới khi nó load xong hết các thành phần nội dung thì mới hiển thị định dạng. Ấy là chưa kể có những hình được khai báo trong CSS, nó sẽ không được hiển thị và trông trang web rất xấu. Và đôi khi, đối với trình duyệt IE, nó sẽ hiển thị trang web trắng cho đến khi việc render được thực hiện 100% thì nó mới show ra, điều này càng chậm hơn.

Đối với việc tải file JS ở bên dưới được giải thích:

Ngược lại với các file CSS, chúng ta phải đặt các file JS nằm dưới cùng. Lý giải cho điều này, chúng ta cần biết cơ chế request và download của các trình duyệt. Chúng request song song các thành phần của 1 trang web như hình ảnh, flash, CSS… Nhưng đặc biệt khi load các file JS thì chúng lại chỉ load từng file chứ không áp dụng việc load song song. Tại sao lại như vậy. Câu trả lời đó là trong JS, đôi khi chúng ta tạo động các thành phần của trang web, nên nếu request song song nhiều file JS cùng lúc, sẽ không đảm bảo các thành phần phát sinh động được thực hiện đúng thứ tự. Mặc khác, nếu download song song, thì hẳn nhiên file nào nhỏ nhất sẽ xuống trước, nhưng biết đâu file đó có thứ tự thực thi cuối cùng, đều này cũng dẫn tới lỗi. Cho nên, khi trình duyệt load file JS xuống thì sẽ block lại để không download tiếp các file khác. Và chính điều này sẽ làm chậm đáng kể việc hiển thị nội dung website.

Làm nhỏ các file JS và CSS để giảm dung lượng

Công cụ:

1. Làm nhỏ dung lượng file CSS: http://tools.arantius.com/css-compressor
2. Làm nhỏ dung lượng file JS: http://dean.edwards.name/packer/
3. Bỏ các ghi chú file JS: http://closure-compiler.appspot.com/home

Ghi chú: Nên dùng số 3 trước rồi mới dùng số 2.

Nên dùng CSS, JS external. Không dùng dạng inline

Nếu bạn viết CSS song song với HTML code bằng cặp thẻ style, mỗi lần tải trang HTML sẽ đồng thời tải luôn style rất bất tiện và làm dài đoạn mã HTML của chúng ta. Ngược lại, nếu bạn tạo từng và lưu CSS dưới dạng file riêng, file chỉ được tải ở lần load trang đầu tiên, sau này hệ thống sẽ dùng sẵn file cache đã có sẵn để hiển thị. Như vậy sẽ hạn chế bớt request tải trang của chúng ta và giúp tốc độ tải trang được tăng thêm.

Cuối cùng, nén, nén và nén

Ở bài viết trước đây, tôi đã cung cấp một số phương pháp nén bằng .htaccess. Sau, chúng ta cũng có thêm một số giải pháp sau:

1 – Nén file static (HTML, CSS, JS, PNG, GIF, JPG…) với mod_gzip

[code] <ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
[/code]

2 – Nếu không có mod_gzip, chúng ta có thể dùng mod_deflate thay thế

[code] <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>
[/code]

3 – Thêm header cache-control cho các file static

[code] <ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>
[/code]

4 – Tắt Etags

[code] <ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
[/code]

5 – Xóa thông tin Last-Modified của file static

[code] <ifModule mod_headers.c>
Header unset Last-Modified
</ifModule>
[/code]

Trên đây tôi đã cung cấp rất nhiều phương án giúp tối ưu hóa website mà bạn có thể sử dụng. Dĩ nhiên, bạn có thể kết hợp nhiều phương pháp lại với nhau để đạt được kết quả tốt nhất.

Chúc các bạn thành công :)