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

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

Tại sao tốc độ website lại rất quan trọng?

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.

Những nguyên nhân website wordpress chậm

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.

Cách nhận biết website WordPress đang tải chậm?

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.

Xem chi tiết
THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Tư Vấn Dịch Vụ

Chào bạn! Bạn cần tư vấn hãy gửi tin nhắn nhé!