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

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

By babyinternet on 18/6/17 lúc 00:00
  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,653
    Đã được thích:
    1,567
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Do bài viết tương đối dài và để mọi người dễ đọc, trao đổi và hỏi đáp theo những chủ đề cụ thể, mình tách bài viết hướng dẫn tối ưu hóa tốc độ Wordpress thành nhiều phần.

    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.
    Các phần trước, bạn vui lòng đọc ở đây: 18 tuyệt chiêu giúp cải thiện tốc độ Wordpress - P1

    7. Giảm số lượng plugin - chỉ giữ lại những gì cần thiết.

    Một trong những lý do khiến Wordpress bị người dùng than phiền là chạy chậm đó chính là việc người dùng cài đặt quá nhiều plugin khiến cho hệ thống phải làm việc nhiều hơn, tốn thời gian hơn để xử lý những plugin đó. Do đó, việc giữ plugin bạn cài đặt ở mức tối thiểu là rất quan trọng đối với việc tải trang. Trước khi xóa bỏ những plugin không cần thiết, bạn cần xác định những gì làm tốn tài nguyên nhiều nhất, sau đó dựa trên những phân tích tác động, bạn sẽ tự quyết định những gì nên giữ lại, những gì cần phải hi sinh cho tốc độ tải trang web.

    Dưới đây là một vài plugin có thể giúp bạn phân tích chuyện này:

    P3 (Plugin Performance Profiler)
    Đây là plugin yêu thích của mình. P3 là một plugin được viết bởi GoDaddy giúp bạn xác định những plugin nào đang gây ảnh hưởng đến hệ thống.

    [​IMG]
    Với plugin này bạn có thể thấy:
    • Thời gian thực thi của từng plugin.
    • Các plugin đang kích hoạt và thời gian tải trang.
    • Tác động của các plugin với thời gian tải trang.
    • Số lượng query thực thi của MySQL.
    • So sách các lịch sử quét.
    Chú ý: plugin này hiện chưa tương thích với PHP7

    WP Performance Profiler

    WP performance profiler là một plugin có phí với chi phí chấp nhận được (9$) được viết bởi Interconnect IT với mục đích đo lường hiệu suất của các plugin đã cài đặt. Plugin này tuy không nổi tiếng bằng plugin P3 mà mình đã nói ở trên. Tuy nhiên nếu bạn đang tìm kiếm một plugin đo lường hiệu suất tiên tiến hơn thì mình khuyên bạn thử plugin này.
    [​IMG]
    Dĩ nhiên, sau khi bạn hoàn tất việc phân tích tác động của plugin đối với việc tải trang, bạn hoàn toàn có thể tự quyết định giữ lại những plugin nào và gỡ bỏ những plugin nào cho mục đích tải trang của mình.

    8. Tối ưu hóa font sử dụng trên web.
    Trong một phân tích gần đây liên quan đến font chữ trên web, 57% các trang web đang sử dụng các font chữ tùy chỉnh, tăng 850% so với năm 2011. Một điều mà mình muốn mọi người lưu ý là nên chỉ phục vụ người dùng những font mà bạn cần. Chẳng hạn như WOFF so với WOFF2. Các dịch vụ như Typekit base64 mã hóa tất cả các định dạng, qua đó làm tăng thời gian tải trang và làm chậm trang web của bạn.

    Trong thử nghiệm đó, các font của Google hoạt động tốt hơn do sử dụng CDN của họ. Tuy nhiên, chúng chỉ hỗ trợ WOFF format. Open Sans là font phổ biến nhất trong top 10 font phổ biến. Cho nên, nếu bạn đang có tốc độ tạm ổn và đang muốn sử dụng font Open Sans của Google thì sự kết hợp tốt nhất trong Wordpress đó chính là sử dụng Open Sans và một font chữ "an toàn" trên web như Tahoma hay Arial.

    [​IMG]
    Cần lưu ý giữa font của Google và "font an toàn" trên web vì chúng có một chút khác biệt trong thời gian tải xuống là khoảng 200ms. Chuyện này chủ yếu là do font tải xuống cộng với request bổ sung font từ máy chủ Google.

    [​IMG]

    9. Tối ưu hóa Font Awesome Icons.
    Khi nói đến Font Awesome, bạn có vài lựa chọn để tăng tốc nó. Còn nếu bạn không sử dụng Font Awesome, bỏ qua phần này.

    Lựa chọn 1: sử dụng Hosted Font Awesome CDN mở
    Một lựa chọn cho bạn là sử dụng các host cung cấp sẵn các phiên bản Font Awesome bằng phương pháp CDN. Một dự án được cung cấp bởi KeyCDN cho phép bạn sử dụng tới 25+ máy chủ hỗ trợ HTTP/2 và CORS miễn phí. Chỉ cần sử dụng mã sau chèn vào header.php của bạn.

    Mã:
    https://opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css
    [​IMG]

    Bây giờ thì bạn có thể sử dụng icon Font Awesome bất cứ chỗ nào trong hệ thống Wordpress của bạn.

    Lựa chọn 2: upload Font Awesome lên hệ thống CDN của bạn
    Lựa chọn này giúp bạn chủ động tải font này từ host của bạn cùng với hình ảnh, các tệp tĩnh khác cùng lúc nhờ đó làm website của bạn không bị ảnh hưởng bởi các URL từ bên ngoài.

    [​IMG]
    Dĩ nhiên, lựa chọn thứ 2 này sẽ giúp Font Awesome của bạn tải nhanh hơn và chủ động về tốc độ hơn.

    10. Lazy Load Image, Video,Disqus
    Lazy Load là một khái niệm tải mà bạn cần nên biết và nó việc bạn trì hoãn tải những nội dung trên trang web khi nó chưa thực sự cần thiết. Trong Wordpress điều này thường được nói đến khi người dùng cuộn trang hoặc một sự kiện nhấp chuột. Bạn có thể trì hoãn tải tải từ hình ảnh đến video hoặc thậm chí là hệ thống bình luận Disqus.

    Lazy Load Images
    Để trì hoãn tải ảnh, có một plugin nhỏ, miễn phí rất hay gọi là BJ Lazy Load. Plugin này sẽ thay thế tất cả các hình ảnh, thumbnail, gravatar, images, iframe nội dung bằng một replaceholder và chỉ tải nội dung khi người dùng cuộn chuột. Plugin này đồng thời cũng hoạt động với các widget của Wordpress nữa. Ngoài ra, nếu bạn sử dụng plugin WP Rocket, nó cũng có lựa chọn lazy load image.

    Lazy Load Videos
    Để trì hoãn tải video, bạn có thể sử dụng plugin Lazy Load for Videos. Plugin này sẽ thay thế đoạn mã chèn video trên Youtube hoặc Vimeo bằng một hình ảnh xem trước có thể click được. Nêu trang web của bạn có nhiều video thì plugin này sẽ hỗ trợ trang web bạn tải trang khá tốt.

    Lazy Load Disqus
    [​IMG]
    Disqus là một plugin tuyệt vời và có thể là một rào cản lớn đối với các spammer bởi vì nó ngăn chặn gần như lên đến 99%. Tuy nhiên, bản thân Disqus cũng có thể là một rào cản lớn khi nó tạo ra 10+ request HTTP và có thể làm chậm trang web của bạn. James Joel đã phát triển một plugin gọi là Disqus Conditional Load - plugin này sẽ loại bỏ gần hết request trong lần tải đầu tiên. Nó cũng rất thân thiện với SEO bởi Google vẫn có thể thu thập dữ liệu trong bình luận

    11. Giảm thiểu Javascript và CSS.
    Khi nhắc đến tối ưu hóa tốc độ tải trang web, việc làm nhỏ kích thước file và kết hợp file rất quan trọng.

    Giảm thiểu kích thước
    Giảm thiểu kích thước nghĩa là loại bỏ những ký tự không cần thiết trong nội dung để làm nhỏ kích thước file HTML, Javascript, CSS - những thứ không bắt buộc phải tải xuống. Chẳng hạn như:
    • Kí tự khoảng trắng.
    • Ký tự xuống dòng.
    • Ghi chú(comment).
    • Dấu phân cách.
    Việc này làm giảm tốc độ tải trang vì nó làm giảm mã của tài nguyên tải về.

    Kết hợp
    Là quá trình kết hợp nhiều file CSS, Javascript vào 1 file duy nhất với mục đích duy nhất là làm giảm thiểu HTTP request.

    Bạn có thể sử dụng plugin trong Wordpress để làm việc này, ví dụ như plugin WP Rocket có sẵn những tùy chọn này:
    [​IMG]
    Hầu hết các plugin tối ưu hóa cache có những tùy chọn này, nhưng cũng có những plugin bé bé xinh xinh có thể làm việc này khác mà bạn có thể sử dụng. Ví dụ như Better WordPress MinifyAutoptimize. Ngoài ra, khi nhắc tới việc sử dụng CSS và Javascript thì bạn cũng cần nhớ 1 quy tắc là CSS nằm ở trên header còn Javascript nằm dưới footer nhé.

    12. Giảm thiểu các HTTP request.
    Giảm thiểu HTTP request rất quan trọng. Bạn cần làm theo các hướng dẫn mình trình bày dưới đây để khắc phục vấn đề gravatar và các yêu cầu tải emoji bổ sung từ phiên bản 4.2.

    Gravatars
    Nếu bạn sử dụng hệt thống comment mặc định của Wordpress, nó sẽ tạo ra mỗi HTTP request cho mỗi gravatar. Nếu trang web của bạn có nhiều bình luận sẽ dẫn đến hàng đống yêu cầu và cả chuyển hướng như thế này:

    [​IMG]
    Sau đây là 2 lựa chọn cho bạn:
    Lựa chọn 1: không sử dụng gravatar
    Lựa chọn đầu tiên là bạn tắt gravatar đi và sử dụng 1 avatar mặc định. Đây không phải một ý tưởng tồi, có điều lựa chọn của bạn như thế nào mà thôi.
    Để làm điều này chúng ta tùy chỉnh trong Setting
    [​IMG]
    Lựa chọn 2: Disqus
    Lựa chọn thứ 2 là plugin bình luận Disqus mà mình đã nói ở trên. Nếu bạn đã đọc phần trên thì cũng sẽ hiểu rõ là chúng ta kết hợp với Lazy Load Disqus để cho kết quả tốt nhất.

    Disable Emojis
    Với việc phát hành phiên bản 4.2, Wordpress đã phát hành việc hỗ trợ bổ sung thêm một số Emojis nữa. Thiệt không may là việc này đòi hỏi bạn phải tải bổ sung thêm một đoạn js wp-emoji-release.min.js?ver=4.3.1 ở phần header. Sáng tạo này của Wordpress khiến cho bạn phải tải chúng tự động dù bạn có muốn hay không.
    [​IMG]
    Bạn cần làm theo hướng dẫn dưới đây để loại bỏ việc đòi hỏi tải thêm yêu cầu bổ sung này.

    Đầu tiên, trong phần Writing Settings bạn cần bỏ phần convert emoticons. Sau đó chúng ta thực hiện tiếp các bước bên dưới.

    [​IMG]

    Lựa chọn 1: Wordpress plugin
    Bạn sử dụng plugin Disable Emojis của tác giả Ryan Hellyer. Plugin này sẽ tắt các Emojis từ phiên bản 4.2.
    Lựa chọn 2: Wordpress function
    Nếu bạn không muốn sử dụng plugin và thích nghịch ngợm với code tí chút thì có thể thêm đoạn mã sau vào functions.php
    PHP:
    /**
     * Disable the emoji's
     */
    function disable_emojis() {
        
    remove_action'wp_head''print_emoji_detection_script');
        
    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();
        }
    }
    Vô hiệu hóa script ở cấp độ trang

    Không phải đoạn script nào bạn cũng cần cho toàn trang web. Mình ví dụ như đoạn mã của plugin Contact Form 7 sẽ được gắn ở tất cả các trang nhưng thực tế bạn chỉ cần cho trang liên hệ hoặc một số trang nào đó mà bạn có form liên hệ. Có một plugin gọi là Gonzales sẽ giúp bạn chỉ định một đoạn mã chỉ được tải ở những trang nào mà thôi - tuy nhiên nó không hề miễn phí (29$).
    [​IMG]

    Vô hiệu hóa mã nhúng
    Từ Wordpress 4.4 sẽ có một đoạn mã tự động nhúng vào trang là wp-embed.min.js cho phép bạn dễ dàng nhúng video, hình ảnh, tweet...Ví dụ Wordpress sẽ tự đông chuyển URL thành mã nhúng video Youtube và thậm chí cung cấp một bản xem trước trong trình biên soạn nội dung. Phần lớn người dùng không dùng tính năng này hoặc không cần nó. Vấn đề đối với tính năng này là nó tải tệp lệnh trong mỗi trang và chúng ta có vài cách để vô hiệu hóa nó.
    - Lựa chọn 1: plugin
    Bạn sử dụng plugin Disable Embeds của tác giả Pascal Birchler. Plugin này có cái hay là:
    • Ngăn tất cả các mã nhúng vào website.
    • Ngăn bạn nhúng các mã không nằm trong danh sách whitelist của bạn.
    • Ngăn chặn tải các Javascript có liên quan đến tính năng.
    - Lựa chọn 2: function.php
    Cũng như ở trên, chúng ta có thể thêm một đoạn mã vào function.php để vô hiệu hóa thay vì sử dụng plugin:
    PHP:
    // Remove WP embed script
    function speed_stop_loading_wp_embed() {
    if (!
    is_admin()) {
    wp_deregister_script('wp-embed');
    }
    }
    add_action('init''speed_stop_loading_wp_embed');
    Tắt comment
    Có một số trường hợp bạn không sử dụng đến comment mặc định của Wordpress như bạn không muốn người dùng bình luận trên trang web của bạn, bạn sử dụng một hệ thống comment khác như Disqus...Vấn đề là luôn có một file comment-reply.min.js được tải ở một post hoặc page dù bạn có tắt comment hay không.

    [​IMG]
    Chúng ta có thể loại bỏ nó bằng đoạn mã sau trong function.php
    PHP:
    // Remove comment-reply.min.js from footer
    function comments_clean_header_hook(){
     
    wp_deregister_script'comment-reply' );
     }
    add_action('init','comments_clean_header_hook');
    13. Tắt Hotlink.

    Hotlink đề cập đến ai đó liên kết trực tiếp tới một trong những hình ảnh của bạn trên máy chủ của họ. Điều đó có nghĩa là ai đó truy cập vào trang web của họ, họ sẽ tải hình ảnh từ trang web của bạn, chiếm băng thông của bạn. Bạn có thể vô hiệu hóa hotlink bằng cách thêm đoạn mã sau vào file .htaccess của bạn và cập nhật lại tên miền của bạn.

    Mã:
    RewriteEngine on
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
    RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]
    Sau khi cập nhật đoạn mã, hình ảnh hiện trên website của họ sẽ trình bày ở dạng link hỏng.
    [​IMG]
    Mời đọc tiếp: 18 tuyệt chiêu giúp cải thiện tốc độ Wordpress - P3
     
    Chỉnh sửa cuối: 18/6/17

Bình luận

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

Chia sẻ trang này