Wordpress là một CMS platform tuyệt vời nhưng nó khá chậm và ngốn tài nguyên nếu như bạn không biết tối ưu hóa đúng cách bất chấp nó được sử dụng rất rộng rãi không chỉ ở Việt Nam mà ở toàn thế giới. Trong bài viết này mình sẽ chia sẻ với mọi người một số kinh nghiệm tối ưu hóa tốc độ Wordpress mà mình đã sưu tầm được.

Ngoài lề cho bạn nào chưa biết: Wordpress hiện nay chiếm hơn 1/2 trong các hệ thống quản trị nội dung trên toàn thế giới (theo số liệu của ManageWP) - nghĩa là có khoản 74 triệu website hiện đang sử dụng Wordpress.

Tăng tốc độ Wordpress của bạn - những cập nhật mới 2017
Bây giờ việc của bạn là cố gắng đọc và tối ưu những gì mình đề cập ngay bên dưới đây. Càng tối ưu được nhiều thứ được đề cập bên dưới tốc độ tải trang càng được cải thiện và hiệu suất website dĩ nhiên sẽ càng cao.

Những nội dung được mình đề xuất:

1. Sử dụng một theme/framework phù hợp.
2. Sử dụng cache.
3. Triển khai một mạng lưới Content Delivery Network.
4. Tối ưu hóa Database.
5. Tối ưu hóa hình ảnh.
6. Bật nén Gzip.
7. Giảm số lượng plugin - chỉ giữ lại những gì cần thiết.
8. Tối ưu hóa font sử dụng trên web.
9. Tối ưu hóa Font Awesome Icons.
10. Lazy Load Image, Video,Disqus
11. Giảm thiểu Javascript và CSS.
12. Giảm thiểu các HTTP request.
13. Tắt Hotlink.
14. Disable Pingbacks and Trackbacks
    
15. Chỉ định kích thước ảnh.
16. Khắc phục vấn đề admin-ajax.php chậm.
17. Điều chỉnh MySQL.
18. Chọn một nhà cung cấp Hosting đáng tin cậy.

Từng nội dung cụ thể sẽ đươc mình đề cập ngay dưới đây. Bạn chú ý làm từng phần và tập trung vào những gì trong khả năng bạn cho phép - không nhất thiết phải làm tất cả nếu như mình không có khả năng làm điều đó.

1. Sử dụng một theme/framework phù hợp.
Phía sau một hệ thống xây dựng trên nền tảng Wordpress là các thuật toán, dữ liệu được yêu cầu và xây dựng dựa trên cơ sở nội dung cần xuất ra của theme. Đôi lúc những dữ liệu được theme cung cấp lại rất nhiều - nhiều hơn mức bạn cần thiết khiến cho hệ thống cần thời gian xử lý lâu hơn. Hãy dựa trên những gì bạn cần mà quyết định một theme phù hợp. Thực tế mà nói thì theme mặc định Twenty Fifteen là một theme rất nhẹ và load rất nhanh. Nếu những gì bạn cần chỉ đơn giản thôi thì đây cũng là một lựa chọn không tồi.

Hãy cẩn thận khi mua theme trên ThemeForest hay Creative Market. Mình cũng thích những theme trên đó nhưng đôi khi để bán được nhiều theme hơn, những bạn dev phải đưa thêm nhiều tính năng đôi lúc không cần thiết. Bạn cần tỉnh táo và lựa chọn chỉ những gì bạn cần thôi. Bạn có thể thử Total WordPress theme là một dạng theme đa mục đích sử dụng. Nhiều bản đóng gói demo của họ có thể có tốc độ tải rất tốt - dưới 800ms nhưng vẫn đủ để bạn đạt được mục đích của mình.

​

Ngoài ra, các Framework như Thesis hay Genesis cũng là các Framework nhẹ và rất tuyệt để phát triển tính năng nếu bạn cần.

2. Sử dụng cache.

