Trang chủ / Code / Hướng dẫn tăng tốc WordPress toàn tập từ A – Z
tăng tốc wordpress

Hướng dẫn tăng tốc WordPress toàn tập từ A – Z

Mọi người đều rất bận rộn, cả tôi và bạn cũng vậy, không ai có thời gian đề chờ môt trang web load quá lâu, do vậy hãy làm sao để trang web của bạn tải nhanh rất có thể hoặc bạn sẽ mất rất nhiều khách hàng tiềm năng. Nếu website của bạn không load trong vòng 2s thì người dùng sẽ có xu hướng bỏ đi, 2s ở đây là thời gian để website bắt đầu load website còn thường thì để một trang web tải xong toàn bộ mất khoảng 5 – 7s, đây là một khoảng thời gian chấp nhận được.

Xu hướng thiết kế web của 2016 là tốc độ, hãy làm ra một website tải thật nhanh, đó là yếu tố rất quan trọng để giữ chân người dùng nhất là đối với các website thương mại điện tử. Do đó, trong bài viết này mình sẽ hướng dẫn các bạn tăng tốc website của bạn nhanh nhất có thể, và cụ thể ở đây là tăng tốc WordPress. Trên Google có rất nhiều bài viết hướng dẫn tăng tốc WordPress nhưng đa phần là hướng dẫn chung chung và còn rất sơ sài. Trong bài viết này, mình sẽ hướng dẫn các bạn tăng tốc WordPress một cách toàn diện, tổng hợp tất cả các cách, thủ thuật để tăng tốc trang web của bạn

Bạn sẽ học được gì trong bài viết này

  1. Tại sao tốc độ website lại rất quan trọng?
  2. Tổng hợp tất cả phương pháp giúp bạn tăng tốc WordPress.
  3. Tóm tắt lại các phương pháp đã nói tới trong bài để bạn có cái nhìn tổng quan

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

Câu trả lời ngắn gọn ở đây là “tiền”, một trang web có tốc độ tải nhanh sẽ mang lại cho bạn tiền. Tại sao mình lại nói như vậy, mình sẽ chứng minh cho các bạn thấy:

  • 83% người dùng mong muốn các trang web để tải trong ít hơn 3 giây.
  • Thời gian tải trung bình của top 500 trang web thương mại điện tử là 10 giây
  • 79% người mua hàng sẽ không quay lại website đó nữa nếu load quá chậm
  • Một trang web chậm sẽ giảm giải nghiệm người dùng, giảm thứ hạng SEO, giảm tỉ lệ chuyển đổi.
  • Cứ mỗi 1s được được cải thiện, sẽ tăng tỉ lệ chuyển đổi lên 7%. Ví dụ, nếu trang web của bạn có doanh thu 1000$ mỗi ngày, bạn sẽ mất 25500$ mỗi năm chỉ vì website load chậm thêm 1s.
  • Cứ mỗi giây bị trễ sẽ làm giảm sự hài lòng của người dùng khoảng 16%
  • Amazon và Walmart báo cáo rằng họ mất đi 1% doanh thu nếu website load chậm thêm 100ms tức là mất 10% doanh thu nếu website load chậm thêm 1s.
  • Một chiến dịch gây quỹ của ông Obama đã mang về thêm 34 triệu USD khi giảm thời gian tải trang từ 5s xuống còn 2s.
  • Hơn 40% khách hàng sẽ rời khỏi trang web trước khi nó tải nếu họ phải chờ lâu hơn 3s.
  • Hầu hết người dùng đi động sẽ không chờ quá 10s để chờ một trang web tải.
  • 44% người mua mua hàng trực tuyến sẽ kể cho bạn bè của họ về một trang web mà có tốc độ tải chậm.
  • 51% người dùng nói rằng họ rời bỏ một trang web chỉ vì chúng tải quá chậm.
  • 64% người dùng di động muốn các trang web tải trong vòng ít hơn  4s.
  • Dựa theo các dẫn chứng ở trên, thời gian tốt nhất để làm hài lòng người dùng đó là các website cần tải trong vòng là 2s.

