How to Optimize WordPress Website Performance

When it comes to WordPress performance optimization, we can try as follows.

Install the theme and populate the content

When setting up our theme in a new WordPress installation, you'll usually import some dummy content. This content is meant to help you get your site up and running quickly and understand how it's built and configured. Because this content contains many images, pages, posts, and products that you may soon delete, they are not optimized for performance. Therefore, there is no need to measure the performance of the site for this step.

After installing the theme, sections of the website need to be browsed and populated with actual images, products, posts and pages. This removes all outdated data and makes the site ready for future visitors. At this stage, you need to focus on the following recommendations to ensure website speed and performance:

1. Checking SSL Certificates Make sure your website has a valid SSL certificate. This is critical to the performance and security of your website. If it doesn't, contact your hosting provider for assistance.
2. Optimized images Optimize all images and use appropriate image sizes before uploading. Refer to step 3 for more details.
3. Replacing images in virtual content Make sure to replace all images in the virtual content with your own. Some of the virtual images may load from our server and slow down your site.
4. Simplify page content Avoid creating complex pages with tons of sliders, animations, rotations, and products. Each additional page element adds complexity and DOM size, leading to performance issues. Keep your pages simple and minimize unnecessary elements.

Checking server response time and optimization

Ensuring that your web hosting server is fast and reliable is crucial for the performance of your website. On a new installation without any plugins installed, the server response time should be within the range of 0.5 to 1.2 secondsBetween. Here are some ways to measure and optimize server response times:

1. Select Test Page Server response time may vary from page to page. Typically, we test it on the shopping cart page because this page has no additional elements and the caching plugin (if enabled) does not affect it.
2. Testing with WebPageTest interviews WebPageTest, run the server response time test. Your server response time will be displayed in the "waterfalls"The first request in Fig.

3. Check and optimize server settings Ensure that GZIP compression is enabled on the server to minimize the loading time of resources. This can be accomplished by using the GiftOfSpeed probe GZIP compressionWhether it is working properly. If it is not enabled, contact your hosting provider for assistance.

Configuring Theme Performance Settings

The default configuration of our theme is very optimized to support most features. However, if there are some features you don't need, you can disable them to improve performance. Here are some options that can be configured immediately after installation:

1. Disable Gutenberg styles If you primarily use Elementor or the WPBakery page builder, you can disable all Gutenberg CSS and JS files:
   • Navigate to:Theme Setting -> performances -> CSS
   • Select:Disable Gutenberg styles
2. Setting the font display To improve performance, it is recommended that the Google fonts and icons of the font-display set to Swap::
   • Navigate to:Theme Setting -> performances -> Fonts and Icons
   • Setting:font-display because of Swap
   • For more information see Google Docs
3. Enable delayed loading If you have a large number of images on your page, you can enable delayed loading to reduce the page size:
   • Navigate to:Theme Settings -> Performance -> Delayed Loading
   • Enable:delayed loading(This option is not always on, but is useful when there are a lot of images)
4. Optimizing the WPBakery Page Builder If using the WPBakery page builder, you can reduce the CSS size by disabling unused widgets:
   • Navigate to:Dashboard -> WoodMart -> Tools -> WPBakery CSS Builder
   • Disable: unnecessary widgets
5. Initialize rotation when scrolling For all rotating elements that are not on the initial screen, it is recommended to enable the "Initialize rotation on scroll" option:
   • This reduces the initial JS execution time and improves page load speed.

6. Enable AJAX menu drop-down
   • trails::exterior condition -> menu
   • manipulate: Enable the AJAX menu option for all drop-down menus with HTML blocks to reduce the DOM size on initial page load and improve performance.

By configuring these options, it is possible to reduce the page size by 10-40%. be sure to double-check everything after enabling or disabling any of the options to make sure that no problems are occurring.

Image Optimization Steps

Images that are too large, unoptimized and improperly sized are one of the main reasons for slow page loading. Typically, images take up 50-80% of the total weight of a page. by optimizing images and reducing their number, you can significantly improve page load speed and core web metrics scores. Below are the specific optimization steps:

1. Control image size
   • Recommended Size: All images should be kept between 100-200KB in size. Average size of product and post images should be 50-150KB. large images for hero section and slider can be 150-200KB but don't exceed that.

2. Optimize images with online tools
   • Recommended Tools: Before uploading an image, use the TinyPNG and other online tools for compression. Simply upload the image to the website and download the optimized image.
3. Install the Automatic Image Optimization plug-in
   • Recommended plug-ins: If you don't want to optimize images manually, you can install an automatic optimization plugin such as Imagify. The plugin not only compresses images, but also converts them to the smaller WEBP format, further reducing the weight 20-40% of the image.