Caching là một kĩ thuật quan trọng để tăng tốc độ tải của Wordpress - nó lưu trữ truy vấn, nội dung, bài đăng...dưới dạng một trang tĩnh và phân phối đến người dùng mỗi khi họ cần. Nhờ đó, máy chủ không phải xử lý nhiều thuật toán, truy vấn nên cải thiện đáng kể tốc độ tải trang.

Về hệ thống caching, không thiếu plugin được viết sẵn trong kho plugin của Wordpress để bạn sử dụng mà không cần phải làm quá nhiều việc.

Plugin caching


Mình giới thiệu với các bạn một số plugin cache dữ liệu khá "ngon" sau:

• Cache Enabler (developed by KeyCDN – see benchmarks)
• W3 Total Cache
• WP Super Cache
• WP Rocket

Bypass PHP for Cached Pages
Dưới đây là một vài cấu hình bypass caching cho Nginx giúp hệ thống loại bỏ xử lý PHP nếu đã tồn tại bảng cache. Dưới đây là một ví dụ cấu hình cho plugin Cache Enabler đã nói ở trên:

PHP:

set $cache_path $request_uri;

# bypass cache if query string not empty
if ( $query_string ) {
    set $cache_path 'nocache';
}

# bypass cache for POST requests
if ( $request_method = POST ) {
    set $cache_path 'nocache';
}

# bypass cache for admin area
if ( $request_uri ~ /wp-admin/ ) {
    set $cache_path 'nocache';
}

# bypass cache for logged in users
if ( $http_cookie ~ (wp-postpass|wordpress_logged_in|comment_author)_ ) {
    set $cache_path 'nocache';
}

location / {
    try_files /wp-content/cache/cache-enabler/${http_host}${cache_path}index.html $uri $uri/ /index.php?$args;
}

Browser Caching - thêm Expire Header cho trình duyệt
Một cách cache dữ liệu nữa là cache dữ liệu dưới máy người dùng. Bằng cách thiết lập thời gian hiệu lực của header. Mình đã có một bài viết về cách cache dữ liệu này ở đây. Bằng cách thêm vào .htaccess đoạn mã giúp thêm vào thời gian expire của header như sau:

Mã:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Server Caching
Đây là kĩ thuật cache nâng cao bằng cách thiết lập một hệ thống cache trên server - thứ này phù hợp với những site có truy cập lớn nhưng khá rắc rối và đòi hỏi bạn phải có quyền quản lý server để cài đăt và cấu hình. Mình không viết chi tiết ở đây vì quá dài dòng. Bạn có thể đọc thử cách sử dụng memcache.

Tìm nạp bằng tên miền thông dụng

Tận dụng những tài nguyên có sẵn trên Internet và đã được nạp trước đó trong trình duyệt (qua những website khác) như Chrome cũng là một cách để giảm tài nguyên phải tải về. Quá trình này bạn có thể thực hiện trong file header.php của giao diện, giữa cặp thẻ <head>...</head>. Quá trình này không bị chặn và chỉ thực hiện khi có thể nên không ảnh hưởng đến tải trang.

Một vài ví dụ để bạn tham khảo:

Nạp Google Fonts:

Mã:

 <link rel="dns-prefetch" href="//fonts.googleapis.com">

Nạp Google Code (JQuery)

Mã:

 <link rel="dns-prefetch" href="//ajax.googleapis.com">

Nạp Google Analytics

Mã:

 <link rel="dns-prefetch" href="//www.google-analytics.com">

Có một danh sách cho bạn tham khảo ở đây.

Xóa chuối truy vấn phiên bản khỏi file tĩnh

Bỏ đi truy vấn version của file tĩnh có thể giúp bạn tránh được một số lỗi trong cache và một số bộ nhớ đệm, proxy. Trong wordpress bạn có vài lựa chọn:
1. thêm vào file functions.php của giao diện đoạn mã sau:

PHP:

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 );