Tât cả những dẫn chứng trên để chúng minh một điều rằng tốc độ là tiền. Nếu bạn tối ưu tốc độ trang web của bạn, người dùng sẽ có một trải nghiệm tốt và họ sẽ tương tác nhiều hơn với website của bạn và khi đó sẽ mang lại lợi nhuận cho bạn.

Phương pháp tăng tốc WordPress toàn tập

Bây giờ sẽ đến phần tối ưu tốc độ cho WordPress, mình sẽ hướng dẫ các bạn tất cả các thủ thuật mà mình đã làm để tăng tốc WordPress, bắt đầu thôi nào!

Kiểm tra tốc độ hiện tại của website

Để biết được bạn đã tối ưu trang web của mình như thế nào thì trước tiên chúng ta cần kiểm tra tốc độ của trang web hiện tại đã. Có rất nhiều công cụ nhưng mình chỉ tin tưởng 2 công cụ sau và bạn cũng chỉ nên dùng 2 công cụ này thôi là đã quá đủ rồi :D

Mình sẽ lấy blog Crazytut để làm ví dụ trong bài viết này. Pingdom và GTmetrix là 2 công cụ kiểm tra tốc độ trang web rất chính xác và nó còn đưa ra cho bạn những thứ cần cải thiện để tăng tốc WordPress. Sau đây là kết quả mà mình đã test:

tăng tốc độ WordPress
Test tốc độ blog Crazytut tại Pingdom
tăng tốc tối ưu WordPress
Test tốc độ blog Crazytut tại GTmetrix

Thời gian tải ở đây là tổng thời gian tải xong toàn bộ trang web từ khi người dùng bắt đầu nhập URL đến khi load xong, mình đã kiểm tra 3 lần để tránh trường hợp kết quả không chính xác nhưng cả 3 lần đều cho kết quả như sau. Các bạn có thể thấy cả 2 công cụ chấm điểm khá chuẩn khi thời gian load time là tương đương nhau, khoảng hơn 3,7s chút. Giờ các bạn hãy dùng 2 công cụ này để kiểm tra tốc độ trang web của mình đi nào để lát nữa so sánh trước và sau khi tối ưu, bạn đã cỉa thiện tốc độ như thế nào. Giờ chúng ta sẽ đi chi tiết từng phương pháp nhé:

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 tại Amazon AWS, Digital OCean, Google Computer Engine, đây là 3 nhà cung cấp hàng đầu hiện nay còn hosting thì có HostGator, WPengine, Kinsta. Giá hosting giờ cũng rất rẻ rồi chỉ từ khoảng 3$/tháng thậm chí nếu bạn dùng tại Stablehot giá chỉ hơn 1$/tháng và cho tốc độ cũng rất tốt tuy không được bằng các nhà cung cấp kia,  còn nếu có điều kiện mình khuyên bạn nên chuyển lên dùng VPS giá cũng chỉ từ 5$/tháng cho 512MB RAM tại Digital Ocean.

Chọn theme WordPress có tốc độ nhanh

Nhân tiện trong bài này mình cũng nói luôn đến vấn đề làm sao để chọn được theme WordPress có tốc độ nhanh, các bạn hãy chọn theme theo tiêu chí sau, dùng các công cụ kiêm tra tốc độ mà mình nói ở trên để kiểm tra:

  • Ít HTTP request (nhỏ hơn 76)
  • Tổng dung lượng của trang web (dưới 1,5MB là ok)
  • Thời gian load xong toàn bộ trang web nhỏ hơn 7 giây

Sử dụng Cache và CDN

