Performance optimization is crucial when creating WordPress e-commerce sites, especially for sites like WoodMart Such a feature-rich theme. In order to ensure that visitors enjoy a smooth shopping experience, we needed to take some optimization measures, especially in terms of reducing the size of JS/CSS files and enabling delayed loading.

How to reduce JS and CSS files?

1. Merge and compress files

To combine multiple JS or CSS Files are merged into a single file, which reduces the number of requests and reduces the burden on the server. Most of the JS and CSS files can be compressed with tools that will reduce the file size and also speed up the download. For the WoodMart theme, you can use the following methods for merging and compression:

• Using plug-ins:: Like Autoptimize maybe WP Rocket Plug-ins such as this one automatically merge and compress JS and CSS files to improve loading speeds.

• manual optimization: If you're familiar with the code, you can manually merge and compress files through the theme's file management features. For example, merge all your custom CSS files into a single file and use an online tool (such as the CSS Minifier) for compression.

Step 1: Locate the CSS file

1. Log in to the web server (either using an FTP utility such as FileZilla, or the file manager in the hosting control panel)
2. Enter the path:
   /wp-content/themes/your-theme/(will) your-theme (Replace with the current subject name)
3. Find all custom CSS files (wordpress Appearance → Theme File Editor → style.css)

Step 2: Merge multiple CSS files into a single file

• Open all the CSS files to be merged locally in a text editor (e.g., VS Code or Notepad++) in order.
• Copy and paste the contents into a new file with the suggested name:style-merged.css

• Merge in order to avoid style conflicts and duplicate overrides (e.g. global styles first, custom overrides second)

Step 3: Compress the merged CSS file with an online tool

• Access online compression tools, for example:
  • https://cssminifier.com
• Paste the merged CSS content and click Minify.

• Copy the compressed code and save it as style-merged.min.css

Step 4: Upload the compressed CSS file

• Place the compressed style-merged.min.css Upload it to the theme's CSS directory, for example:
  /wp-content/themes/your-theme/assets/css/

2. Delayed loading of non-critical JS files

Some JS files may not be a critical part of the page load and can be optionally delayed. By reducing the number of JS files that are initially loaded on the page, you can significantly improve the loading speed of the page.

• Enabling delayed loading with plugins::WP RocketPlugins like Autoptimize provide the ability to delay loading JS. You just need to enable the relevant settings and the plugin will automatically optimize your site.

• Manual delayed loading: You can also modify the theme by modifying the functions.php file, using the defer maybe async attribute to delay loading non-critical scripts. For example, using the defer attribute to delay loading most of the JS script in the page until the page is fully rendered.

Step 1: Backup your website

Before making any code changes, it is recommended that you back up your website, or at least the currently used functions.php file in case a modification error causes the site to report an error.

Step 2: Open functions.php file

1. Login to WordPress Backend
2. Go to [Appearance] > [Theme File Editor].
3. On the right hand side find and click on functions.php(Theme Functions) file

Step 3: Insert the following code to add the JS defer causality

Example: Add defer Properties (exclude jQuery)

function add_defer_attribute($tag, $handle) {
    // Exclude jQuery (add more handles as appropriate)
    if (in_array($handle, ['jquery'])) {
        return $tag;
    }
    return str_replace(' src', ' defer src', $tag);
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

Step 4: Save and test page load

• Click [Update File] in the upper right corner
• To access the front page, press F12 to open the browser developer tools and check for the Whether the label has been added defer maybe async

• Check that the page functions correctly to avoid script execution order problems

3. Remove unnecessary plugin scripts and styles

Some plugins automatically load their CSS and JS files on every page, and many times these scripts don't need to be loaded on every page. You can remove unnecessary scripts and styles by doing the following:

• Disable unnecessary plug-ins: Regularly check for and disable plugins that are no longer in use or are unnecessary to avoid them loading additional resources on the page.

• Disabling page-specific scripts: For loading a specific script for a specific page, you can load the script using the wp_dequeue_script() maybe wp_dequeue_style() function in the functions.php file to remove unneeded scripts and styles.

add_action('wp_print_scripts', function () {
global $wp_scripts; foreach ($wp_scripts->queue as $script) {
foreach ($wp_scripts->queue as $script) {
echo $script . "
";
}
});

This code is inserted to output all script names on the front end.

Enable delayed loading of images

Delayed loading of images(Lazy Load) is a technique for loading page content on demand. Lazy loading means that images are loaded only when the user scrolls to the appropriate part of the page, rather than loading all the images at the beginning. In this way, the resource requirements for the initial loading of the page can be significantly reduced and the loading speed can be increased.

• Enabling Delayed Loading in WordPress Starting with WordPress 5.5, WordPress comes with the ability to delay loading images. You can delay the loading of images by editing the wp-config.php file to enable this feature. Simply add the following code to the file: define('WP_REDIS_ENABLE', true); If you are using the latest version of WordPress, then image delayed loading should have been enabled automatically. You can check this by looking at the page source code, checking the loading="lazy" Does the attribute appear in the img Tag up to validate this feature.

• Enable with plugindelayed loading If you want more granular control over the delayed loading feature, or want it to apply to other media files such as video as well, you can use a delayed loading plugin such as a3 Lazy Load maybe Lazy Load by WP RocketThe

• Optimize images in WoodMart themes The WoodMart theme offers powerful image optimization options. In the WordPress backend, go to WoodMart Theme Settings and select the Performance tab to enable relevant image optimization options such as delayed image loading, automatic image resizing, etc.

Other optimization recommendations

1. Enable Browser Cache
   By enabling browser caching, users will load more static resources when visiting a website instead of re-downloading them each time. This can be accomplished by adding the .htaccess file to configure the caching rules to do so.
2. Use of Content Delivery Networks (CDNs)
   A CDN caches and distributes your site's content to multiple server nodes around the world, dramatically reducing load times for users around the globe.WoodMart supports integration with most CDN services, such as CloudflareKeyCDN, KeyCDN, etc.
3. Optimize server performance
   Choosing the right hosting environment and configuration is very important for website performance. For feature-heavy themes like WoodMart, choosing a server that supports PHP 7.4 or above and enabling a caching system (such as Redis or Varnish) can be an effective way to improve performance.

summarize

Optimizations such as reducing the size of JS/CSS files and enabling delayed loading can significantlyUpgrading WoodMart Theme loading speed and performance. Merging and compressing files, delaying the loading of images, and removing unnecessary scripts are all effective measures to improve the responsiveness of your website.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off