Cách tăng tốc website WordPress siêu chuẩn(có demo)

Như đã hứa với anh em, hôm nay mình sẽ chia sẻ cách tăng tốc tải WordPress nhanh chóng mặt với plugins WP Fastest Cache và CDN free của CloudFlare(Link tải Plugin ở cuối bài)

Tại sao cần phải tăng tốc độ tải website?

Như anh em đã biết, từ tháng 7 năm 2018, tốc độ tải website là một trong những yếu tố xếp hạng của Google. Quan trọng hơn, nếu tốc độ tải trang nhanh thì sẽ giảm tỉ lệ thoát, tăng tỉ lệ khách hàng quay lại website. Ngoài ra còn rất nhiều lợi ích khác.

Demo website WordPress đã được tối ưu

Đây là demo để anh em check: http://vechai.online/2019/07/23/top-5-cong-ty-dich-vu-xuat-nhap-khau-tai-tphcm/. Demo này mình sử dụng VPS miễn phí của SkySilk, sever tại Mỹ, themes FREE, không có nhiều chức năng lắm. Quan điểm của mình là một blog vệ tinh hoặc một web đưa thông tin dịch vụ chỉ cần như vậy là đủ.

Dưới đây là kết quả sau khi tối ưu:

Pagespeed(trên di động): https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fvechai.online%2F2019%2F07%2F23%2Ftop-5-cong-ty-dich-vu-xuat-nhap-khau-tai-tphcm%2F

 

GTmetrix

Máy chủ site này được đặt ở Bắc Mỹ, nên tốc độ truy cập từ Canada rất nhanh. Trang hơn 500kb nhưng load chỉ cần 0.5 giây. Mình test ở Việt Nam thì tầm 0,8 giây do chưa sử dụng CDN.

Cập nhật: Vì một số anh em bảo rằng web mới, nhẹ, ít ảnh nên load nhanh. Vì vậy mình đăng thêm vài tấm stock nữa nên size của link trên nặng hơn 5 lần(2,81MB). Và tốc độ tải vẫn chỉ là ~1s.

Các bước tối ưu tốc độ website WordPress

1. Kiểm tra website

Mình thấy rất nhiều anh em cài plugins trước chứ không quan tâm đến những vấn đề khác. Đa số plugins sẽ làm “xanh điểm pagespeed” tuy nhiên tốc độ tải trang vẫn không thay đổi, thậm chí còn chậm hơn.

Mình sử dụng GTmetrix và Google Coverage để kiểm tra website, hai công cụ này sẽ giúp chúng ta nhận biết để lược bỏ rất nhiều những css và javascript thừa thải giúp tăng tốc wordpress với tốc độ chóng mặt.

CHÚ Ý: tắt hết plugins tăng tốc độ, cache và sao lưu website trước khi tiến hành.

Đầu tiên kiểm tra website với GTmextrix, anh em chỉ cần chú ý đến tab Yslow, tab PageSpeed sau này đã có plugins lo. Mỗi website thì có mỗi vấn đề khác nhau gây cản trở tốc độ tải trang, GTmetrix sẽ cho chúng ta biết điều đó, và việc còn lại chỉ cần fix là được 😀

 

 

Những thứ anh em quan tâm: CDN, Add Expires headers, Commpress components with gzip, Minify JavaScript and CSS. Đa số hosting đều đã tự động tối ưu 2 vấn đề gạch đỏ ở giữa, tuy nhiên với VPS thì không.

2. Tối ưu

2.1 CDN

Mình thường sử dụng CDN miễn phí của Cloudflare, chức năng này được kết hợp trong Plugins nên mình sẽ hướng dẫn anh em ở bước thiết lập plugins.

2.2 Add Expires headers

Nếu dòng này đỏ thì mở .htaccess thêm đoạn này

## EXPIRES CACHING ##
<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 text/css “access plus 1 year”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>

2.3 Commpress components with gzip

Cũng mở .htaccess và thêm đoạn code sau(hoặc sử dụng plugins Enable Gzip Compression):

<IfModule mod_headers.c>
<FilesMatch “\.(js|css|xml|gz)$”>
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml text/x-js text/js
</IfModule>

EXPIRES CACHING ##

2.4 Minify JavaScript and CSS(quan trọng)

Đầu tiên, anh em xác định các tệp javascript mà website không sử dụng bằng Google Coverage. Bật tab ẩn danh > mở bài viết của website > F12 > nhấn vào nút 3 chấm bên phải trên cùng > More tools > Coverage > Nhấn reload. Tools này sẽ cho anh em biết tệp javascript, css nào không cần dùng hoặc chỉ dùng một ít để làm nhỏ nó.