W3 Total Cache là plugin cache yêu thích của mình, Plugin này có rất nhiều chức năng, hỗ trợ rất nhiều loại cache như Page Cache, Browser Cache, Object Cache, ngoài ra còn hỗ trợ cài đặt CDN cho website. Sau đây, mình sẽ hướng dẫn các bạn cấu hình W3 ToTal Cache để có tốc độ nhanh nhất. Bạn cài đặt plugin W3 Total Cache vào, phàn cài đặt thì mình không hướng dẫn nữa vì nó quá cơ bản rồi, sau khi cài đặt bạn vào phần General Settings: Tích chọn Enable ở các mục Page cache, Database Cache, Object Cache, Browser Cache. Vẫn trong phần General Settings tại các mục Page cache method, Database Cache Method, Object Cache Method bạn chọn là Memcached, để sử dụng được Memcached thì hosting/vps của bạn phải cài đặt Memcached, nếu trên VPS chưa cài memcache thì chạy lệnh sau( đối với Unbuntu/Debian) apt-get install php5-memcached còn nếu dùng hosting thì bạn có thể bật trong Cpanel nếu nhà cung cấp hỗ trợ còn không thì cứ chọn Opcode: Alternative PHP Cache (APC). Mình vẫn khuyến khích dùng MemCache nếu có thể.

Tiếp tục chúng ta thiết lập chi tiết cho từng loại Cache ở trên, tại Menu bên trái của W3 Total Cache bạn chọn Page Cache, trong Page Cache tích vào các mục

  • Cache posts page
  • Cache feeds: site, categories, tags, comments
  • Cache SSL (https) requests (nếu website bạn có SSL như Crazytut)
  • Cache URIs with query string variables
  • Cache 404 (not found) pages
  • Don’t cache pages for logged in users
  • Don’t cache pages for following user roles (chọn Administrator)

Kéo tiếp xuống dưới tại phần Cache Preload, để như sau:

  • Update interval: 900
  • Pages per interval: 10
  • Sitemap URL: /sitemap.xml (Nếu dùng Yoast sitemap thì là /sitemap_index.xml)

Kéo tiếp xuống tại phần Purge Policy: Page Cache chọn:

  • Front page
  • Posts page
  • Post page
  • Blog feed
  • rss2 (default)
  • Purge Limit – 10

Nhấn Save all settings để lưu lại.

Giờ chuyển sang phần Database Cache, bạn thiết lập như sau:

  • Tích vào 
  • Maximum lifetime of cache objects: 86400
  • Garbage collection interval: 3600

Nhấn Save all settings để lưu lại.

Xong chuyển sang phần Objetc Cache:

  • Default lifetime of cache objects: 2629743
  • Garbage collection interval: 3600

Nhấn Save all settings để lưu lại.

Tiêp tục sang phần Browser Cache, bạn thiết lập như sau, phần này quan trọng nếu thiết lập sai website của bạn sẽ không thể cung cấp các nội dung mới cho người dùng:

Tích chọn các mục sau trong phần General:

  • Bỏ tích chọn  

Kéo xuống phần CSS & JS, để như sau:

  • Expires header lifetime: 86400
  • Cache Control policy: cache with max-age (“public, max-age-EXPIRES_SECONDS”)
  • Enable HTTP (gzip) compression
  • Bỏ tích chọn  

Xuống tiếp phần HTML & XML:

  • Expires header lifetime: 3600
  • Cache Control policy: cache with max-age (“public, max-age-EXPIRES_SECONDS”)
  • Bỏ tích chọn  

Media & Other files:

  • Expires header lifetime: 31536000
  • Cache Control policy: cache with max-age (“public, max-age-EXPIRES_SECONDS”)
  • Enable HTTP (gzip) compression
  • Bỏ tích chọn  

Nhấn Save all settings để lưu lại.

Nếu bạn có dùng CDN thì cần tích Enable CDN lên vì W3 Total Cache có hỗ trợ thiết lập CDN cho website còn thiết lập như thế nào thì khi dùng của nhà cung cấp nào đều sẽ có hướng dẫn cho bạn, mình không nói ở đây, như vậy là xong thiết lập Cache và CDN :D

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?

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. RIOT là một phần mềm nén ảnh rất tốt trên máy tính, hỗ trợ nén hàng loạt kéo một loạt vào là xong, có xem trực tiếp ảnh trước và sau khi nén để bạn quyết định có nén hay không và đặc biệt không hề giảm chất lượng.

