WordPress Page Speed Setup to Boost Performance

In this tutorial I will show you how to address page speed setup on your WordPress site to boost performance and increase your chances of ranking in Google.

Google has confirmed on various occasions that site speed is considered as one of the many ranking factors. After all a faster page speed loading time offers a better user experience.

In fact, google site speed loading is one of the metrics you find under the Core Web Vitals section in Google Search Console. Google also provides a free speed test for your site, called Google Pagespeed Insights. I explain more on this at the end of this article.

The main items I will cover in this tutorial are:

• How to Speed Up WordPress
• SG Optimizer Plugin
  • Caching Settings
  • Environment Settings
  • Frontend Settings
  • Media Settings
• Speed Test Google

How to Speed Up WordPress

To ensure website optimization for better speed performance we will need to tweak some of the settings within our hosting plugin.

Those of you who have been following my other tutorials will know that I use Siteground for my hosting and I recommend it for all WordPress site owners.

One of the benefits you get with Siteground is their Website Optimization plugin, called SG-Optimizer. This comes installed with your WP site during the WordPress installation process.

In the following sections I will show you how to tweak the SG Optimizer settings to ensure fast performance of your WordPress site. This will give you a super fast website and increase your chances of ranking on Google and other search engines.

Are you ready to speed it up?

Page Speed Setup with SG Optimizer Plugin

As mentioned, to speed up WordPress we will be using the Siteground plugin called SG Optimizer.  So the first thing we need to do is head to our WP Dashboard and click on SG Optimizer on the left-hand menu.

You will notice this plugin offers 6 sub categories in the menu:

1. Dashboard
2. Caching
3. Environment
4. Frontend
5. Media
6. Speed Test

Subcategories 2 to 5 relate to settings. We will go through these in detail in this tutorial.

Let’s dive right in.

SG Optimizer Caching Settings

From the drop-down menu click on the CACHING option first.

On the dashboard that appears here you need to adjust the following settings.

Dynamic Caching

Ensure Dynamic Caching is ON.

This allows you to store the website files in the server instead of on your website.

Why is this beneficial for your page speed setup?

Because it takes up less space on your site and thus shortens your page speed loading when users visit the website. 

File-Based Caching

It’s recommended that the File-Based caching option is turned ON also. This speeds up your website to visitors by creating static HTML versions of the WordPress site for visitors.

Memcached

Memcached should ideally be ON, however it will not allow you to do this before adjusting some settings on your SiteGround account.

Head to the SiteGround website and log into your account.

Now go to your website dashboard, find the site you are working on and click on the SITE TOOLS box.

In this section, click the SPEED option situated in the left menu of the SiteGround page. Under ‘Speed’ you see a list showing 2 categories, Caching and CDN.

Click on the CACHING Option.

This will take you to a page that titled ‘SuperCacher’. Here you see 3 tabs under the Caching Levels title. These tabs are:

1. NGINX Direct Delivery
2. Dynamic Cache and
3. Memcached

Click on the MEMCACHED tab. Now go to the bottom and turn on the cache for all sites (just move the lever until it turns to purple).

You should now be able to turn it ON also in your WordPress dashboard.

So, go back to your WP Dashboard, go to SG Optimizer settings and turn ON Memchached option. It should work, but if it doesn’t, give it a few minutes and try again.

Caching Settings: Automatic Purge

Next setting we will turn ON is the Automatic Purge under Caching Settings.

Automatic Purge is not going to make your site faster but when you make an edit to your website it will clear the cache which allows you to see the changes you have made. I recommend you turn this ON.

To do this, just go back to you WP Caching Dashboard and press the PURGE CACHE button.

For the next 3 settings under ‘Caching Settings’, you do not need to activate anything.

So, DO NOT turn on

• exclude any URLS from caching
• exclude Post Types from Caching and
• Browser Specific Caching Option.

Finally, click on the TEST URL Caching Status to check if this is working properly. A pop-up note will indicate that everything is working fine..

SG Optimizer Environment

Next let’s head over to the Environment settings option (left-hand options in WordPress) under SG Optimizer.

This section configures the settings for HTTPS. Strictly speaking this is not a page speed setup but more security related. Similar to site speed, however, security on websites has become a super important ranking factor for search engines like Google and Bing.

HTTPS Enforce : To start off, let’s make sure that HTTPS Enforce is turned ON.

Fix Insecure Content should also be turned ON. This changes any URLS on your websites that are not HTTPS to avoid inconsistencies in the URLs that are indexed in search engines.

This indirectly also helps SEO because it avoids the confusion in your sitemap of having different URL structures and the possibility of dual URLs.

WordPress Heartbeat Optimization is ON by default however we will need to set up the frequent settings. This is used to prevent people trying to hack your website and overloading your site. It helps limit any attempt of hackers’ brute force logging into your WordPress website.

