Cách tối ưu tốc độ load trang Wordpress

Trong quá trình setup 1 website Wordpress, mình gặp phải trường hợp tốc độ load trang quá chậm nên tìm ra phương pháp này.

Trong quá trình test thực tế thì phương pháp này chỉ tối ưu được cho user sử dụng PC, không áp dụng được một chút nào trên Mobile. Các bạn cân nhắc trước khi áp dụng vào website của mình nhé.

Công cụ kiểm tra tốc độ tải trang: https://developers.google.com/speed/pagespeed/insights/

Và lỗi gặp phải là "Enable Compression"

Trước tiên, có thể vào website https://checkgzipcompression.com/ để kiểm tra tình trạng "nén file" của webstie như thế nào.

Thông số kiểm tra lúc này là 82,8%, điều này có nghĩa nếu tối ưu tốt việc nén file sẽ giúp dung lượng load trang của bạn giảm đến 82,8%. Thay vì lúc đầu load 100% site thì mất 38,668 bytes, thì giờ chỉ còn phải load 6,659bytes. Thật tuyệt vời,...

Trước khi tối ưu hóa Compression.

 Trong phạm vi bài viết này, phương pháp tối ưu hóa việc nén file dựa vào việc thêm code vào file .htaccess

CODE 1:

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

Dán code trên vào file .htaccess. và đây là kết quả đạt được. Tuy nhiên, vẫn chưa cải thiện cho lắm.

CODE 2:

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
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
AddType text/css .css

Nếu CODE 1 không có hiệu quả, bạn test với CODE 2 này. Kết quả khá hơn rất nhiều.