Category Archives: Speed optimization

Load async css với wordpress

Cải thiện tốc độ web thông qua tối ưu load CSS – cách áp dụng với WordPress

1. Tại sao cần load async CSS với wordpress

Bình thường các browser sẽ load các file CSS theo cách synchronous (đồng bộ) và trong lúc download và đọc các file style này, browser sẽ ngừng page rendering.

Điều này làm cho người đọc web sẽ không nhìn thấy bất cứ nội dung nào trong khoảng thời gian đầu tiên khi vào web. Các file CSS càng lớn thì khoảng thời gian này càng dài và làm cho những người đọc không đủ kiên nhẫn sẽ rời đi. Vì vậy, chúng ta cần áp dụng kỹ thuật load CSS file asynchorous (bất đồng bộ) để rút ngắn khoảng thời gian này.

Lưu ý: Với tổng dung lượng css files < 20kb thì bạn không cần phải áp dụng phương thức tải file css bất đồng bộ vì sự khác biệt đối với tốc độ tải website không chênh lệch nhiều. 

* Điều kiện để áp dụng tải file css bất đồng bộ (Load CSS asynchronously): 

Nếu chúng ta áp dụng phương thức Load CSS async cho toàn bộ css files của webpage thì trong khoảng thời gian CSS chưa được tải và đọc, nội dung của page sẽ được hiển thị unstyled và có thể tạo ra trải nghiệm người dùng không tốt (Hình dưới là FOUC – Flash of Uncontented Style của CNN)

FOUC

Để tránh hiện tượng này, có 2 giải pháp được sử dụng:

+ Thêm attribute “preload” vào các file stylesheet kết hợp với inline critical CSS vào <head> => Để làm được điều này, toàn bộ CSS của webpage cần được chia ra làm 2 phần: Critical CSS và non-Critical CSS => Công cụ tạo Critical CSS cho webpage: công cụ Critical CSS generator

+ Thêm attribute “media” & “onload”

2. Các cách load async CSS với WordPress:

2.1 Sử dụng “preload”: 

Khi sử dụng tag “rel=preload” thay cho phương thức tải đồng bộ “rel=stylesheet”, các web browser sẽ tải bất động bộ non-critical CSS. Tuy nhiên phương thức “preload” này cũng có một số nhược điểm: 

+ Có những web browser không hỗ trợ “preload”, vì vậy chúng ta cần áp dụng thêm kỹ thuật “polyfill” để đảm bảo các web browser này sẽ vẫn tải CSS theo phương thức bất đồng bộ. 

+ “Preload” có thể làm cho web browser ưu tiên tải non-critical CSS hơn những các tài nguyên khác, có thể cần tải trước. 

Các browser hỗ trợ “preload”: Xem tại đây

2.2 Sử dụng attribute “media” & attribute “onload”:

link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'";

+ Attribute “media” = “print”: áp dụng stylesheet rule vào màn hình hiển thị cho người dùng (giống như khi visitor chọn in webpage) => Browser sẽ tải phần CSS tương ứng với nội dung hiển thị đầu tiên, phần css còn lại sẽ được tải async và giảm thời gian page rendering.

 + Attribbute “onload” = this.media =all: áp dụng stylesheet rule cho toàn bộ các màn hình khi css file được tải xong. 

3. Ứng dụng Load async CSS vào WordPress:

Để thêm attribute vào tag <style> html trong wordpress, chúng ta sử dụng hook “style_loader_tagcủa WordPress. 

3.1 Cách thêm attribute media & onload vào các file stylesheet:

+ list các css file có thể load async => get $handle của tất cả các file css cần load async

Cách get handle của tất cả các style và script chạy trong wordpress: 

a. Thêm đoạn code sau vào functions.php của theme đang sử dụng:

function crunchify_print_scripts_styles() {
// Print all loaded Scripts
global $wp_scripts;
foreach( $wp_scripts-&gt;queue as $script ) :
echo $script . ' ** ';
endforeach;
// Print all loaded Styles (CSS)
global $wp_styles;
foreach( $wp_styles-&amp;amp;gt;queue as $style ) :
echo $style . ' || ';
endforeach;
}
add_action( 'wp_print_scripts', 'crunchify_print_scripts_styles' );