For the WordPress Heartbeat Optimization settings;

• Choose the Disabled option under WordPress Admin Pages,
• Set the Posts and Pages option to 120 seconds (about 2 minutes).
• Site Frontend option leave it disabled.

Scheduled Database Maintenance: make sure this feature is ON. This will delete drafts and trash folders that you haven’t touched for a while and maintain your site as clean and healthy as possible.

It schedules a clean and deletion of files every few months without you having to do anything. It keeps your website database lighter for fast performance.

SG Optimizer Frontend Settings

Next up is the Frontend Option.

Let’s head back to the side menu in SG Optimizer and click on FRONTEND.

Now in this page at the top you will notice 3 tabs which are: ‘CSS’, ‘JavaScript’ and ‘General’. Let’s look at how each of these will help our page speed setup.

CSS Tab

First click on the CSS Tab and ensure the setting here are as follows:

Minimy CSS Files: this should be ON. This setting removes comments and dead spaces in your CSS files to make them smaller in size and therefore faster to load.

Exclude from CSS Minification: Do not edit this.

Combine CSS Files: Turn this ON (unless you are using Cloudflare DNS).

Exclude from CSS Combination: No need to turn this on

PreLoad Combined CSS: Turn this ON.

JavaScript Tab

Next click on the JAVASCRIPT tab (top of page).

Here, we will use the same reasoning as for CSS. So, if you’re using Cloudflare, you want to minify the JavaScript code, but not combine the files.  If not using Cloudflare then Turn both ON.

To ensure fast performance on your WordPress site, the setting in JavaScript Tab should be as follows:

Minify JavaScript File: This should be turned ON.

This will load some of your Java Scripts after the content of your page which will boost page speed loading and gain you some SEO bonus points.

Exclude from JavaScript Minification: Do not touch this setting.

Combine JavaScript Files: Turn this ON (Leave Off if you have Cloudflare set up).

Exclude from JavaScript Combination: Do not touch this setting.

Defer Render-blocking JavaScript: Keep this ON. This will load some of your JavaScript after the content of your page which will make your page load faster and improve your google site speed score, thus improving your core web vitals.

Exclude from Deferral of Render-blocking JS: Do not edit this. Siteground does this automatically. They do it for some core WordPress files.

General Tab

Finally we have the GENERAL tab (top of page). Click on this and ensure the setting here are as follows:

Minify the HTML Output: Make sure this is ON. This removes unnecessary characters from your HTML output to reduce the data size and improve your site loading speed.

Exclude from HTML Minification: Do not edit this.

Web Fonts Optimization: Tun this ON. It will help pre-load your google fonts and therefore speed up WordPress websites, since the browser does not have to spend time caching fonts and rendering them each time.

Fonts Preloading: This is the list of fonts you want to be preloaded.

The plugin automatically detects the fonts you are using and pre-loads them on its own. You can see the list of pre-loaded fonts in this section, by clicking on the ‘fonts’ link in blue (found on the right-side of this section).

Remove Query Strings from Static Resources: Make sure this is turned ON.

Disable Emojis: It’s up to your preference if you want to disable emojis or keep them. If you think you will be using Emojis on your website, then turn it OFF. If you don’t use emojis then disable it (turn it ON) so that it does not load emojis and thus reduces file size.

SG Optimizer Media Settings

Let’s get back to the left-side menu now and click on the MEDIA settings Option.

This is one of the most important website optimization settings, especially when it comes to Google Site Speed consideration.

Why?

Because any media files, such as images and videos, which you will be uploading on your website can be quite large and have the potential to reduce your page speed load time considerably.

The SG Optimizer plugin will eliminate the excess size of these media files to optimize them for best load speed, while at the same time not compromising image quality.

In the past I remember having to install a separate plugins to be able to optimize images and compress their size but now SiteGround includes this feature for free within its plugin when you have a Hosting Account with them.

So, let’s ensure we have the best performing Media settings. In this page, the settings are split into 2 main sections, being ‘Compressions Settings’ and ‘Media Optimization’.

Compression Settings

The first setting here is Image Compression.

With image compression, the plugin will resize any images you upload to decrease the space they occupy, and the time needed for each image to load.

It’s important to understand that by doing this, the image will not be distorted, and the actual dimensions of the image will not change. There may be some reduced image quality depending on how aggressive you choose the compression level to be (in percentage terms).

The plugin has a preview feature that allows you to view the image quality as you increase or decrease the % level of compression. This allows you to understand how your image quality will look on your website for the compression level you choose.

In the Image Compression settings, click on the PREVIEW button.

A pop-window will appear that shows you an image split in 2.

On the left side you see the image as it is in original format. On the right, it will show you how the image quality will change as you increase of decrease the compression settings.

