If you’re using Sydney, you’re in luck — your website is already fast.
In this tutorial, we’ll show you how to speed up your WordPress site even more and, as a result, rank higher in Google’s search engine results.
Below, we’ll explore some of the best solutions you can use to speed up your Sydney-powered website.
Table of Contents
- Test Results
- Install the Recommended Plugins
- Optimize Your Images
- Unload Your Unnecessary Assets
- Minify and Merge Your Stylesheets and Scripts
- Enable Page Caching
- Enable Gzip Compression
- Preload Your Hero Images
- Clean Up Your Database
- Optimize Your Critical CSS
Test Results
For this tutorial and the performance tests, we used the following setup:
- a free WordPress site hosted on tastewp.com
- the free version of Sydney
- Sydney’s free Agency demo
In the screenshots below, you can see the mobile and desktop performance audits of Google’s Lighthouse tool before any optimization:
Below, you can see the performance results after the optimizations detailed in this guide:
Continue reading to learn how to optimize your site!
As always before making any major changes, start with backing up your site.
1. Install the Recommended Plugins
There are lots of plugins that work well for performance optimization — but for the purpose of this tutorial, we recommend:
- WP-Optimize – for caching, minification, etc.
- WebP Express – to serve next-generation WebP images (Note that you could also use the WebP feature from WP-Optimize, but WebP Express provides you with more control.)
- Asset CleanUp: Page Speed Booster – to unload unnecessary assets
- Preload Requests – to preload the hero images
All the plugins above are free and available at wordpress.org.
Go to Plugins > Add New in your WordPress admin area to search & install them.
Note that we’re not the developer of any of these plugins, therefore we do not provide support for them.
2. Optimize Your Images
Recommended plugin: WebP Express
Once WebP Express is installed and activated on your site, go to Settings > WebP Express to start the configuration.
We used the following settings to optimize our test site for performance:
- Operation mode – Set to Varied image responses.
- General – Set Scope to Uploads Only.
- .htaccess rules – Make sure all three checkboxes are checked.
- Alter HTML – Enable this option and keep the default settings for it.
If any part of the above configuration is not supported by your web host, adjust the settings accordingly.
3. Unload Your Unnecessary Assets
Recommended plugin: Assets CleanUp
With the Assets CleanUp plugin, you can remove the assets you don’t need on a per-page basis.
Go to your admin area and click the Assets CleanUp > CSS/JS Manager menu.
Scroll down to WPForms Lite and unload its script from the homepage, because there is no contact form there:
The above is just one example.
Depending on the plugins you have installed on your site, you may have other scripts (JS) and stylesheets (CSS) that you can remove from the homepage or other pages.
You can also go to Assets CleanUp > Settings > Site-Wide Common Unloads and disable emojis and oEmbed if you don’t need them.
4. Minify and Merge Your Stylesheets and Scripts
Recommended plugin: WP-Optimize
To minify and merge your CSS and JavaScript files, go to WP-Optimize > Minify and click on Enable Minify.
Also, make sure that all toggles that show up are turned on:
Then, open the JavaScript and CSS tabs and enable minification and merging for both JavaScript and CSS files:
5. Enable Page Caching
Recommended plugin: WP-Optimize
To cache your pages, go to WP-Optimize > Cache and toggle on the Enable page caching option:
6. Enable Gzip Compression
Recommended plugin: WP-Optimize
Gzip compresses resources, resulting in much smaller file sizes. For a fast WordPress site, it’s essential that you use either Gzip or Brotli (an alternative compression algorithm).
Go to WP-Optimize > Cache > Gzip compression to enable this functionality.
Note that Gzip may already be enabled on your site, or WP-Optimize may inform you that you’re using Brotli instead of Gzip.
7. Preload Your Hero Images
Recommended plugin: Preload Requests
With the Preload Requests plugin, you can preload the desktop and mobile hero images (i.e. the full-width background image at the top of the homepage) to make them render faster.
First, copy the URLs of your desktop and mobile hero images from the Elementor interface:
Then, go to Preload Requests, open the Images tab, insert the URLs of the image files, and save the settings:
8. Clean Up Your Database
Recommended plugin: WP-Optimize
Over time, WordPress databases can become cluttered with unnecessary data that can affect your site’s load speed.
You can use WP-Optimize to handle this by going to the WP-Optimize > Database screen.
You have two options here:
- From the Optimizations tab, perform a manual optimization of your database tables, as well as a clean-up of your post revisions, trashed posts, etc.
- From the Settings tab, run these tasks automatically within a set interval.
You can also combine these two approaches (e.g. optimize database tables manually, but do the rest weekly via the scheduler).
9. Optimize Your Critical CSS
Recommended plugins: see below
If you want to take your site’s optimization even further, you can look into optimizing your critical CSS (i.e. CSS rules needed for rendering the above-the-fold content).
Note that we have not used this optimization technique on our test site.
If you want to optimize your critical CSS, we recommend one of the following plugins:
- WP Rocket (paid);
- Jetpack Boost (free);
- Autoptimize + a paid subscription at criticalcss.com