16 Lời khuyên giúp tăng tốc Website sử dụng mã nguồn WordPress

WordPress là một mã nguồn mở được sử dụng nhiều nhất hiện nay với 74 triệu website đang sử dụng chiếm 59,5 tổng số website. Tuy nhiên sử dụng WordPress phải biết cách tối ưu thì mới có đượt tốc độ tốt nhất, nếu không thì web load rất chậm, phải 5-8s mới xong. Khách hàng không thể chờ và họ sẽ out ngay.

Dạo này một số bạn có inbox hỏi xin mình theme mà mình đang sử dụng cho website(dưới chữ ký của mình) vì nó load nhanh quá. Thực ra theme mình sử dụng là theme shopme, theme này vốn nổi tiếng là nặng. Khi sử dụng mình đã lược bỏ một số thứ không cần thiết và tối ưu lại để nó nhẹ hơn. Dưới đây là cách làm mà mình sưu tầm và áp dụng thành công cho web của mình, nay xin chia sẻ lại vs anh em IDVS.

1. Chọn hosting/vps chất lượng
Làm việc gì thì cũng nên bắt đầu từ gốc rễ trước, tối ưu WordPress cũng vậy. Hosting/VPS là một trong những yếu tố then chốt quyết định tới tốc độ website. Mình tin tưởng sử dụng VPS Vultr, đây là nhà cung cấp hàng đầu hiện nay còn hosting thì có Hawk Host(có location HongKong và Singapore cho tốc độ tốt nhất về Việt Nam),Stable Host(nhược điểm không có location châu á). Giá hosting giờ cũng rất rẻ rồi chỉ từ khoảng 3$/tháng thậm chí nếu bạn mua đúng đợt khuyến mãi giá chỉ hơn 1$/tháng.

2. Sử dụng Cache và CDN
Khi sử dụng WordPress thì cache là điều bắt buộc nếu không sẽ tốn tài nguyên và website load rất chậm. Hiện này có một số Plugin Cache rất tốt như Super Cache, WP Fastest Cache, W3 Total Cache(chỉ nên sử dụng cho môi trường máy chủ). Tuy nhiên, mình thích sử dụng một 1 plugin cache trả phí khác là Wp-Rocket, cá nhân mình đánh giá đây là plugin cache mạnh mẽ nhất.
Link download (yên tâm mình không phải là hacker nên không biết cài thêm gì vào đâu)

https://drive.google.com/open?id=0B83lSc-wtOz0SjdyWTJrNmtiOFU

Hướng dẫn cài

https://wpcanban.com/wordpress/thu-thuat-wordpress/huong-dan-cai-dat-va-su-dung-plugin-wp-rocket.html

Nếu hosting bạn sử dụng đặt ở xa (không đặt tại VN hay Hongkong) thì nên sử dụng CDN(nếu chưa biết bạn lên Google tìm hiểu nhé). Hiện nay dịch vụ CDN miễn phí tốt nhất là Cloudflare

https://www.cloudflare.com/a/overview

4. Sử dụng plugin Nén và gộp Javascript, CSS
Đây là một yếu tố rất quan trọng và vì nếu không nén thì sẽ mất rất nhiều HTTP Request tới server để tải dữ liệu về làm chậm tốc độ của trang web lại. Một plugin rất tốt mà mình cũng đang dùng đó là Auto Optimize.(với hơn 100.000 lượt active). Cài đặt xong vào Settings > Autoptimize tích chọn

• Optimize HTML Code
• Keep HTML comments
• Optimize JavaScript Code
• Add try-catch wrapping
• Optimize CSS Code
• Save aggregated script/css as static files?

5. Giảm dung lượng ảnh trước khi upload và sử dụng Lazy Load
Ảnh là một trong những thành phần nặng nhất của Website chiếm thời 60% thời gian tải trang, do đó nếu bạn tối ưu ảnh tốt thì tốc độ sẽ cải thiện rất đáng kế. Mình thì thường làm thế này để tối ưu ảnh: Giảm dung lượng ảnh trước khi Upload bằng phần mềm trên máy tính sau đó mới upload lên WordPress và dùng thêm plugin WP-Smush để tối ưu.

Lazy Load cũng là một kĩ thuật rất hay nếu website của bạn có nhiều ảnh, chỉ khi người dùng kéo tới đâu ảnh mới được tải giúp giảm rất nhiều HTTP Request và tăng tốc độ tải trang của WordPress, bạn có thể dùng plugina3 Lazy Load rất tốt, trước đây mình không dùng Lazy Load vì nó không tải ảnh khi người dùng mới vào website, chỉ khi kéo xuống nó mới bắt đầu tải làm xấu hết cả cảnh quan của web nhưng từ khi biết đến a3 Lazy Load thì mình đã dùng lại vì nó hỗ trợ rất nhiều hình thức Lazy Load nhưng nói chúng bạn cứ dùng đi rồi biết