Sau khi reload, anh em sẽ thấy những tệp css và js và tỉ lệ % sử dụng(xanh là sử dụng, đỏ là không). Nhấn vào tệp đó, xóa đi những dòng đỏ, sau đó copy tất cả và thay thế cho file trong hosting. Ví dụ file css trong hosting của mình là style.css, mình sẽ đổi thành style_.css, sau đó tạo thêm một style.css và dán css đã tối ưu vào). Đối với file .js cũng vậy.

Lưu ý: trang chủ, page, post, search,… đều có những css khác nhau. Anh em lọc từng cái rồi gộp lại. Sau đó sử dụng NodeJS để lọc css trùng lặp.

Update: sau khi  xóa hết các css thừa ở tất cả các trang, anh em gộp nó lại làm một(không gộp css khác tên) và sử dụng NodeJS để lược bỏ trùng lặp.

Bước 1. Tải NodeJS(Windows).

Bước 2. Cài đặt như thường và sao chép tệp css cần lọc trùng lặp vào C:\Program Files\nodejs

Bước 3. Mở CMD ADMIN(Nhấn Ctrl+Shift+Esc, nhấn đè Ctrl và nhấn chuột vào File, chọn Run new task)

Gõ lệnh:

cd c:\program files\nodejs

Gõ tiếp npm install css-purge -g

Chờ nó cài đặt xong gõ

css-purge -i <tên tệp> -o <tên tệp>_purged.css

Ví dụ: css-purge -i style.css -o style_purged.css

Xong, lấy tệp style_purged.css để sài! Giảm javascript thì mình làm tay.

Nếu tệp nào 100% không sử dụng hoặc chức năng đó anh em không cần sử dụng thì có thể xóa nó đi. Ở web trên mình xóa migrate và emoij vì mình không có nhu cầu sử dụng.

Cách xóa jquery-migrate

Mở functions.php thêm code này vào cuối

//Remove JQuery migrate
function remove_jquery_migrate( $scripts ) {
if ( ! is_admin() && isset( $scripts->registered[‘jquery’] ) ) {
$script = $scripts->registered[‘jquery’];

if ( $script->deps ) { // Check whether the script has any dependencies
$script->deps = array_diff( $script->deps, array( ‘jquery-migrate’ ) );
}
}
}

Code xóa emoij

//remove emoij
add_action( ‘wp_default_scripts’, ‘remove_jquery_migrate’ );remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );
remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );

Còn nhiều file css và js khác nếu website không cần sử dụng thì xóa nó đi, nếu không xóa được thì cứ comment hoặc inbox(m.me/thanhamp) mình sẽ hướng dẫn(buổi tối).

2.6 Tối ưu hình ảnh

Mình sử dụng tinypng.com để tối ưu hình ảnh, rất ngon. Hoặc không cần tối ưu hình ảnh vì plugins dưới đã có chức năng lazy load(ảnh chất lượng cao vẫn không ảnh hưởng tốc độ). Tuy nhiên lazy load sẽ ngăn cản việc đọc trang web(hình ảnh, alt, title ảnh) của googlebot di động.

3. Cài đặt và thiết lập plugins WP Fastest Cache

Mình test rất nhiều plugins tăng tốc nhưng hầu như các plugins đều cải thiện chỉ số trên PageSpeed còn tốc độ trải thực tế thì không cải thiện được bao nhiêu. Plugins này mình sẽ tặng cho anh em comment email tại post này.

Anh em cài đặt như các plugins khác, tích vào những ô sau đây.

CDN

Sau khi lưu lại các tùy chọn ở phần Settings, anh em chuyển sang phần CDN > chọn CloudFlare > Đăng nhập > Sau đó next đến khi nào xong thì thôi.

Thiết lập ở CloudFlare

Đăng nhập vào CloudFlare, ở tab Caching anh em thiết lập như hình dưới.

Ở tab Speed anh em tắt hết chỉ sử dụng chức năng này.

Đã xong, kiểm tra và tận hưởng.

Chú ý: Mỗi website có mỗi vấn đề riêng, không phải cái nào cũng giống cái nào. Anh em có thể comment website và vấn đề mắc phải ở dưới, buổi tối mình sẽ giúp đỡ anh em(ban ngày mình đi làm).

Link tải: https://drive.google.com/file/d/1QRHSO3J-EeXde0jKyGTPS_DxUAcJ9zxb/view?usp=sharing