Optimize front-end to improve performance - Part 4

Cũng lâu không có bài viết nào cho blog cá nhân của mình. Hôm nay mình viết tiếp chuỗi bài về tối ưu hóa tầng front-end nhằm cải thiện tốc độ của website (webpage). Ở các phần trước, mọi người sẽ tập trung thao tác vào cấu trúc web như đặt CSS trên đầu, JS bên dưới, phải dùng càng ít file CSS/JS thì càng tốt. Thì ở phần 4 này, mình sẽ nói về một chủ đề đã cũ nhưng biết đâu bạn cũng chưa biết. Đó là dùng tập tin .htaccess để tối ưu hóa một số thông tin khác ví dụ như nén file với gzip, hoặc đặt thời gian cache cho các file static...

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

<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>

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

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

3 - Thêm header expire cho các file static

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>

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

<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>

5 - Tắt ETag của các file static

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

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

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

---

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