Sửa lỗi Enable Compression và Leverage Browser Caching

Enable compression và Leverage browser caching là 2 cảnh báo phổ biến khi bạn kiểm tra tốc độ tải trang trên Google Pagespeed Insights. Để vượt qua được 2 cảnh báo này thì cách đơn giản bạn chỉ cần chỉnh sửa lại một chút tập tin .htaccess trên hosting.

Sửa lỗi Enable Compression và Leverage Browser Caching

Để có được kết quả kiểm tra 100/100 trên Google Pagespeed thì bạn phải thực hiện rất nhiều thao tác để tối ưu cho WordPress, bao gồm cả tối ưu hosting, source code và nội dung trên trang web. Bài viết này mình sẽ hướng dẫn bạn thao tác 2 bước nhỏ trong tất cả các khâu tối ưu Google Pagespeed.

Trước tiên thì bạn phải tải tập tin .htaccess trên thư mục gốc của website về máy tính.

Khắc phục cảnh báo Enable Compression

Bạn mở tập tin .htaccess vừa tải lúc nãy lên và thêm vào đoạn bên dưới:

<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

	# Remove browser bugs (only needed for really old browsers)
	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>

Bạn lưu lại và upload đè tập tin .htaccess lên hosting và vào Google Pagespeed Insights để kiểm tra kết quả. Nếu như hosting của bạn có hỗ trợ nén thì bạn sẽ không còn nhìn thấy cảnh báo Enable Compression nữa.

Khắc phục cảnh báo Leverage browser caching

Tiếp tục, bạn mở tập tin .htaccess lên và thêm vào đoạn bên dưới:

<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
	Header set Cache-Control "max-age=846000, public"
</filesMatch>

Sau khi hoàn thành xong, bạn lưu lại và upload đè lên hosting sau đó vào Pagespeed để kiểm tra xem cảnh báo Leverage browser caching đã mất hay chưa.

Nếu bạn làm đúng theo hướng dẫn thì tập tin .htaccess của bạn sẽ giống như bên dưới:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
	Header set Cache-Control "max-age=846000, public"
</filesMatch>
 
<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

	# Remove browser bugs (only needed for really old browsers)
	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>

Hy vọng qua bài này sẽ gúp bạn phần nào cải thiện được kết quả trên Google Pagespeed Insights, chúc bạn thành công.

Không có bình luận

Bạn có thể trở thành người đầu tiên để lại bình luận.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *