Hướng dẫn bật nén gzip và lưu cache trong trình duyệt

4/5 - (29 đánh giá)

Một vấn đề mà bất kể người làm website hay kể cả dân làm SEO luôn quan tâm đó là làm sao để tối ưu load website nhanh nhất. Website mà load nhanh nó có rất nhiều lợi ích. Cái lợi đầu tiên phải kể đến là trải nghiệm người dùng tốt hơn từ đó có thể cải thiện pageview, giảm tỷ lệ Bounce Rates trên blog. Tiếp nữa là nhằm giảm tải tối đa cho máy chủ, tiết kiệm băng thông,…

Hôm nay, mình sẽ hướng dẫn các bạn cách bật lưu cache trong trình duyệtbật nén gzip. Đây là 1 trong những phần quan trọng mà bạn cần phải làm nếu muốn tăng tốc load website của mình.

Bật nén Gzip – Gzip File Compression

Bật nén Gzip là cách giảm dung lượng các thành phần tĩnh trên website như CSS, Javascript, HTML qua đó sẽ làm giảm thiểu tối đa thời gian phản hồi từ máy chủ. Để bật nén Gzip sẽ có các cách làm như sau:

– Nếu bạn đang dùng WordPress thì bạn chỉ cần cài đặt plugin WP Super Cache hoặc W3 Total Cache, WP Rocket sau đó thiết lập 1 số chức năng cơ bản là đã có thể bật nén Gzip 1 cách nhanh chóng mà không cần phải chèn thêm bất cứ code gì hết.

– Nếu bạn không dùng WordPress bạn sẽ cần làm như sau

Chèn code sau vào file .htaccess nằm trong thư mục gốc của website nếu bạn đang dùng host Apache.

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

hoặc code này

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

Chèn code sau vào file config nếu dùng Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Bật lưu cache trình duyệt (Cache Browse)

Khi vào một website bất kỳ thì trình duyệt phải bắt buộc tải về tất cả thành phần có trong một website để có thể phân tích và hiển thị nó. Để tăng tốc load trang cho trình duyệt thì chúng ta sẽ bật lưu bộ nhớ cache gọi là Browse Caching nghĩa là nó sẽ tạo ra bản bộ nhớ đệm của một website và lưu nó vào máy tính, kể từ các lần truy cập sau trình duyệt sẽ lấy dữ liệu có trong bộ nhớ đệm này ra để hiển thị mà không cần phải tải lại nữa.

Để bật lưu cache cho trình duyệt bạn chỉ cần chèn đoạn code sau vào file .htaccess trong thư mục gốc của website:

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

Lưu ý: File .htaccess là file cực kỳ mạnh nên trước khi thực hiện các bạn nên backup file .htaccess lại đề phòng trường hợp xấu xảy ra.

Ngoài ra, nếu bạn đang dùng web WordPress thì để bật nén Gzipbật lưu cache trên trình duyệt bạn chỉ cần sử dụng plugin WP Rocket là đủ. WP Rocket không chỉ làm việc này rất tốt mà nó còn giúp tăng tốc độ load trang web lên nhanh hơn rất nhiều lần.

Lời kết:

Như vậy, chỉ với 1 đoạn code ngắn đã giúp tăng tốc load website nhanh hơn đúng không nào. Vậy còn chờ gì nữa mà không áp dụng ngay cho website của bạn thôi. Chúc bạn thành công và nhớ theo dõi những bài viết tiếp theo trên blog Nguyễn Hùng nhé!

Nguyễn Hùng

Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng nó sẽ hữu ích với bạn.

Nhận thông báo
Thông báo qua email khi
guest

8 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Hào Nguyễn

Cảm ơn admin, em làm xong thấy web nhanh hơn đáng kể.

neja gem

Web Mình đang dùng WP Rocket bản full thấy khá ổn

Đỗ Huệ

cảm ơn admin. bài viết rất hay

anhchjnhnb

chào bạn, mình thêm vào file .htaccess rồi mà trên gg insight vẫn báo tăng cache cho trình duyệt.

Kiên Dũng

chào admin. Mình cũng đọc qua vài bài về hướng dẫn bật zip cho web và cũng được hướng dẫn kiểu như thế. Nhưng admin có thể hướng dẫn kĩ hơn một chút về cách mở file .htaccess và paste vào vị trí nào cho cụ thể hơn cho ae được không? vì nói chung chung như thế mình là người mới không biết tìm cái file .htaccess ở đâu. tìm lâu lắm với được nhưng không biết paste đoạn code đó vào vị trí nào nữa.
Thanks

van

Cái cache trình duyệt là do code web tạo ra chứ không phải là một tính năng của trình duyệt như chrome hả bạn? Tôi xài nginx thì đặ code như thế nào vậy?