Hướng dẫn nén GZIP cho website

Nếu bạn đang xây 1 website bằng joomla hoặc WordPress, bạn thường nghe mọi người nói bật Gzip.Tùy chọn đấy sẽ nén nội dung web trước khi gửi nó lại cho trình duyệt người dùng ở trong thời gian thực.

Đây là giải pháp tuyệt vời cho trang web. Điều quan trọng là các thẻ HTML chỉ là 1 trong số các yếu tố cần thiết để tạo 1 web, bạn cần quan tâm đến Css, Javascripts, hình ảnh…

Hướng dẫn nén GZIP cho website

Đối với trang web sử dụng phương pháp sau đây:

• Xác định tập tin được update thường xuyên.
• Cố gắng giảm thiểu tập tin bằng cách gom chúng vào 1 file ví dụ 1 file Javascript, hoặc 1 file Css..
• Tạo ra phiên bản nén của tập tin này cùng bản gốc.
• Sử dụng thêm chút thủ thuật htaccess để server sẽ nén file.

Cách làm

Để thực hiện ,chỉ cần tạo một bản sao của các file bạn muốn nén. Nếu bạn truy cập bằng Shell bạn có thể làm: $ gzip -9 -c foo.js > foo.jsgz
Và nó sẽ tạo ra một bản sao về tập tin hậu tố là “gz”.
Tìm đến .htaccess của bạn, file này thường nằm ở folder thư mục web và add thêm vào :

CODE JOOMLA

<IfModule mod_expires.c>
<FilesMatch “\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$”>
ExpiresActive On
ExpiresDefault “access plus 10 years”
</FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*\.(js|css))$ smartoptimizer/?$1

<IfModule mod_expires.c>
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.(js|css|html?|xml|txt))$ smartoptimizer/?$1
</IfModule>

<IfModule !mod_expires.c>
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt))$ smartoptimizer/?$1
</IfModule>
</IfModule>
<FilesMatch “\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$”>
FileETag none
</FilesMatch>

CODE WORDPRESS

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

<ifModule mod_headers.c>
ExpiresActive On
# Expires after 1 month
<filesMatch “.(gif|png|jpg|jpeg|ico|pdf|js|htm|html)$”>
Header set Cache-Control “max-age=2592000″
</filesMatch>
# Expires after 7 day
<filesMatch “.(css)$”>
Header set Cache-Control “max-age=604800″
</filesMatch>
# Expires after 1 hour
<filesMatch “.(txt)$”>
Header set Cache-Control “max-age=3600″
</filesMatch>
</ifModule>

Sau khi nén xong bạn vào đây kiểm tra lại tốc độ của website theo chuẩn google đánh giá :http://developers.google.com/speed/pagespeed/insights/

Vậy là bạn đã nén được khoảng 50% làm tốc độ website tăng lên kinh ngạc mà ko ảnh hưởng cấu trúc website.

CHÚC THÀNH CÔNG !