6. Tối ưu Database
Mỗi khi truy cập website, WordPress cần phải kết nối vào Database để lấy dữ liệu do đó tối ưu Database cho sạch sẽ là điều rất cần thiết, một plugin rất nổi tiếng đó là WP-Optimize, cài đặt xong bạn vào WP-Optimize ở menu bên trái nhấn Process thực hiện việc tối ưu Database, nên làm việc này thường xuyên khoảng 1 tuần/lần hoặc nếu bạn lười thì thiết lập trong cài đặt của plugin để nó tự là.
Nếu sử dụng Wp-rocket rồi thì không cần, wp-rocket có tính năng tối ưu database.

7. Xoá bớt plugin không sử dụng
Sử dụng quá nhiều plugin chính là yếu tố khiến website của bạn chậm đi do đó nếu WordPress của bạn dùng quá nhiều plugin thì cân nhắc xoá vợi đi, cái nào cần thiết hãy dùng. Bạn có thể dùng plugin P3 Plugin Performance Profiler để phân tích xem plugin nào nặng nhất tốn nhiều thời gian để tải nhất thì cho đi sớm là vừa hoăc thay thế các plugin khác nhẹ hơn.

8. Gõ bở Query String khỏi URL
Một vài plugin cache hay hệ thống cache sẽ không cache các file tĩnh nếu URL có chưa query string dạng nhưstyle.css?v=3.6”. Khi bạn test tốc độ WordPress bằng GTmetrix, công cụ này có thông báo cho bạn biết về query string, bạn có thể kiểm tra nếu tốt rồi thì thôi còn không thì phải gỡ bỏ query string khỏi URL của các file tĩnh để không cản trở việc Cache. Để làm việc này có 3 cách

• Dùng W3 Total Cache( bạn cứ cấu hình như trên là đã gỡ bỏ query string rồi
• Dùng plugin Remove Query Strings From Static Resources
• Thêm đoạn code sau vào cuối file fuction.php của theme (nếu không muốn dùng plugin), nhớ thêm vào trước dấu kết thúc của php ?>

//Go bo Query Strings
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 );

9. Vô hiệu hoá tính năng Force Rewrite Titles trogn plugin Yoast SEO
Yoast SEO thì gần như trang web WordPress nào bây giờ cũng dùng rồi vì nó plugin rất tốt lại miễn phí nhưng có một tính năng mà mọi người thường bật lên khi cấu hình Yoast đó là Force Rewrite Titles.Chính tác giả của plugin này cũng xác nhận tính năng này sẽ làm website của ban chậm thêm vài chục miligiây, do đó hãy vô hiệu hoá nó đi.

Bạn vào SEO > Titles & Meta và bỏ chọn Force Rewrite Titles

10. Tắt Pingback và Trackback
Pingback và Trackback sẽ thông báo cho bạn khi bất kì trang web nào có đặt link website của bạn là website của họ nhưng mình thấy nó không cần thiết và làm giảm hiệu năng của WordPress nên bạn hãy vào phần Setting > Discussion và bỏ tích chọn ở dòng sau: Allow link notifications from other blogs (pingbacks and trackbacks) on new articles hoặc Cho phép liên kết các thông báo từ các blog khác (pingbacks và trackbacks) trên các bài viết mới nếu là tiếng việt

11. Giữ WordPress được cập nhật
Mỗi bản cập nhật của WordPress đều đem đến những cải thiện về hiệu tăng, tốc độ và bảo mật hay các tính năng mới nên bạn hãy tập thói quen cập nhật WordPress lên phiên bản mới nhất ngay sau khi nó ra mắt.

12. Cản trở Image HotLinking
Giả sử mình đang cần đang một cái ảnh lên blog mà vô tình thấy trên website của bạn nó mình sẽ copy link đó về website của mình và từ đó mỗi khi người dùng truy cập vào trang web của mình ảnh này sẽ được lấy từ website của bạn. Việc này vô tình làm tốn băng thông, hiệu năng máy chủ, đấy là còn chưa kể đến là website của mình có lưu lượng truy cập cao thì bạn sẽ thiệt hải rất nhiều nên tốt nhất vô hiệu hoá việc này lại. Để ngăn cản Image HotLinking, bạn thêm đoạn code sau:

Thêm vào file .haccess nếu dùng Apache
RewriteEngine on
RewriteCond %{HTTP_REFERER} !=””
RewriteCond %{HTTP_REFERER} !^https?://([^/]*)?example\.com/ [NC]
RewriteRule \.(jpe?g|gif|png)$ – [F,NC]
Thêm vào file cấu hình domain nếu dùng NGINX( thay crazytut.com thành tên miền của bạn)
location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked crazytut.com *.crazytut.com;
if ($invalid_referer) {
return 403;
}

13. Thay thế các đoạn code PHP không cần thiết bằng HTML
Nếu bạn dùng theme WordPress mà không phải tự code thì sẽ rất hay gặp trường hợp này, mình xin lấy ví dụ như sau:

