Tutorial 18 tuyệt chiêu giúp cải thiện tốc độ Wordpress - P1

Thảo luận trong 'Wordpress' bắt đầu bởi babyinternet, 17/6/17.

By babyinternet on 17/6/17 lúc 21:40
  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,654
    Đã được thích:
    1,574
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    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.

    [​IMG]

    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.
    [​IMG]
    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
    [​IMG]

    Mình giới thiệu với các bạn một số plugin cache dữ liệu khá "ngon" sau:
    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);
    add_filter'style_loader_src''_remove_script_version'15);
    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 RemoverRemove 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.

    [​IMG]

    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.

    [​IMG]
    để 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 :D

    [​IMG]

    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/

    [​IMG]

    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
     

Bình luận

Thảo luận trong 'Wordpress' bắt đầu bởi babyinternet, 17/6/17.

    1. cugaituoi
      cugaituoi
      Bài viết rất chi tiết, cảm ơn bạn đã chia sẻ nhé, học wp thật vô vàn mỗi ngày 1 kiến thức mới
    2. phongle4x
      phongle4x
      Các bác cho e hỏi chút với ạ. E có tập toe tăng tốc wordpress bằng plugin này:
      • WP Super Cache
      Em có làm theo cài đặt các kiểu giờ e gặp lỗi là khi sửa code thì không thấy thay đổi gì ở trên site chính là bị lỗi gì ạ ?
    3. diendanbinhluan
      diendanbinhluan
      oh, bạn này sưu tầm hay vậy ta. Tin vui cho mình vì website mình đang SEO cũng đang sử dụng wordpress. cảm ơn bạn thật nhiều!
    4. Dark Sun
      Dark Sun
      Và quan trọng nhất là host phải nhanh...:D ! H host đểu tran lan các bác ah!
    5. babyinternet
      babyinternet
      Làm được web với hiểu về nó là chuyện khác nhau mà bác. Bác làm theo hướng dẫn thì sẽ làm được nhưng để hiểu và tự thân vận động là cả một câu chuyện dài :)

      Hosting nhanh là như nào bác ? Theo mình thì cái host cũng như cái nhà thôi: diện tích có sẵn, cửa nẻo bày sẵn không sửa được. Sử dụng cái có sẵn như thế nào cho hiệu quả là cả một nghệ thuật. Hehee...
    6. VuVanLu
      VuVanLu
      hơ,mình cũng mới làm seo nên cũng chỉ biết WP là công cụ viết bài seo chứ nó cũng nhiều tác dụng nhỉ
      Bài viết nhiều chi tiết kĩ thuật quá nên chưa hiểu lắm,cảm ơn bác đã chia sẻ kinh nghiệm cho anh em
    7. anhhuyluck
      anhhuyluck
      không thể áp dụng hết các phương pháp bạn hướng dẫn nhưng chỉ cần làm một vài bước đơn giản là có thể tăng tốc sơ sơ rùi
    8. TPDAnhSang
      TPDAnhSang
      Nói chung nếu sài wordpress đơn giản hãy bỏ tiền ra MUA cho mình 1 theme chuẩn, một plugin hỗ trợ tăng tốc website, một hosting mạnh và sử dụng ảnh vừa phải.
    9. congnghentm
      congnghentm
      Hiện tại mình cũng đang tìm hiểu wordpress, đang tập làm một trang wordpress chuyên nghiệp, cám ơn bạn đã chia sẻ thông tin hữu ích.
    10. PhiLongvioffice
      PhiLongvioffice
      Bài viết dài ơi là dài, tks bạn đã chia sẻ nha, mình bookmark để còn từ từ ngâm cíu nữa, hehe.
    11. mrleezoo
      mrleezoo
      @babyinternet chủ thới ơi cho mình hỏi chút là nếu đang sử dụng một plugin cache. Xong khi mình không còn nhu cầu sử dụng hoặc muốn đổi plugin khác thì việc ngưng kích hoạt plugin cache cũ có ảnh hưởng gì tới toàn site và tốc độ của site không ?

Chia sẻ trang này