2. Nếu sử dụng W3 Total Cache, nó có sẵn lựa chọn để bạn loại bỏ version của file tĩnh.
3. Bạn có thể sử dụng plugin để loại bỏ: có một số plugin miễn phí như Query Strings Remover và Remove Query Strings From Static Resources.

3. Triển khai một mạng lưới Content Delivery Network.
Nếu bạn chưa biết Content Delivery Network (CDN) là gì thì xin mời đọc trước bài "Content Delivery Network là gì ?" để hiểu nó đã.

Có nhiều dịch vụ cung cấp cho bạn hệ thống CDN như S3 của Amazon hay MaxCDN là những lựa chọn tốt.

​

Sau khi lựa chọn, bạn có thể tích hợp hệ thống này vào Wordpress bằng plugin CDN Enabler .

4. Tối ưu hóa Database.

Wordpress sẽ ngày càng có khuynh hướng chậm dần nếu bạn không tối ưu hóa cơ sở dữ liệu của mình. Có nhiều cách để làm sạch cơ sở dữ liệu của bạn như giới hạn các phiên bản chỉnh sửa của bài viết, xóa các phiên bản cũ không cần thiết, giới hạn số trang...

Disable và giới hạn Post Revisions
Wordpress có xu hướng tạo ra các phiên bản chỉnh sửa khi bạn viết bài, cho nên nếu bạn không cẩn thận, số bài viết của bạn sẽ nhiều hơn những gì bạn mong muốn.

​

để khắc phục vấn đề này, bạn cần tắt chức năng phiên bản của bài viết hoặc giới hạn số phiên bản lại.
Để tắt chức năng chúng ta thêm đoạn mã sau vào wp-config.php. Thao tác này sẽ thay đổi thời gian kiểm tra và lưu mỗi phiên bản từ 60 giây xuống thành 5 phút, sau đó sẽ không lưu bản mới nhất xuống.

PHP:

define('AUTOSAVE_INTERVAL', 300); // seconds
define('WP_POST_REVISIONS', false);

Để giới hạn số phiên bản được tạo ra, chúng ta cũng chỉnh trong wp-config.php với thông số sau:

PHP:

define('AUTOSAVE_INTERVAL', 300); // seconds
define('WP_POST_REVISIONS', 3);

Xóa các phiên bản bài viết trước đó

Một bước nữa để làm sạch Database đó là xóa đi các phiên bản cũ không dùng tới nữa.

Có một plugin mình rất thích và hiện vẫn đang sử dụng là WP-Optimize. Mình biết cũng nhiều bạn sử dụng như mình

​

5. Tối ưu hóa hình ảnh.
Hình ảnh là thứ làm nhiều bạn đau đầu nhất bởi mang dung lượng lớn nhất và chiếm phần lớn trong những gì người dùng tải về từ website bạn.

Mình cũng đã có 1 bài viết phân tích và hướng dẫn bạn tối ưu hóa hình ảnh cho website tại: TỐI ƯU HÌNH ẢNH VÀ NÂNG CAO TỐC ĐỘ TẢI WEB. Đây là bài viết bạn nên đọc để có cái nhìn tổng quan về việc tối ưu hóa hình ảnh.

Đối với Wordpress, bạn có thể sử dụng plugin Optimus. Nó sẽ tự động tối ưu hóa hình ảnh cho bạn.



6. Bật nén Gzip.

Gzip là một kĩ thuật nén khác để tăng tốc độ tải trang ở cấp độ máy chủ. Bạn có thể kiểm tra xem trang web của bạn đã được tối ưu hóa bằng phương pháp nén Gzip hay chưa bằng trang web này: http://checkgzipcompression.com/



Nếu chưa, bạn bắt đầu thực hiện như sau:

Đối với Apache, chúng ta tiến hành thêm đoạn mã sau vào .htaccess:

Mã:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Đối với Nginx, ta tiến hành thêm vào nginx.conf:

Mã:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

Mời bạn xem tiếp phần 2: 18 tuyệt chiêu giúp cải thiện tốc độ Wordpress - P2