4. Setting the image size
   • Product images on the store page: By instrument panels -> exterior condition -> customizable -> WooCommerce -> Product Pictures Set the image size.
   • Blog Post Images: By instrument panels -> set up -> media, esp. news media Set the image size.
   • page-specific element: Set the image size of elements such as banners, infoboxes, galleries, etc. when editing a page using a page builder such as WPBakery or Elementor.

Key recommendations

• Optimize all images before uploading: Ensure that the image has been compressed and resized with a tool before uploading it.
• Enable WEBP format: Our theme supports WEBP format, you can further reduce the image size by converting the image to WEBP format with Imagify plugin.
• Avoid too many graphic elements: Minimize the number of images on the page and avoid excessive sliders, animations and rotations.

Install WP Rocket Cache plugin

Caching plugins are crucial for any WordPress website, as they can significantly reduce server response times and make pages load almost instantly. We recommend WP Rocket, a premium and easy-to-use caching and performance optimization plugin. Although WP Rocket is a paid plugin, its results are remarkable. If you're on a budget, try free alternatives like Autoptimize, W3 Total Cache or WP Super Cache.

Setting up the WP Rocket plugin

After activating the WP Rocket plugin, follow the steps below to configure it to ensure optimal performance:

1. File Optimization
   • CSS Minimize: Enabling this option compresses CSS files and reduces their size. While it will improve Google's page speed score, the Optimize CSS delivery and Remove unused CSS options may cause style flickering when the page loads, so we usually don't enable these options.
   • JS Minimization and Deferred Loading: Enable the JavaScript minimization option to reduce the JS file size. Delaying JS execution is a good option to reduce initial load time. However, some scripts may delay loading before the user starts interacting with them, so important JS files need to be added to an exception list. This list can be populated automatically in WoodMart version 7.0.

2. Cache Settings
   • Separate cache files for mobile devices: If you are using the Mobile DOM Optimization option, it is recommended to enable this feature to create a separate cache file for mobile devices.
   • Never cache URLs: In Advanced Rules, add page URLs that should not be cached, such as wishlist and comparison pages. Default WooCommerce pages such as My Account, Cart and Checkout are already excluded from caching.

Recommendations for further optimization

• Using a CDN: Configuring a Content Delivery Network (CDN) can dramatically improve load speeds for global visitors. Load times can be significantly reduced.

Sample Configuration

Below is our sample configuration with settings that helped us achieve fast load times and high Google Page Speed scores:

• WP Rocket -> Settings -> File Optimization: Enable CSS and JS minimization and delay loading of JS files.
• WP Rocket -> Settings -> Cache: Set up separate cache files for mobile devices.
• WP Rocket -> Settings -> Advanced Rules: Adds a wish list and comparison page URL to the Never Cache list.

How to Fix Google Page Speed Warning

The Google Page Speed report gives specific warnings based on different factors for each website. Here are the most common warnings and their fixes for our program.

1. Elimination of rendering blocking resources

This is one of the most common warnings for WordPress websites. The more resources in the header of the page, the longer the rendering blocks. Typically, these resources include CSS files, JS files, and fonts (such as Google Fonts). Here are some steps to reduce render blocking time:

• Disable Gutenberg styles: If you are not using the Gutenberg editor, you can disable its styling to minimize unnecessary CSS files (see step 2 above).
• Avoid Duplicate Google Fonts: Ensure that Google fonts are only loaded from one source. For example, if Google fonts are loaded through the theme and Elementor, you can reset the font settings in Elementor's site settings.

• Disable unnecessary Google Fonts: If you don't need Google fonts, you can disable them in the theme settings or download and load them from the server.
• Reduce unnecessary CSS files: For example, Font Awesome icon CSS files may load unnecessarily on the page. Try to use single SVG icons instead of entire icon libraries.

2. Reduce unused JavaScript

Pay attention to this warning and check all loaded JS files, especially script files of third-party plugins. Example:

• Uninstall unused plug-ins: If you do not use the Slider Revolution plugin, you can simply uninstall it. If it is only used on specific pages, you can disable its global loading feature.
• Use of lighter weight alternatives: For example, use the lightweight slider that comes with WoodMart instead of the heavy slider plugin.

3. Reduction in initial server response time

Excessive initial server response time can affect website performance. This can be optimized by following the steps below:

• Using the Cache Plugin: Installing a caching plugin such as WP Rocket can significantly reduce server response times.
• troubleshooting: If the response time exceeds 2 secondsThe root cause of the problem can be identified by the following test:
  • Disable all external plugins and measure the response time, enabling plugins one by one to find the one causing the problem.
  • Test with the default WordPress theme and compare its response time with that of the WoodMart theme. If the default theme has a significantly shorter response time, it may be a theme issue.
  • If the response time is still too long after disabling all plugins and using the default theme, it is recommended to consult thetrusteeshipservice provider, as there may be issues with server configuration or performance.

Summary:

In this article, we detail how to optimize WordPress website performance With these optimization steps, you can significantly improve your website's loading speed and user experience.