Remember the higher the compression % you choose the less space the image will take and the faster it will load. On the other hand, the quality of the image will get slightly worse.

So here you need to balance between speed and image clarity.

Thanks to SiteGround’s Improved Resizing Algorithm you will not suffer too much quality loss as you increase the compression %. Test this out and see at what percentage of compression you are happy with.

I recommend you stick to a Medium Level of compression, which is 60% compression. This is also the level recommended by SiteGround themselves.

Having said this, if you’re happy with the image quality at a higher compression rate, say 80%, feel free to set it at this level of compression.

The left and right sections of the ‘Compare Image Compression Level’ window also displays the size of the image file in kB (Kilobytes). Here you can appreciate how much kB size you are saving by compressing your images.

Once you decide on the compression % level, close the window and go back to the Image Compression settings and press on the EDIT button on the right.

Another pop-up window will come up titled Configure Image Compression. Here you set the compression level from the drop-down menu.

It’s important to also check the I want to compress my existing images, too box. This ensures that any images you might have already uploaded are also compressed based on these settings.

With regards to the Backup original images option, I suggest not to check this setting.

Reason being that, if you turn this ON, any back-ups you do on WordPress will be saved into your SiteGround Account Server space. Now this space is limited (depending on which subscription level you have), so, it’s best if you do not use up server space for images.

You can save these images on your computer, or preferably on one of your other cloud storage services, such as Microsoft’s OneDrive or Apple’s Cloud Storage which are much cheaper than the Hosting Server Space.

When you’re done, click on the CONFIRM button

The other setting, in the ‘Compression’ category is the Use WebP Images. We highly recommend you turn this ON.

WebP images is a recent image formatting technology created by Google that makes images even smaller in size to improve Google Site speed.

Media Optimization

Next Category in the Media section is Media Optimization. The settings options here are as follows:

Lazy Load Media: This is another highly recommended option to turn ON.

Lazy Load Media ensures that your images do not load before the site visitor scrolls to the level where the images come up. This makes the initial page speed loading much faster.

Exclude CSS Classes from Lazy Load and Exclude Media Types from Lazy Load are configured automatically by the SiteGround plugin, so you do not need to do anything on these options.

You can view the classes and media types it is excluding by clicking on the anchor text link on the right (in blue) of each section.

Maximum Image Width: I suggest you enable this. This option ensures the image width is limited to a maximum dimension of your choosing. (between 1920 pixels and 2560 pixels), so you don’t have excessive image size which is not required.

Having said this, when uploading images, you should be careful not to upload images which are too large in dimensions as this drastically reduces site speed.

The largest image size for the web should not exceed 1600 pixels, in my opinion.

This plugin option will automatically resize any images you upload which are above the pixel limit you set, and optimizes them down to a more manageable size.

Those were all the setting you need for the best speed setup on your WordPress site.

If you set the above-mentioned settings your website should be super fast.  Going forward, you will not have to worry about speed performance as the SG Optimizer plugin will be doing all the work based on these pre-defined settings.

Speed Test Google

How can you check your website’s speed performance?

There are various tools you can use to find load time. The most important, in my opinion, is the Google Website Speed test. After all, you want confirmation directly from Google that your site’s page speed loading time is optimal for their ranking purposes.

You can find the speed test google offers within the free suite of google tools. The google site speed test is officially called PageSpeed Insights.

All you need to do is copy and paste your site’s URL into the field at the top.

Google PageSpeed Insights will give you a score from 0 to 100, with 100 being the best and indicating super fast performance.

Make sure you check your site’s score for both Mobile and Desktop. Just click on the relevant icon at the top of the screen, under the input field to see the different scores.

Anything between 90 and 100 is super fast.

A score of 50 – 89 is good but you might want to tweak slightly certain settings for a better performance.

If you get a score below 50, then this is marked in red to signify a bad user experience and therefore you should really boost performance on your site. In other words, Speed it up!

In the picture below you can see speed test results on my WordPress website.

Not bad at all; and your site should have similar Google Speed Score if you follow the set-up I show above.

Alternative Performance Testing Tools

Other Performance Testing tools that are popular with webmasters include Cloudflare Speed Test and GTMetrix.

Both these tools offer free website speed tests and premium website optimization suggestions to boost performance.

Page Speed Setup done. What’s Next?

In this tutorial we tweaked the speed setup for our website to ensure that any changes we make to the website will boost performance and speed up WordPress. This is why these settings have been completed before we even started building our website.

Most settings we have gone through in the tutorials till now related to the backend part of our WordPress site.

In the next sessions we will be addressing the frontend part of our website. In other words, the look and feel of our site.

Before we start working on the frontend however we need to set up our website Structure. Think of this as the blueprints for our WordPress site.

If you’re looking for more related tutorials? Check out my full list of WordPress Guides.