Site Loading Performance

There are a several things, that help to increase a website loading speed.

  1. Try using AS FEW PLUGINS AS POSSIBLE. Many plugins with frontend additional features load their files. Every single file (CSS, JS, font, etc.) from a 3rd-party plugin decreases page loading speed.
  2. If you don't have any PHP customizations DO NOT use the Impreza child theme. If you're using a child theme for CSS customizations only, we recommend to move that code into Theme Options > Custom Code > Custom CSS.
  3. Go to Zephyr > Theme Options > General and disable the "Preloader Screen" option because this allows displaying meaningful content on page load.
  4. Go to Zephyr > Theme Options > Button Styles and remove extra styles that you're not using. Every single Button Style adds a lot of CSS code and increases the size of the final CSS file. If some website buttons used the removed style, they will be shown with the first button style instead.
  5. Go to Zephyr > Theme Options > Advanced > Theme Modules, and turn OFF the Gutenberg (block editor), if you haven't created new pages with it.
  6. Go to Zephyr > Theme Options > Advanced > Website Performance, and turn ON all options: 
  7. On the same page enable Optimize JS and CSS size option and then click the Auto Optimize button, which removes extra resources on the site frontend:
    Click the Auto Optimize button every time you add a new element to your website content in order to regenerate styles and scripts so that the element works as intended.
  8. If you have any images in the first visible viewport (such as a logo image in the header), you need to disable their lazy loading. You can do that in settings of the relevant element. Check why it's important
  9. Convert images to modern formats (WebP or AVIF). We recommend using the Converter for Media plugin, as of March 2024, it is the best free WebP converter for WordPress.
    • Once it's installed, go to Settings > Converter for Media, and press the Start Bulk Optimization button. In most cases there is no need to change the default settings.
  10. Set up your website cache. We recommend using the LiteSpeed Cache plugin, as of March 2024, it is the best free all-in-one caching solution for WordPress. Once it's installed, enable the following basic options:
    • At the Cache > Browser settings turn on the “Browser Cache”
    • At the Page Optimization > CSS Settings turn on the “CSS Minify”, “CSS Combine”, “UCSS Inline” and set the “Font Display Optimization” to “Swap”
    • At the Page Optimization > JS Settings turn on the “JS Minify”, “JS Combine” and set the “Load JS Deferred” to “Deferred”
    • At the Page Optimization > HTML Settings turn on the “HTML Minify”, “DNS Prefetch Control”, “Remove WordPress Emoji”, and “Remove Noscript Tags”
  11. If you have a lot of traffic on your site it will be good practice to use some CDN, we recommend CloudFlare, it has a free plan with all basic features.
  12. Always check your website performance and know some tips to improve it at GTmetrix and PageSpeed.

The "Eliminate Render Blocking Resources" issue may appear in some cases after following all of the above steps. The only solution for this is to manually create separate CSS styles based on your page content. This cannot be automated in Zephyr or any other plugin.