<!DOCTYPE html>;
<html <?php language_attributes(); ?>; prefix=”og: http://ogp.me/ns#“>;
<head>;
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />

Đoạn code bên trên là mình tìm thấy trong file header của WordPress theme, các bạn có thể thấy có 2 đoạn code php ở trong đó, mỗi khi người dùng truy cập server phải xử lí 2 đoạn php này để trả lại cho người dùng tốn thêm thời gian trong khi chúng ta hoàn toàn có thể thay thế nó bằng đoạn code HTML sau, vừa giảm tả server vừa tăng tốc độ WordPress:

<!DOCTYPE html>
<html lang=”vi” prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#“>
<head>
<meta charset=”UTF-8”>

14. Loại bỏ Emoji để tăng tốc độ load
Emoji giúp các bài viết, bình luận trở nên sinh động hơn, thể hiện được cảm xúc của người viết. Tuy nhiên, không phải trang nào cũng cần dùng tới Emoji, đặc biệt là các website thương mại điện tử, web doanh nghiệp… Thêm vào đó, những icon này được load trực tiếp từ server của WordPress.org, chúng có kích thước thực khá lớn (chứ không phải nhỏ như bạn thấy hiển thị trên web), không được nén để tối ưu dung lượng nên làm tốc độ load web chậm đi kha khá. Trong trường hợp bạn cảm thấy Emoji không thực sự cần thiết, tốt nhất là nên vô hiệu hóa nó đi để tiết kiệm một phần không gian HTML giúp blog/ website load nhanh hơn.
Để loại bỏ hoàn toàn Emoji khỏi WordPress, các bạn chỉ cần chèn code sau đây vào file functions.php của theme hoặc child theme đang dùng.
/**
* Disable the emoji’s
*/
function disable_emojis() {
remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );
remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ );
remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );
remove_action( ‘admin_print_styles’, ‘print_emoji_styles’ );
remove_filter( ‘the_content_feed’, ‘wp_staticize_emoji’ );
remove_filter( ‘comment_text_rss’, ‘wp_staticize_emoji’ );
remove_filter( ‘wp_mail’, ‘wp_staticize_emoji_for_email’ );
add_filter( ‘tiny_mce_plugins’, ‘disable_emojis_tinymce’ );
}
add_action( ‘init’, ‘disable_emojis’ );

/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( ‘wpemoji’ ) );
} else {
return array();
}
}

15. Vấn đề tập tin admin-ajax.php gây chậm
Kể từ phiên bản Wp 3.6 WordPress Heartbeat API được giới thiệu để cho phép giao tiếp giữa trình duyệt và máy chủ. WordPress Heartbeat API sử dụng tập tin admin-ajax.php để chạy AJAX gọi từ trình duyệt web. Đôi khi chúng ta kiếm tra thấy thời gian tải của tập tin này rất lớn gây chậm trang. Để giải quyết vấn đề này bạn cài Plugin heartbeat control sau đó cấu hình như sau.

16. Tải chậm JavaScript
Nếu bạn đã từng kiểm tra thử tốc độ load blog/ website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js và .css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi. Và Google thì không thích điều đó.

Tải không đồng bộ (Asynchronous) là gì?
Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.

Tải không đồng bộ JavaScript mà không cần dùng plugin

Tất cả những gì mà các bạn cần làm là thêm đoạn code sau đây vào file functions.php của theme hoặc child theme mà bạn đang sử dụng.

//* Asynchronous JS without plugin
function async_js($tag){
$scripts_to_async = array(‘script-1.js’, ‘script-2.js’, ‘script-3.js’, ‘script-4.js’, ‘script-5.js’);
foreach($scripts_to_async as $async_script){
if(true == strpos($tag, $async_script ) )
return str_replace( ‘ src’, ‘ async=”async” src’, $tag );
}
return $tag;
}
add_filter( ‘script_loader_tag’, ‘async_js’, 10 );

Lưu ý: Thay script-1.js, script-2.js… bằng tên các JavaScript tương ứng trên website của bạn. Nếu số lượng script ít hơn, các bạn có thể xóa bớt đi và ngược lại.
Ví dụ nếu file JavaScript của mình có đường dẫn là phuonglong.com.vn/wp-includes/js/jquery/jquery-migrate.min.js thì điền /wp-includes/js/jquery/jquery-migrate.min.js

Bài viết do mình sưu tầm trong quá trình tối ưu cho website của bản thân, có sử dụng tư liệu từ các nguồn

https://www.crazytut.com/huong-dan-tang-toc-wordpress-toan-tap-tu-a-z/

https://www.keycdn.com/blog/speed-up-wordpress/

https://wpcanban.com/wordpress/thu-thuat-wordpress/tai-khong-dong-bo-javascript-trong-wordpress.html

Nếu thấy hữu ích hãy cho mình 1 like nhé

Quét mã QR để đọc bài viết này để xem tiếp trên điện thoại