Hướng dẫn tăng chỉ số Google PageSpeed Insights trên WordPress

Tối ưu chỉ số tốc đọ Google Pagespeed Insights là một chủ đề được siêu rộng rãi người bàn tán và quan tâm, theo cá nhân mình tì chỉ số ko hẳn là xác thực và quan trọng, cái quan trọng là trải nghiệm thực tế người dùng. Nhưng chỉ số đẹp mắt thì sẽ lấy được sự tin tưởng từ khách hàng hơn. Vậy phải chúng ta hay thử xem qua bài hướng dẫn dứoi đây để áp dụng xem có gì khác biệt hơn khi chúng ta tuyệt vời ko nhé!




Khi thực hành đo tốc độ web bằng những phương tiện như Google PageSpeed Insights, WebPageTest, hay KeyCDN là việc làm nên thiết để tối ưu web của bạn. Không thể phủ nhận giá trị của các chỉ số này, ngoại giả một điểm nữa bạn cũng nên quan tâm ấy là trải nghiệm người dùng. Vậy thì làm thế nào để tuyệt vời 100/100 điểm mang web nền móng WordPress dựa trên đánh giá của Google PageSpeed Insights. Nội dung sau sẽ cho những bạn lời trả lời tường minh nhất.

Đừng quá nhọc lòng đến chỉ số 100/100

Đa phần toàn bộ người người đều nỗ lực thông minh tới chỉ số 100/100 trên Google PageSpeed Insights. Việc này thực sự đòi hỏi đa dạng thời kì cũng như công sức. Tại sao lại nên khiến cho điều đó?

Google đã tăng trưởng PageSpeed Insights là chỉ dẫn những webmaster thực hành công việc logic web. Và bằng phương pháp khiến cho theo các hướng dẫn cụ thể của PageSpeed Insights, bạn mang thể hợp lý được trang web mượt mà hơn. Tuy nhiên bắt buộc nhớ ko phải khi nào bạn chỉnh sửa dễ dàng được, tùy theo yêu cầu, bí quyết thức hoạt động của web bạn.

WordPress và Google PageSpeed Insights

Khi nói đến việc tăng tốc WordPress, đôi lúc nó khá phức tạp. WordPress ko cần là nền tảng nhanh nhất hiện có, ý kiến được đưa ra từ chính những nhà phát triển. Lý do bởi những script, plugin cài đặt thêm làm web bạn chậm hơn trông thấy. Chúng tôi đã thực hành một số thử nghiệm để tối ưu chỉ số 100/100 trên cả hai phiên bản Desktop, Mobile về tốc độ load web, cũng như trải nghiệm người dùng.



Dưới đây là những tiêu chí được tối ưu, bạn với thể khiến cho y như vậy. Trong ví dụ này chúng tôi dùng theme mặc định ấy là Twenty Fifteen.

1. Tối ưu ảnh

Yếu tố thứ 1 chính là hình ảnh. Để làm cho được việc này, bạn cần cài thêm plugin Optimus Image Optimizer được tăng trưởng bởi KeyCDN. Plugin này có nhiệm vụ nén ảnh thông minh, mang tức là nó tiêu dùng hài hòa cả hai kỹ thuật nén lossless và lossy. Nén ảnh nhanh chóng chỉ với 1 cú click chuột. Định dạng ảnh sẽ được chuyển thành .webp, điều này cho phép web bạn cải thiện tốc độ hơn.

2. Giảm thiểu Javascript và CSS

Google PageSpeed Insights cũng nhắc việc buộc phải hạn chế JavaScript, CSS và HTML. Để khắc phục sự cố này buộc phải cài đặt plugin Autoptimize – miễn phí. Trong cài đặt của plugin bạn kiểm tra như sau:

• Tối ưu mã HTML
• Tối ưu mã JavaScript
• Tối ưu mã CSS

Chúng tôi cũng tiêu dùng plugin WordPress Cache Enabler để tốc độ load ảnh (được chuyển đổi sang dạng .webp trước đó) trên trình chuẩn y nhanh hơn. Trong phần cài đặt, đừng quên tích tìm “Create an additional cached version for WebP image support.”

3. Tài nguyên chặn hiển thị



Google PageSpeed Insights cho biết rằng sở hữu JavaScript và CSS trong màn hình đầu tiên. Có 3 giả dụ mà đa số mọi người đều gặp, bao gồm tệp tin JavaScript/CSS, Font Awesome và Google Fonts. Các font chữ đang chặn hiển thị trong tỉ dụ này.

Files

Vấn đề thứ 1 buộc phải xử lý ấy là các tệp tin Javascript và CSS đang chặn màn hình hiển thị. Để khắc phục, buộc phải chỉnh sửa trong plugin Autoptimize.

?”

• Trong JavaScript Options bỏ tậu “Force JavaScript in
• Trong CSS Options bỏ tậu “Inline all CSS?

Font Awesome

Bạn với khoảng trống hợp Font Awesome trên trang web, ngoài ra ví như đặt ở header sẽ chặn hiển thị màn hình. Vì thế cần lấy mã sau rồi chèn vào phía footer, ngay trước thẻ đóng :