b. Copy toàn bộ script và style handle: 

Copy lại toàn bộ các handle hiển thị (tên script 1 | tên style 1 ….)

c. Xóa đoạn code: 

Sau khi đã lấy được list các style & script thì chúng ta nên xóa/uncomment code đi để làm sạch <head>

+ viết function add attribute vào tất cả các file css áp dụng kỹ thuật load async:

Thay thế đoạn media=’all’ thành media=”print” onload=”this.media=’all'”> trong các stylesheet bằng function dưới đây:

 function add_attributes_to_all_styles( $html, $handle ) {
     // add style handles to the array below
     $styles = array( 'font-awesome-5','another-style','bootstrap-css' );
     foreach ( $styles as $style ) 
if ( $style === $handle ) {return preg_replace( /media='all'/, /media='print' onload='this.media='all'/, $html ); };
return $html;
           }
add_filter( 'style_loader_tag', 'add_attributes_to_all_styles', 10, 2 );

+ gắn code vào function.php

+ test lại website trên các web browser mục tiêu.

Xem thêm:

+ Style được register trong wordpress thông qua hàm wp_enqueue_style

 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

3.2 Thêm attribute preload vào file stylesheet:

Để thêm attribute “preload”, tham khảo cách làm tại đây: Namehero defer CSS

Source:
+ https://www.filamentgroup.com/lab/load-css-simpler/
+ https://joshuatz.com/posts/2019/wordpress-script-and-style-tags-adding-defer-async-and-lazy-load/
+ https://stackoverflow.com/questions/28158492/add-attribute-to-link-tag-thats-generated-through-wp-register-style
+ Str_replace: https://freetuts.net/php-function/str_replace.html

Vô hiệu hóa WordPress RSS feed đúng cách

Vo hieu hoa Wordpress RSS feed

WordPress RSS feed được sử dụng để cung cấp các bài mới của website cho người đọc. Tuy nhiên nếu không dùng chức năng này, bạn nên vô hiệu hóa nó để làm gọn phần <head>. Nếu thêm code không đúng cách sẽ tạo ra lỗi error 5xx và gây ra hiệu ứng xấu lên SEO của site (có thể bị Google hạ ranking site).

Để tránh error 5xx, bạn có thể thực hiện như sau:

1. Sử dụng code thêm vào functions.php: 

Bạn vào filemanager của host, tìm đến functions.php (của theme đang sử dụng) và thêm đoạn code sau vào functions.php. Code để vô hiệu hóa RSS feed: 

function itsme_disable_feed() {
wp_die(
        __('No feed available, please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!'),
        'No feed available',
        array('response' => 200)
    );
}

add_action('do_feed', 'itsme_disable_feed', 1);
add_action('do_feed_rdf', 'itsme_disable_feed', 1);
add_action('do_feed_rss', 'itsme_disable_feed', 1);
add_action('do_feed_rss2', 'itsme_disable_feed', 1);
add_action('do_feed_atom', 'itsme_disable_feed', 1);
add_action('do_feed_rss2_comments', 'itsme_disable_feed', 1);
add_action('do_feed_atom_comments', 'itsme_disable_feed', 1);

Code để xóa link feed trong phần head của source code: 

remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );

Ghi chú: Nhớ backup funtions.php để nếu theme bị lỗi thì khôi phục lại. 

2. Sử dụng plugin như perfmatters

Cách này khá đơn giản, chỉ cần add plugin và bật các tùy chọn.

Tìm nguyên nhân plugin không hoạt động

Khi bạn cài thêm plugin hoặc triển khai code để tạo chức năng mới cho wordpress và đột nhiên một plugin/chức năng khác của website không hoạt động được hoặc hoạt động như thiết kế. Bạn cần tìm nguyên nhân gây xung đột. Cách đơn giản nhất là sử dụng plugin health check và bật chế độ troubleshooting mode lên.

1. Install và activate plugin health check

2. Chạy chế độ troubleshooting mode

3. Vô hiệu hóa toàn bộ các plugin & sử dụng theme default

4. Kiểm tra chức năng đang bị lỗi xem có chạy không hoặc bật plugin đang lỗi & kiểm tra xem có hoạt động không

5. Bật dần các plugin lên để tìm plugin gây lỗi 

6. Sau khi tìm được plugin gây lỗi => Deactivate plugin, tìm nguyên nhân cụ thể => có thể thử plugin khác có chức năng tương tự hoặc code tay để tránh lỗi. 

Ví dụ: Yoast Seo không hoạt động được chức năng on-page analysis, các page/post đều không hiển thị các gợi ý của Yoast & không hiển thị meta box => Nguyên nhân là do plugin Remove Query String. Sau khi remove & thay bằng code, Yoast Seo đã hoạt động bình thường.  

Source: https://yoast.com/help/how-to-check-for-plugin-conflicts/ 

Xóa wordpress, woocommerce version trong source code website

Để tăng bảo mật cho website wordpress, chúng ta nên xóa version đang sử dụng của wordpress, woocommerce trong source code web bằng cách thêm code vào functions.php của theme như sau:

function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');

Source: https://www.wpbeginner.com/wp-tutorials/the-right-way-to-remove-wordpress-version-number/

Optimize CSS in wordpress by preload tag

Load CSS Asynchronously

Issue:

Some CSS loaded by theme, and others loaded by plugin => Its very hard to choose “critical CSS” to load first and defer the others (non-critical css). 

How to do: 

+ LoadCSS script: need to test & implement. This script provides a JS function to load CSS dynamically & add <link rel=”preload”> to make stylesheet load asynchronously & “onload” to apply the style to pages when the css file is loaded 

Interesting source: https://jasonbaciulis.com/wordpress-performance-optimization/#server-side_caching

+ Using functions to add “preload” tag to css and inline critical CSS to head:

First, add tag rel=”preload” to css files:

function add_rel_preload($html, $handle, $href, $media) {if (is_admin())return $html;$html = <<<EOT<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />EOT;return $html;}add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Second, Insert the critical CSS into <head> by this function:

function hook_css() {?>[insert critical css here]<?php}add_action('wp_head', 'hook_css');

Note:

+ Critical CSS needs to stay in these tags: <style>critical CSS</style>

+ We need to using right tools to create critical CSS => Which tool?

+ We should combine critical CSS of all page types (page/post/product) and inline it in <head>. If the combined critical CSS is too heavy, we can use WP-Rocket or autoptimize paid solution (these tools can dynamically create critical CSS).  

 

Preload, Preconnect, Prefetch, DNS Prefetch, Prerender in WordPress

Cách triển khai các phương thức tối ưu tốc độ load trong WordPress: 

1. Preload: 

Preload: To tell browsers to fetch static resources early (image, font, js, css, videos…)

+ Some plugins to test: Better resource hints (free plugin for CSS & Js); WP Rocket (paid plugin)

+ How to test this technique: check page source (<link rel=”preload” ….>)

2. Preconnect: 

If resources are loaded from other domains (CDN, 3rd party providers…), Preconnect tells browsers to establish a connection to other domains in the background to save time for DNS lookup, redirection, TCP handshake, TLS negotiation,… 

+ Plugin to test:  Better resource hints, Perfmatters (extra tab)

+ How to test: view page source => <link rel=”preconnect”….>

3. Prefetch: 

Prefetch: To let browsers to fetch next page & store it in the local cache and serve it quickly if an user navigates around (after 1st page)

3.1 Link prefetch: prefetch static resources (img, script, css…) 

+ Plugin: Pre Party Resource hints plugin

+ How to check: <link rel=”prefetch” href=”url” as=”type of resource”>

3.2 DNS prefetch: 

DNS prefetch to perform  DNS lookup earlier & lower overall latency

+ How to use: using “perfmatters” or add the following snippet to functions.php: 

//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0); 

4. Prerender: 

Prerender helps load assets in the background but need to test carefully. 

=> Nên sử dụng code, hạn chế plugin.

Source: https://geekflare.com/implementing-preload-prefetch-preconnect-in-wordpress/

 

Async hoặc defer javascript không dùng plugin

1. Tại sao cần áp dụng “Async” hoặc “Defer” javascript:

Khi test site perfomance với Gtmetrix hoặc Google pagespeed insights, các tool này sẽ có những cảnh báo về “Defer parsing of Javascript” during initial page load kèm theo danh sách các script js. Điều này có nghĩa là các script js này được load trong phần <head> của webpage và làm cho trình duyệt web cần dừng lại để download các script này về rồi mới tiếp tục parse đoạn tiếp theo của webpage. Như vậy, trong thời gian download và đọc script, trình duyệt sẽ dừng lại đợi & web visitor không có gì để xem.  

1.1 Critical and Non-critical Javascript:

Như vậy, để tối ưu trải nghiệm người duyệt web, chúng ta cần giảm tối đa thời gian download và parse javascript của web browser bằng cách kỹ thuật “Async” hoặc “Defer” javascript. Lúc này, nếu chúng ta defer/async toàn bộ các js có trong phần head, rất có thể site của bạn sẽ không hoạt động được nữa. Do vậy, chúng ta cần list ra tất cả các javascript được load trong initial page load & kiểm tra xem js nào thì bắt buộc phải inlined trong <head> và js nào có thể áp dụng kỹ thuật defer/async => đây chính là: sự phân loại của Critical Javascript & Non-critical javascript.

Chú ý: 

+ Kỹ thuật “Async”: Browser tải script cùng với các thành phần khác của webpage & xử lý script đó ngay khi việc download script được hoàn thành => trật tự xử lý script có thể sẽ bị thay đổi so với trật tự xử lý mặc định do thời gian download các scripts có thể khác nhau. 

+ Kỹ thuật “Defer”: Browser tải script cùng với các thành phần khác của webpage & chỉ xử lý script đó khi các thành phần khác đã được tải xong => trật tự xử lý script giống như mặc định. 

1.2 Cách phân loại critical and non-critical javascript: 

Sử dụng code dưới đây để list các scripts được WordPress xử lý trong webpage:

/*
* Getting script tags
* Thanks http://wordpress.stackexchange.com/questions/54064/how-do-i-get-the-handle-for-all-enqueued-scripts
*/

add_action( 'wp_print_scripts', 'wsds_detect_enqueued_scripts' );
function wsds_detect_enqueued_scripts() {
global $wp_scripts;
foreach( $wp_scripts-&gt;queue as $handle ) :
echo $handle . ' | ';
endforeach;
}

Đoạn code trên sẽ list các scripts được xử lý vào phần <Head>. Chúng ta view source code, copy lại list này rồi comment out đoạn code này để làm sạch <head>.

Sau khi đã có list các javascript, chúng ta sẽ tiến hành phân loại các script vào nhóm critical hoặc non-critical để quyết định phương thức load. 

* Nguyên tắc phân loại javascript: 

– Hết sức thận trọng với JQuery. Script này quan trọng, được sử dụng nhiều bởi các js khác và tốt nhất nên được load càng sớm càng tốt.

– Kỹ thuật “Defer”: Các script được gói (wrapped) trong khối jQuery ( document ) .ready (  function()  { }) nên áp dụng kỹ thuật “Defer”. Thường thì các javascript này được sử dụng để tương tác với người dùng như click, mouse hover, xử lý layout 

– Nên sử dụng kỹ thuật “Async” đối với các external javascript

Bonus: Công cụ: Javascript usage tool: Here

2. Các phương thức để Defer/Async Javascript với WordPress:

2.1 Sử dụng plugin:

Có rât nhiều plugin để thêm các chỉ thị “Async” hoặc “Defer” vào các scripts & báo cho web browser phương thức load phù hợp (cần kiểm tra Critical js có được loại bỏ không để tránh site broken).

2.2 Sử dụng code:

Để thêm các chỉ thị “Async” hoặc “Defer” vào các scripts, bạn có thể sử dụng filter “script_loader_tag” trong WordPress: 

add_filter( 'script_loader_tag', 'wsds_defer_scripts', 10, 3 );
function wsds_defer_scripts( $tag, $handle, $src ) {

// The handles of the enqueued scripts we want to defer
$defer_scripts = array(
'prismjs',
'admin-bar',
'et_monarch-ouibounce',
'et_monarch-custom-js',
'wpshout-js-cookie-demo',
'cookie',
'wpshout-no-broken-image',
'goodbye-captcha-public-script',
'devicepx',
'search-box-value',
'page-min-height',
'kamn-js-widget-easy-twitter-feed-widget',
'__ytprefs__',
'__ytprefsfitvids__',
'jquery-migrate',
'icegram',
'disqus',
);

if ( in_array( $handle, $defer_scripts ) ) {
return '&lt;script src="' . $src . '" defer="defer" type="text/javascript"&gt;&lt;/script&gt;' . "\n";
}

return $tag;
}

Source:

https://wpshout.com/make-site-faster-async-deferred-javascript-introducing-script_loader_tag/

https://www.wpfaster.org/code/how-to-defer-or-async-javascript-without-a-plugin

https://varvy.com/pagespeed/defer-loading-javascript.html       

JQuery là gì, cách loại bỏ JQuery Migrate để tăng tốc web

Loai bo JQuery Migrate

JQuery là gì? Nó là một thư viện JavaScript nhanh, nhỏ, đa nền tảng và giàu tính năng. Mục đích chính của jQuery là cung cấp một cách dễ dàng để sử dụng JavaScript trên trang web của bạn để làm cho nó tương tác và hấp dẫn hơn.

JQuery Migrate (jquery-migrate.js và jquery-migrate.min.js) là các tập tin JavaScript để hỗ trợ cho những theme sử dụng các phiên bản cũ hơn của jQuery. Nếu đang sử dụng một theme hiện đại, jQuery Migrate hoàn toàn không cần thiết => Bạn có thể loại bỏ jQuery Migrate để tăng tốc Web perfomance.

Cách loại bỏ JQuery Migrate khỏi WordPress – Chèn đoạn code sau đây vào cuối file functions.php của theme hoặc child theme mà bạn đang sử dụng và lưu lại: 

//Remove JQuery migrate

function remove_jquery_migrate($scripts)
{
         if (!is_admin() && isset($scripts->registered['jquery'])) {

              $script = $scripts->registered['jquery'];
              if ($script->deps) { // Check whether the script has any dependencies 
                 $script->deps = array_diff($script->deps, array( 
                     'jquery-migrate'
                 )); 
         } 
      } 
} 
add_action('wp_default_scripts', 'remove_jquery_migrate');

Một cách khác để loại bỏ jQuery Migrate là sử dụng plugin, tuy nhiên theo mình không nên dùng để tránh làm giảm web performance. Đó là sử dụng plugin Remove jQuery Migrate.

Sau khi đã remove JQuery Migrate, bạn nên kiểm tra xem có plugin hoặc theme nào hoạt động bất thường nếu thiêu thư viện này không bằng cách bật chế độ debug:

define('SCRIPT_DEBUG', true);

 

 

14 WordPress Performance Optimization to do Without Plugin

All the below codes to be added in functions.php unless specified differently.

1. Remove Query Strings

If you have analyzed your website for load time, then you might have come across a recommendation to eliminate query strings from static resources (CSS, JS files).

Having query strings in the files may cause CDN not to cache the files; hence you may not be utilizing all caching benefits provided.

To remove the query strings, add the following code.

function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
 $src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

2. Remove RSD Links

RSD (Really Simple Discovery) is needed if you intend to use XML-RPC client, pingback, etc. However, if you don’t need pingback or remote client to manage postthen get rid of this unnecessary header by adding the following code.

remove_action( 'wp_head', 'rsd_link' ) ;

3. Disable Emoticons

Remove extra code related to emojis from WordPress which was added recently to support emoticons in an older browser.

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

4. Remove Shortlink

Starting from version 3, WordPress added shortlink (shorter link of web page address) in header code. For ex:

<link rel='shortlink' href='https://geekflare.com/?p=187' />

If not using shortlink for any functionality then you can remove them by adding below.

remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

5. Disable Embeds

WordPress introduced oEmbed features in 4.4 which allows any site to embed WordPress post remotely and it looks like this.

By adding the following code, it will prevent others from embedding your blog post and disable loading related JS file.

function disable_embed(){
wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'disable_embed' );

6. Disable XML-RPC

Do you have a requirement to use WordPress API (XML-RPC) to publish/edit/delete a post, edit/list comments, upload file? Also having XML-RPC enabled and not hardened properly may lead to DDoS & brute force attacks.

If you don’t need then disable it by adding below.

add_filter('xmlrpc_enabled', '__return_false');

7. Hide WordPress Version

This doesn’t help in performance but more to mitigate information leakage vulnerability. By default, WordPress adds meta name generator with the version details which is visible in source code and HTTP header.

To remove the WP version, add below code.

remove_action( 'wp_head', 'wp_generator' ) ;

8. Remove WLManifest Link

Do you use tagging support with Windows live writer? If not remove it by adding below.

remove_action( 'wp_head', 'wlwmanifest_link' ) ;

9. Remove JQuery Migrate

WordPress added JQuery migration from version 3.6. This is not needed if you are using the latest version of JQuery and themes/plugin are compatible with it. To remove jquery-migrate.min.js from loading, add below code.

function deregister_qjuery() { 
 if ( !is_admin() ) {
 wp_deregister_script('jquery');
 }
} 
add_action('wp_enqueue_scripts', 'deregister_qjuery');

10Disable Self Pingback

I don’t know why you need the self-pingback details on your blog post and I know it’s not just I get annoyed. If you are too then below code will help.

function disable_pingback( &$links ) {
 foreach ( $links as $l => $link )
 if ( 0 === strpos( $link, get_option( 'home' ) ) )
 unset($links[$l]);
}
add_action( 'pre_ping', 'disable_pingback' );

11. Disable or Limit Post Revisions

Post revisions in WordPress are not new and helpful to restore the post if browser crash or lose the network. But ask yourself, how many times did it happen?

By default, WordPress will save revisions for each draft or published a post, and this can bloat the database. You may either choose to disable it entirely or limit the number of revisions to be saved.

Add the following in wp-config.php file

To disable post revisions

define('WP_POST_REVISIONS', false);

To limit the number

Let’s say limit to keep max two revisions

define('WP_POST_REVISIONS', 2);

Note: this must be above ABSPATH line else it won’t work.

12. Disable Heartbeat

WordPress use heartbeat API to communicate with a browser to a server by frequently calling admin-ajax.php. This may slow down the overall page load time and increase CPU utilization if on shared hosting.

If you don’t have a requirement to use heartbeat API, then you can disable it by adding below.

add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}