Xem thêm: RIOT – Phần mềm nén ảnh cho web tốt nhất

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 plugin a3 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 :D

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-Optimizecà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à.

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 :P

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
  • 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 ?>
function crazytut_remove_script_version( $src ){
    $parts = explode( '?ver', $src );
        return $parts[0];
}
add_filter( 'script_loader_src', 'crazytut_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'crazytut_remove_script_version', 15, 1 );

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

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 

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.

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 websiet 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ừ websiet 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 :D 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;
}

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">

Hay tương tự đoạn code sau:

if (function_exists(‘favicon’)) { echo favicon(get_option(‘favicon’)); }

có thể thay thế bằng đoạn HTML sau:

<link rel=”icon” href=”https://www.crazytut.com/static/images/favicon.ico” type=”image/x-icon“>

Tóm tắt lại  các cách tăng tốc WordPress

Nói cũng hơi nhiều rồi, mình xin tóm tắt lại các phương pháp trong bài để bạn có cái nhìn trực quan hơn, dưới đây là tổng hợp tất cả các phương pháp tăng tốc WordPress mà mình đã làm để tối ưu tốc độ cho blog

  1. Chọn hosting / vps chất lượng ( Digital OCean, Amazon AWS, Stablehost, HostGator)
  2. Chọn theme WordPress có tốc độ nhanh (tổng dung lượng trang thấp hơn 1,5MB, HTPP Request ít hơn 65)
  3. Sủ dụng CDN (nếu có thể hoặc website hoạt động tại nhiều quốc gia)
  4. Sử dụng Cache (W3 Total Cache là tốt nhất, cấu hình như trong bài là ok)
  5. Nén và gộp JS,CSS (Sử dung Auto Optimize)
  6. Tối ưu ảnh (Dùng RIOT trên máy tính và plugin WP-SMush)
  7. Dọn dẹp Database thường xuyên ( Dùng plugin WP-Optimize để làm việc này tự động)
  8. Xoá bớt plugin không dùng (Cái gì thực sự cần hãy dùng)
  9. Gõ bở Query String khỏi URL (dùng plugin Remove Query Strings From Static Resources hoặc cấu hình trong W3 Total Cache hoặc code)
  10. Bỏ chọn bỏ chọn Force Rewrite Titles trong SEO > Titles & Meta
  11. Tắt Pingback và Trackback
  12. Luôn cập nhật WordPress lên phiên bản mới nhất
  13. Cản trở Image HotLinking
  14. Thay đoạn code PHP không cần thiết bằng HTML

Trên đây là toàn bộ các phương pháp để tăng tốc WordPress, tất nhiên mới chỉ là tối ưu cho WordPress thôi nhé, bạn cần tối ưu server nữa nếu dùng VPS, tham khảo thêm các bài viết về tối ưu WordPress trên blog Crazytut

  1. Hướng dẫn cài đặt VPS tối ưu tốc độ (NGINX, PHP-FPM, MariaDB)
  2. Cấu hình tăng tốc cho NGINX toàn tập
  3. Chuyển thư mục lên RAM để tăng tốc website
  4. Cài đặt Varnish Cache để tăng tốc độ WordPress

Giờ hãy mở Pingdom hay GTmetrix ra và kiểm tra xem tốc độ website WordPress đã cải thiện được bao nhiêu rồi, comment bên dưới cho mình biết nhé!

Mình sẽ tiếp tục cập nhật bài viết này khi có thêm các phương pháp mới, các bạn hãy cập nhật thường xuyên nhé hoặc đăng ký nhận bản tin trên blog và mình sẽ gửi nó cho bạn ngay khi có.

Cảm ơn các bạn. Chúc các bạn thành công!