Hướng dẫn bật gzip compression trên wordpress

Mục lục:

Giới thiệu compression

Compression cho phép máy chủ web cung cấp 1 file có dung lượng nhỏ hơn bình thường so với file thực tế để đưa đến người dùng, giúp người dùng load trang web được nhanh hơn, có trải nghiệm tốt hơn.

Compression sẽ nén HTML và CSS với gzip, và thường khi nén thì sẻ tiết kiệm được từ 50 đến 80% kích thước tập tin bình thường. Đồng nghĩa nó giúp bạn giảm băng thông truyền (bandwidth) sử dụng.

Hoạt động

Khi được yêu cầu từ web brower cho một trang nào đó trên website của bạn thì website server sẻ trả lại một file đã được compressed file nếu trình duyệt hiểu được file compression.

Hướng dẫn bật Gzip compression

Thông thường thì compresion đã được bật sẳn trên webserver, nên chúng ta chỉ cần cấu hình trên các mã nguồn của nó nữa mà thôi. Thường để bật compression ta chỉ cần đưa đoạn code sau vào file .htaccess. Nếu bạn chưa biết file .htaccess để làm gì thì bạn có thể tìm hiểu trên internet hoặc comment phía dưới đây để mình hỗ trợ nhé.

Bạn copy đoạn code sau vào file .htaccess:

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

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>

Hoặc

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>