13. Disable Dashicons on Front-end

Dashicons are utilized in the admin console, and if not using them to load any icons on front-end then you may want to disable it. By adding below, dashicons.min.css will stop loading on front-end.

function wpdocs_dequeue_dashicon() {
        if (current_user_can( 'update_core' )) {
            return;
        }
        wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

14. Disable Contact Form 7 JS/CSS

Using Contact Form 7 and noticed their CSS/JavaScript files are getting loaded on every page? Well, you are not alone.

The good news is you can stop loading it with below code.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Conclusion

Above will help to reduce a few HTTP request and overall page size. All the codes are available on Github. If you are looking for a premium caching and performance optimization plugin, then check out WP Rocket.

Source: https://geekflare.com/wordpress-performance-optimization-without-plugin/

Disable Woocommerce by using Plugin Organizer

Plugin Organizer

Plugin Organizer is a more comprehensive plugin that allows site admins to:

  • selectively disable active plugins by post type and request URL
  • create groups of plugins
  • change the plugin loading order

The plugin adds a metabox in the post editing screen so that the admin is allowed to override global and post type settings. This feature can be activated for post types as well, by checking the corresponding item in the General Settings screen. Other features relate to grouping and ordering plugins. More information can be found in online documentation.

Tham khảo bài này: https://dichvuhostinggiare.com/huong-dan-su-dung-organizer-de-tang-toc-cua-trang-wordpress/