Tối ưu Google PageSpeed insights 2020 cho WordPress
Xin chào các fen đã đến website Cam Ranh Media. Mình thấy nhiều bạn tìm kiếm cách tối ưu tốc độ load Google Pagespeed insights cho WordPress. Các bạn ạ, trên mạng tìm hiển thị rất nhiều cách hướng dẫn. Thực chất thì 3 cái plugin tào lao gây nặng thêm. Rồi còn 3 cái mã javascript gây lỗi nữa chứ.
=> Nói thẳng thì chả thằng nào nó chịu hướng dẫn cả. Chỉ đăng để có cớ cho các bạn không biết gì liên hệ để làm tiền
Nội dung
Tối ưu Google PageSpeed insights 2020 cho WordPress
1. Đôi lời mình muốn cho các bạn biết
Trong bài viết này, mình xin chia sẽ cách tối ưu nhanh chóng cực kỳ đơn giản ai cũng có thể tự tay làm được.
Mấy bạn lưu ý khi lấy website mình đi test thử nhé!
Website này mình đặt trên con sever cùi bắp nên hay bị chập chờn về phản hồi máy chủ. Do đó, mấy bác có lấy test thì vui lòng bấm phân tích 2 – 3 lần nhé!
2. Công cụ bạn cần trước khi tối ưu PageSpeed
Mấy bạn chuẩn bị cho mình những thứ này trước nhé!
+ Google PageSpeed (Truy cập link //developers.google.com/speed/pagespeed/insights/)
+ Gtmetrix (Truy cập link //gtmetrix.com/)
=> 2 công cụ dùng đánh giá website bạn
+ Plugin Smush (Tối ưu hình ảnh và lazyloaded hình ảnh)
+ Plugin Lazy Load (Lazyloaded hình ảnh => Nếu chọn cái Smush thì không cận chọn cái này)
+ Plugin Gzip Compression (Nén tệp cho website)
+ Plugin LiteSpeed (Tạo bộ nhớ đệm cho website)
Plugin tối ưu website WordPress nhanh chóng đơn giản
Về Plugin Smush
Các bạn chú ý cho mình về phần viền đỏ dưới nhé. Vào setup tùy ý quan trọng Lazy Load nhớ kích hoạt nó lên cho mình. Có một số theme có hỗ trợ nên không cần thiết sử dụng plugin Lazy. Ví dụ theme flastsome. (Bạn nào cần mua theme flastsome full bản key bản quyền thì ib mình để giá rẻ cho.)
Về Plugin Lazy Load
Các bạn tích hết 3 mục đó rồi lưu lại là xong nhé!
Về Plugin Gzip Compression
Các tải về rồi kích hoạt nó lên là xong, giao diện đơn giản lắm nên mình up hình phần này. À…các bạn lưu ý khi kiểm tra tốc độ load website từ 2 cái link trên mình để. Nếu nó báo website của bạn đã được nén thì không cần plugin này đâu nhé!
Về Plugin LiteSpeed
Thấy nhiều trang chia sẻ nhiều plugin như WP Rocket, WP Fastest Cache, WP Super Cache, W3 Total Cache…v…v. Nhưng thật sự mình đã trải nghiệm qua thì theo đánh giá riêng của mình. Nó gây sung đột quá nhiều, ngoài ra còn gây nặng website thêm. Do đó, mình vẫn thích dùng LiteSpeed.
LiteSpeed Cache cho WordPress (LSCWP) là một plugin miễn phí tăng tốc tất cả trong một cho website của bạn, nó có thể tạo ra bộ nhớ cache ở cấp độ máy chủ và hàng loạt các tính năng tối ưu hóa khác.
LSCWP hỗ trợ WordPress Multisite và tương thích với hầu hết các plugin phổ biến, bao gồm WooCommerce, bbPress và Yoast SEO. Ngoài ra LiteSpeed Cache chỉ hoạt động tốt với các máy chủ sử dụng LiteSpeed làm Webserver và hỗ trợ LiteSpeed Cache.
Javascript thần thánh tối ưu PageSpeed Insights 2020 cho WordPress
I . Tăng tốc nhờ file .htaccess
1. Mã chuyển sang định dạng .Webp
Đoạn mã này giúp chuyển định dạng ảnh sang .Webp nhằm tăng tốc độ tải trang nhanh hơn.
# kích hoạt image webp
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
2. Mã khắc phục Leverage browser caching
Đoạn mã này khắc phục tình trạng bộ nhớ đệm. Các bạn nhớ đặt đoạn mã này đầu file giúp mình nhé. Có vậy nó mới có tác dụng.
## Cải thiện bố nhớ đệm EXPIRES CACHING LV1 ## <IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType image/webp .webp AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType image/svg+xml .svg .svgz AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> </IfModule> <FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$"> FileETag MTime Size <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary Header set Pragma "public" Header append Cache-Control "public" </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" Header unset Set-Cookie </IfModule> </FilesMatch> <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$"> <IfModule mod_headers.c> Header unset Last-Modified </IfModule> </FilesMatch> ## Cải thiện bố nhớ đệm EXPIRES CACHING LV2## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##
II. Tăng tốc nhờ file functions.php
1.Khắc phục Loại bỏ tài nguyên chặn hiển thị CSS
Copy đoạn mã dưới dán vào file functions.php nhé
/**
* Loại bỏ tài nguyên chặn hiển thị CSS
*/
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );
//* Loại bỏ CSS Gutenberg stylesheet in front
function wps_deregister_styles() {
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
2.Di chuyển javascripts xuống dưới Footer
//* Move from head to the Footer
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
3.Trì hoãn javascripts
Bước 1:
+ Đế biết được các tệp nào gây ra lỗi tải chậm. Trước tiên các bạn copy đoạn mã dưới đây dán vào. Sau đó nhấn Ctrl + F5 để tải lại trang domain.com/wp-admin của bạn cho các mục đó hiển thị ra bên ngoài.
add_action( 'wp_print_scripts', 'wsds_detect_enqueued_scripts' );
function wsds_detect_enqueued_scripts() {
global $wp_scripts;
foreach( $wp_scripts->queue as $handle ) :
echo $handle . ' | ';
endforeach;
}
+ Sau khi xác định được các mục gây ra chậm. Các bạn copy các tên các lại và xóa đi đoạn mã trên.
Bước 2:
Xử dụng các tệp trên để thay đổi các tệp của mình trong đoạn mã dưới. Sau đó copy dán vào là xong.
Lưu ý: Tránh trường hợp bị lỗi các bạn nên làm từng tệp rồi kiểm tra. Nếu không bị gì thì làm tiếp.
/**
* Trì hoãn javascript LV1
*/
add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );
function wsds_defer_scripts( $tag, $handle, $src ) {
// The handles of the enqueued scripts we want to defer
$defer_scripts = array(
'admin-bar',
'crayon_js',
'contact-form-7',
'pwhois-ajax-request',
'ea-admin-bar',
'eael-front-end',
'imagesloaded',
'magnific-popup',
'oceanwp-lightbox',
'jquery-easing',
'jquery-mousewheel',
'eio-lazy-load',
'elementor-assets',
'wp-includes-js',
);
if ( in_array( $handle, $defer_scripts ) ) {
return '<script data-no-minify="1" src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
}
return $tag;
}
Thay các tệp này nè các bạn.
‘admin-bar’, ‘crayon_js’, ‘contact-form-7’, ‘pwhois-ajax-request’, ‘ea-admin-bar’, ‘eael-front-end’, ‘imagesloaded’, ‘magnific-popup’, ‘oceanwp-lightbox’, ‘jquery-easing’, ‘jquery-mousewheel’, ‘eio-lazy-load’, ‘elementor-assets’, ‘wp-includes-js’,
Xử lý css Fonts google đảm bảo vẫn hiển thị khi tải
Để loại bỏ Google fonts khỏi lỗi chặn hiển thị trong màn hình đầu tiên. Các bạn cần thêm vào file Header.php nằm ở theme gốc bạn đang sử dụng.
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans:400,400italic,700,600' ] }// thay thế font chữ này bằng fonts bạn đang sử dụng
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Xong rồi đấy giờ thì hãy kiểm tra lại và thấy điều bất ngờ nào.
Bạn cần biết về những thông tin này
Gomez gần đây đã thực hiện một nghiên cứu cho thấy rằng hơn một nửa số người dùng internet mong đợi một website được tải trong vòng 2 giây. Nếu lâu hơn thế, họ có thể bắt đầu chạm vào đồng hồ, cảm thấy thất vọng và nhấp thoát khỏi website để xem liệu một trong những đối thủ của bạn có cung cấp trải nghiệm với hiệu suất tải trang tốt hơn không.
Một nghiên cứu của Akami cho thấy, khoảng 3/4 người dùng website sẽ không quay lại nếu theo kinh nghiệm của họ, phải mất hơn bốn giây để tải trang.
Website WordPress bị chậm do nhiều nguyên nhân:
Cài quá nhiều plugin.
Hình ảnh chưa được tối ưu.
Sử dụng các plugin phiên bản cũ.
Sử dụng các Widget bên ngoài.
Lượng truy cập cao và quá nhiều dữ liệu.
Bị tấn công DDos/Botnet.
Sử dụng phiên bản WordPress quá thấp.
Theme chưa được tối ưu.
Kiểm tra tốc độ website của bạn thực sự khá đơn giản, đặc biệt là khi GTmetrix đã cung cấp công cụ trực tuyến miễn phí để cho phép bạn làm điều đó khá dễ dàng.
Lời kết
Nếu sau bài viết hướng dẫn tối ưu hóa Google Pagespeed Insights 2020 cho WordPress. Mình đã hướng dẫn các bạn dầy đủ các bước để tối ưu hóa cho trang web tăng điểm Google PageSpeed Ínights. Bạn nào chưa hiểu rõ vấn đề hay đã làm nhưng không được thì cứ mạnh dạng ib mình hướng dẫn.