Google Fonts

Trong theme mặc định đang tiêu dùng có sử dụng font chữ Noto Serif. WordPress sử dụng một hook gọi là wp_enqueue_scripts để vận tải font chữ của bạn trong phần header. Điều này tự động làm nó bị chặn màn hình hiển thị. Giải pháp là cài thêm plugin Disable Google Fonts. Nếu như bạn tiêu dùng 1 theme khác, sẽ mang thể gặp phải cạnh tranh giả dụ như muốn yêu cầu nhà phát triển tắt font chữ Google.

Sau ấy chúng tôi sẽ thêm phông chữ Google có mã sau đây, ngay trước thẻ :





Bạn cũng mang thể chuyên chở những phông chữ của Google ko đồng bộ bằng bí quyết sử dụng Trình vận tải Web Phông chữ của Google. Đơn giản chỉ phải đặt mã dưới đây ở cuối trang.

4. Tận dụng bộ nhớ đệm trình duyệt

Cảnh báo tiếp theo tương tác đến việc tận dụng bộ nhớ trình duyệt. Lúc này buộc phải thêm cache-control vào server bằng phương pháp thêm mã sau trong file .htaccess:


Header set Cache-Control “max-age=84600, public”


Nếu dùng máy chủ Nginx thì thêm mã dưới đây:

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$
expires 2d;
add_header Cache-Control “public, no-transform”;

Google Analytics

5. Bật tính năng nén

Tham khảo chỉ dẫn cách bật Gzip cho từng chiếc máy chủ dưới đây:

Apache

Bạn mang thể kích hoạt nén bằng bí quyết thêm vào tệp tin .htaccess.



# 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



Nginx


Bạn có thể bật tính năng nén bằng bí quyết thêm vào tệp tin nginx.conf.

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;
gzip_disable “MSIE [1-6].(?!.*SV1)”;
gzip_vary on;

6. Giảm thời gian phản hồi của máy chủ

Và cuối cùng, việc giảm thời kì đáp ứng của máy chủ. Các yêu cầu rẻ nhất cho việc này là sử dụng máy chủ web tốc độ cao và cũng thực hành CDN, chẳng hạn như KeyCDN. Nếu bạn với thể làm theo đa số mọi thiết bị ở trên, ngày nay bạn sẽ đạt 100/100 trong Google PageSpeed Insights sở hữu trang WordPress của bạn.

7. Xóa chuỗi truy vấn – tùy chọn

Một điều chúng tôi khuyên là mẫu bỏ các chuỗi tróc nã vấn khỏi những tài nguyên tĩnh. Tài nguyên sở hữu “?” trong URL không được cache bởi một số máy chủ lưu trữ trợ thì hoặc CDNS. Một cách để làm điều này là bổ sung thêm vào tệp tin functions.php.

function _remove_script_version( $src )
$parts = explode( ‘?ver’, $src );
return $parts[0];

add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

Một lựa mua khác ấy là tiêu dùng plugin Query strings remover. Plugin này chiếc bỏ những chuỗi truy hỏi vấn từ các tài nguyên tĩnh như những tệp CSS và JavaScript. Nó sẽ cải thiện hiệu suất bộ nhớ cache và điểm tổng thể trong Google PageSpeed Insights, YSlow, Pingdom và GTmetrix. Chỉ cần cài đặt và quên đi đa số thứ, vì không bắt buộc cấu hình.

Trước và sau khi tối ưu

Vậy tối điểm mạnh 100/100 thực sự giúp đạt được tốc độ trang nhanh hơn? Thực tế, đa số những tuyệt vời hóa mà chúng tôi vận dụng cho mỗi đề nghị của Google PageSpeed Insights đã làm cho giảm thời kì chuyển vận trang. Sự dị biệt được miêu tả dưới đây.

Trước những yêu cầu của Google PageSpeed Insights
Sử dụng Pingdom và WebPageTest để hiển thị cho bạn trước và sau. Hãy nhớ, Pingdom chưa hỗ trợ HTTP/2. Nhưng 1 số người vẫn thích nhìn thấy kết quả test trên trang này vì số liệu dễ hiểu.

Pingdom


WebPageTest



Sau các đề xuất của Google PageSpeed Insights

Pingdom





WebPageTest



So sánh hai kết quả:





Như bạn thấy tổng thời kì vận tải xuống giảm làng nhàng khoảng 15-16% bằng cách làm cho theo mọi những yêu cầu của Google PageSpeed. Chúng tôi cũng có thể thoát khỏi 9 request HTTP, dù rằng điều này phát triển thành ít quan yếu hơn có HTTP/2.

Tổng kết

Như bạn có thể thấy những đề xuất từ Google PageSpeed Insights có giá trị nhất định, ngoài ra đừng quá đặt nặng vấn đề hợp lý tới 100/100. Hãy đơn thuần hóa việc tối ưu, ngoài đó đừng quên trải nghiệm người dùng.