Are you looking for the best SiteGround SG Optimizer settings to speed up your website and get higher scores on GTMetrix and Google PageSpeed Insights?
Google has announced that their Core Web Vitals are now officially a ranking factor for websites as of August 2021. If you want to have your site in the elite group of fast websites that pass Google’s Core Web Vitals and get a Google ranking boost, then this SiteGround Optimizer guide is the one for you.
With so many options to choose from between WordPress caching plugins, it’s hard to know what SG Optimizer settings should be enabled, which settings should be disabled, and whether or not you have two caching plugins doing the same thing.
The SiteGround Optimizer plugin is currently active on over 1,000,000 websites and is constantly being maintained and enhanced for better performance.
With the latest SiteGround Optimizer v7, you can now use the SiteGround Optimizer plugin on websites that are not hosted with SiteGround. Previously, you used to only be able to use this plugin if you had a website hosted on SiteGround.
Based on other caching plugins that WordPress hosts provide, SG Optimizer has taken the crown as the best host-provided caching plugin on the market right now.
The best part is, when you use the SG Optimizer plugin on your website, you won’t need any additional caching plugins such as WP Rocket or anything.
In fact, the SiteGround team actually recommends that you only use their SG Optimizer plugin instead of WP Rocket because it’s faster due to being able to integrate directly with their servers.
Considering the SG Optimizer plugin comes free with a SiteGround hosting plan, it’s one of many reasons why SiteGround continues to be the king of shared hosting.
If you have a site not hosted with SiteGround such as Cloudways, I still recommend you use WP Rocket for your caching plugin (it’s much better than the Breeze caching plugin that Cloudways provides). I have a detailed WP Rocket best settings guide you can read in that case.
When you look at SG Optimizer vs WP Rocket features, SG Optimizer does about 95% of what WP Rocket does. Considering WP Rocket costs $49 for a single website license and the SG Optimizer plugin comes free with a SiteGround hosting plan, the SG Optimizer plugin provides the best value by far.
For my tests, I used a website on the GrowBig plan from SiteGround using the new Kadence Theme which easily won the best free WordPress theme award when compared against Astra and other popular themes.
Using the SG Optimizer plugin on an extensive blog post with 6000 words and 50 images, I received Google Page Speed scores of 97 on mobile and 98 on desktop. For GTMetrix, I received a 97% (A) Performance and 95% (A) Structure score with a Largest Contentful Paint of 1.0 seconds, a Total Blocking Time of 45 ms, a Cumulative Layout Shift of 0.00, and a Fully Loaded Time of 1.4 seconds. These are amazing numbers for not doing any additional optimizations.
Getting high scores like these with fully loaded times under 2 seconds is very easy by doing four things:
- Using fast, reliable hosting (SiteGround)
- Using a lightweight, customizable WordPress theme (Kadence Theme)
- Not using third-party page builders (WordPress Without Page Builders – Facebook Group)
- Using a high-performance caching plugin (SG Optimizer)
If you have a website using SiteGround hosting and are using the SG Optimizer plugin, you can easily get fast page speeds as well using the best SG Optimizer settings as I show in detail throughout this article.
This SiteGround Optimizer tutorial is the most comprehensive one on the web right now. It’s a longer one, but I encourage you to open the Table of Contents and follow along as you need.
If you go through all the settings you need, you will have a much faster site that will perform well in page speed tests.
Feel free to bookmark this page and come back if you don’t get through it all the first time around!
Use the SG Optimizer tutorial guide below to jump around as you need:
Start Blogging 101 is reader-supported. If you purchase through a link on my site, I may earn a commission. Disclosure Policy
- Caching Types
- Dynamic Caching – Enabled
- File-Based Caching – Enabled
- Memcached – Enabled
- Caching Settings
- Automatic Cache Purge – Enabled
- Manual Cache Purge – Manually purge the cache of your website. This should only be needed if the automatic cache purge doesn’t clear what it needs to.
- Exclude URLs from Caching – Here is where you can specify certain URLs on your website that you don’t want to be cached to keep them dynamic.
- Excluse Post Types from Caching – Excluse certain post types from being cached. Useful if you have certain post types that change often that you don’t want to cache, but still want to benefit from caching the rest of your site.
- Browser-specific Caching – Disabled
The settings above are the SiteGround Optimizer best settings for the “Caching” section.
The “Caching” section within SiteGround is the bread and butter of their optimization service which gives you access to three different caching levels for your website:
- NGINX Directly Delivery for your static files
- Dynamic Cache for your dynamic content
- Memcached for object caching (database)
If you want the best website speed to have the lowest TTFB times and pass Core Web Vitals, then you’ll want to enable all three caching layers within the caching section on your website which I’ll show you how to do below.
In order to enable these through your SG Optimizer plugin, let’s first make sure the backend is set up properly on your SiteGround hosting.
Sign in to SiteGround and go to Site Tools → Speed → Caching as shown below:
Dynamic Cache – Once that is done, check out the Dynamic Cache tab. You don’t actually have to enable anything here from SiteGround’s Site Tools. The Dynamic Cache only needs to be switched on through the SG Optimizer plugin. The Dynamic Cache works by caching all the resources on your site that are dynamically generated.
Memcached – Finally, switch to the Memcached tab. Make sure the Cache switch is enabled for All Sites. Using Memcached will speed up your database calls, API calls, and page rendering which, when combined with the previous two caching levels, really helps increase your page speed. After Memcached is enabled in your SiteGround account, you will then be able to go enable it in SG Optimizer.
Now that everything is set up correctly on the backend of your SiteGround hosting, let’s look at the SiteGround Optimizer plugin settings for the Caching section.
Dynamic Caching is only available to users who are using SiteGround hosting.
As I alluded to prior, SiteGround’s Dynamic Caching is a full-page caching mechanism powered by NGINX.
This feature alone is why the SG Optimizer plugin is so powerful for those hosted by SiteGround and has the most dramatic effect on your website speed performance.
If you’re wondering why SiteGround’s SG Optimizer is faster than WP Rocket for those hosted with SiteGround, the Dynamic Caching feature is why.
Remember how I had you enable Nginx Direct Delivery through your SiteGround Site Tools earlier? Once you do that on the backend, all you have to do is enable the Dynamic Caching option in SG Optimizer to start taking advantage of their caching.
File-based caching is new with SiteGround Optimizer v7. You should enable file-based caching.
Having this enabled will create static HTML versions of your pages that are stored in the browser memory.
This will significantly improve loading times on your pages for visitors.
Memcached is a very popular object caching solution. As long as you have Memcached activated in the backend of your SiteGround hosting account, then you can flip the Memcached setting ON in the SiteGround Optimizer plugin.
Now I’ll briefly explain each of the options in the Caching Settings section.
Manual Cache Purge – Clicking the “Purge Cache” button will manually purge the Dynamic Cache stored for your website. You can use this to make sure that you’re loading the latest version of your site after making changes.
Automatic Cache Purge – Enabling this option allows the SG Optimizer plugin to automatically clear parts of your cache after it detects that you made changes. For example, if you delete a category, update or switch a theme or plugin, or update your core WordPress version, the SG Optimizer will perform a full purge. Similarly, if a smaller action happens such as a post being modified, a comment being added, or a category is updated, then the plugin performs a “smart purge” rather than a full purge. You should turn this setting ON.
Browser-Specific Caching – You should only enable this option if you are experiencing issues with plugins, generating a mobile version of your site, or something similar. If you aren’t experiencing any of these issues, you should keep this setting OFF because turning it on will decrease the efficiency of the plugin since it has to create a cache separately for different browsers.
Exclude Post Types – If you need to, you can exclude a certain post type from being cached by the Dynamic Cache. For example, if you use LearnDash for online courses, you could exclude all courses from being cached since those need to be dynamic.
Excluding URLs – Similarly to the Exclude Post Types section, you could instead specify certain URLs on your site that you want to exclude from the cache. For example, if you wanted to exclude your WooCommerce checkout page from being cached, you could type “checkout” in the box and hit the “Exclude” button. Or, excluding “members/*” would exclude all URLs that contain “members/” and anything after that. Luckily for you, the SG Optimizer plugin detects when you’re using plugins like WooCommerce or Easy Digital Downloads and it will automatically add pages like checkouts by default for you so you don’t need to do it.
Test URLs for Cache Status – This allows you to type a URL from your site in and hit the “Test” button. It will tell you if the page is cached or not. This is a nice tool to confirm whether the correct pages are being included or excluded from being cached.
We are officially done with the Caching section. Time to move on to Environment Optimization!
- Enable HTTPS – Enabled
- Fix Insecure Content – Disabled
- WordPress Heartbeat Optimization – Enabled
- DNS Pre-fetch for External Domains – Enabled
- Scheduled Database Management – Enabled
- GZIP Compression – Enabled
- Browser Caching – Enabled
In the SiteGround Environment Optimization section, you can do a number of things such as enabling HTTPS, limiting the WordPress Heartbeat API, prefetching DNS requests for external domains and performing database cleanup.
For the best SiteGround SG Optimizer settings in the Environment Optimization section, you’ll want to enable every option except for Fix Insecure Content.
In the DNS Pre-fetch for External Domains area, you can fill in domains for third-party content that you’re using (Google Fonts, Google Analytics, Google AdSense, etc.) to perform the DNS connection before the file is actually needed.
Make sure Scheduled Database Maintenance is enabled.
If you are on a SiteGround GrowBig, GoGeek, or cloud hosting account, you have an additional option to enable their Ultrafast PHP option which SiteGround claims can reduce your TTFB by 50% and lower CPU usage. I would recommend enabling Ultrafast PHP if you have the option.
The only SiteGround hosting plan that doesn’t allow you to use Ultrafast PHP is the StartUp plan. If you’re on the StartUp plan, you’ll want to use the most recent (stable) PHP version which is PHP 7.4.
GZIP Compression and Browser Caching will already be enabled by default for you, so there’s nothing to do there.
I’ll go over each of the best SG Optimizer Environment Optimization settings in more detail below.
Enable HTTPS – Before you enable the Enable HTTPS option, you first have to make sure that you have an SSL certificate issued for your site domain. One of the many free perks of having SiteGround hosting is that they offer completely free certificates for all plans through Let’s Encrypt.
In order to get an SSL certificate through Let’s Encrypt set up, sign in to SiteGround and go to Site Tools → Security → SSL Manager. Choose your domain name from the dropdown, in this case, startblogging101.com, and then choose Let’s Encrypt from the Select SSL dropdown.
After you’ve chosen those two options, hit the orange Get button and SiteGround will issue an SSL certificate for your site. Once the process is complete, you should see your domain name under the Manage SSL section with a valid certificate that now says ACTIVE with an expiration date.
Congrats! Your SSL certificate has been set up successfully. Now you switch on the Enable HTTPS option in SG Optimizer.
Fix Insecure Content – Once you have the Enable HTTPS option turned on, an option will show for Fix Insecure Content. You should have this option disabled. The only time you would want to turn this option on is if you start seeing insecure/mixed content warnings on your site after you turn HTTPS on. If you aren’t seeing those warnings (which you shouldn’t be), then keep this option disabled and enjoy the benefits of a faster HTTPS website through the HTTP2 protocol!
WordPress Heartbeat Optimization
For beginners, the WordPress Heartbeat API allows your browser to communicate with WordPress when you’re logged in to the admin panel. By default, various checks are run every 15-60 seconds to handle various items such as scheduled tasks, post and page revisions, locking a post if someone is editing it, and more.
If you leave a browser tab up with WordPress running, these checks will continuously run which increases your hosting CPU usage if it’s not optimized.
Therefore, you should enable the WordPress Heartbeat Optimization toggle and completely disable the three areas or reduce their frequency which will save you precious CPU usage.
The three areas are WordPress Admin Pages, Post and Page Edit, and Site Frontend. I personally disable WordPress Admin Pages and Site Frontend and then enable Post and Page Edit and set it to 180s (see image).
DNS Pre-fetch for External Domains
You want to enable the “DNS Pre-fetch for External Domains” option in SG Optimizer.
If you use third-party content on your website (for example, Google Fonts, Google Analytics, AdSense, Google Tag Manager, YouTube videos, Gravatars, etc.), you can add these external domains here.
What DNS Pre-fetch does is that it tells the browser to perform the DNS connection before the file is actually needed.
How do you use DNS Pre-fetch for External Domains in SG Optimizer?
- Find the third-party domain you’re loading on your site
- Remove the http:// or https:// to leave only the top-level domain
- Hit the ‘Add‘ button
Scheduled Database Management
Many novice WordPress users don’t realize this, but your WordPress database can get really clogged up and hold a lot of unnecessary entries that can be cleaned up.
Luckily for you, the SG Optimizer plugin handles all of this for you without you needing to understand it all.
You want to enable the Scheduled Database Management option. This will automatically make several database optimizations once a week to keep it squeaky clean including the following:
- Perform Database Optimization for MyISAM tables
- Delete all automatically created post and page drafts
- Delete all page and post revisions
- Delete all posts and pages in your Trash
- Delete all comments marked as Spam
- Delete all expired Transients
SiteGround automatically enables GZIP Compression for you because this one is a no-brainer. This mechanism compresses all your content before it shows it to your visitors’ browsers which saves networking traffic and makes your site faster.
Since this is enabled by default within SG Optimizer, make sure you don’t have GZIP compression enabled on your CDN (Cloudflare or otherwise) as it will cause duplicate functionality.
Browser caching is another option that is automatically enabled by SiteGround once you have NGINX Direct Delivery enabled from the SuperCacher Settings section that I went over, so there’s nothing for you to do here.
This feature makes sure that the static content is cached as long as possible in your visitor’s browsers which means that if a visitor visits your website once and then comes back, your site will load instantly for them.
- Minify the HTML Output – Enabled
- Defer Render-Blocking JS – Enabled
- Minify CSS Files – Enabled
- Combine CSS Files – Enabled
- Web Fonts Optimization – Enabled
- Remove Query Strings From Static Resources – Enabled
- Disable Emojis – Enabled
These are my recommended SG Optimizer settings for the Frontend Optimization section.
The Frontend Optimization section in the SG Optimizer plugin contains a gold mine of optimizations to make your website faster.
Google has announced three Core Web Vitals (Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift) that are now officially a Google Search ranking factor as of August 2021.
Using my recommended SG Optimizer settings for the Frontend Optimization section will help you get better Core Web Vitals scores in GTMetrix and Google PageSpeed Insights to help your site rank higher in the Google search results.
In order to get the best results, I would suggest enabling every one of the Frontend Optimization settings, although some are riskier than others.
After you have enabled all these SG Optimizer options, make sure to check your site and see if everything still looks correct and isn’t having any weird issues. If there are issues, turn off each setting one by one and check your site each time to see which one is causing issues.
Read on to get an explanation of each SG Optimizer frontend optimization setting below.
Minify HTML, JS, and CSS
You will want to enable all three boxes:
- Minify the HTML Output
- Minify CSS Files
These minification options are generally very safe and have little chance of messing up your website which is why I started with these three options.
Combine JS and CSS Files
SiteGround suggests that you enable both these options:
- Combine CSS Files
Go to your website after enabling both of these options and click around each page. See if anything is out of place or not working correctly.
Keep in mind that if you’re using a page builder (such as Elementor) or plugins that add additional functionality (sliders, galleries, etc.), the chance of something breaking is a lot higher.
I can’t tell you the amount of times I’ve seen people have issues with caching plugins only to find out they’re using a bunch of third-party plugins and builders that add fancy gadgets to their site which then end up breaking. Not to mention, adding all of these things will slow down your site.
Chalk this up as yet another reason why I don’t advocate for using page builders. I use pure Gutenberg blocks and Kadence Blocks to build websites and everything works perfectly with all the SG Optimizer frontend optimization settings enabled.
Defer Render-Blocking JS
Out of all the SG Optimizer Frontend Optimization settings, this one probably has the highest chance of messing something up. That being said, it also can do wonders for page speed.
You want to enable the Defer Render-Blocking JS option in SG Optimizer.
Hit Confirm and then go to your website and click around different pages to see if all is well. If so, you’re golden!
Web Fonts Optimization
Using the SG Optimizer Web Fonts Optimization setting gives you a number of advantages to make Google Fonts load quicker.
SiteGround changes the default way to load Google fonts in order to save HTTP requests.
Make sure to enable the Web Fonts Optimization option.
Turning on the Web Fonts Optimization setting will add a “preconnect” link to
fonts.gstatic.com which does the DNS lookup, TLS negotiation, and the TCP handshake ahead of time. This results in a faster download of Google Fonts when they are requested.
When this setting is enabled and working correctly, you should be able to go to your site, right-click on any webpage and click View Page Source.
You should see this line in your website code:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
Secondly, after you enable the Web Fonts Optimization setting, you’ll see a Fonts Preloading section show.
If you already have Google Fonts being used on your website, the SG Optimizer plugin should automatically add all your Google Fonts for you.
However, if not, you can always add them manually. Make sure to provide the full URL to the font. Also, do NOT preload Google fonts that you aren’t using. This will add unnecessary calls.
After specifying your Google Fonts in the Fonts Preloading section, you can once again View Page Source on your website.
Preloading your Google Fonts will add a “preload” link in the head section of your website to ensure faster loading of those specific fonts. If everything is working correctly, you will see a link similar to the one below in your
<link rel="preload" as="font" href="https://www.website.com/wp-content/plugins/woocommerce/assets/fonts/star.woff" crossorigin="">
Changing Font-Display Properties
On top of the Web Fonts Optimization option, if you have the Combine CSS option enabled from earlier, the SG Optimizer plugin includes another nice addition by changing the font-display property to swap which eliminates the render block for those fonts.
This will help avoid FOIT (Flash Of Invisible Text) and will fix the “ensure text remains visible during webfont load” error that shows up in Google PageSpeed Insights.
Faster Alternative: Local Google Fonts
If you use Google Fonts on your website, using the SG Optimizer plugin gives you some fantastic font optimizations to help them load faster, but there are alternatives.
If you want an even faster alternative to using Google Fonts, consider locally hosting your Google Fonts.
I won’t get into detail here (this would be better for another post), but you have two options here.
Use a fast, lightweight WordPress theme that has the option to automatically host Google Fonts locally for you. For example, this site uses the Kadence theme.
The Kadence theme has a simple switch that you toggle on and it automatically hosts all your Google Fonts directly from your server to speed up your site.
If you want to read more about the Kadence theme and all the features it offers, make sure to check out my detailed Kadence theme review.
If you aren’t using a WordPress theme that has the option to locally host your Google Fonts, consider installing the OMGF (Optimize My Google Fonts) plugin to do it for you.
Fastest Alternative: Use System Fonts
Believe it or not, there is actually an even faster alternative to using Google Fonts and that’s to use system fonts.
Many good WordPress themes out there allow you to choose the system font stack as the typography on your site.
In fact, this site uses system fonts which are loaded by default by the Kadence theme and is one of the reasons it loads so fast.
When you use system fonts, there are zero calls made to fetch any font files which can save time while loading your site. Your site shows whatever the default font is for whichever device you’re using.
System fonts, FTW!
Remove Query Strings From Static Resources
WordPress appends versions onto all your scripts by default when they’re loaded. An example script with a query string looks something like this:
Enabling the Remove Query Strings From Static Resources option will take the ?ver=1.0.7 piece away from all your scripts.
Removing these version query strings improves the caching of your pages both by a CDN (if you use one) and your visitors’ browsers.
Make sure to enable the Remove Query Strings From Static Resources option.
After you enable this option, your script lines will now look something like this:
Notice that the ?ver=1.0.7 query was eliminated from the previous line of code.
By default, WordPress loads scripts to detect and show emojis that you write in your content. However, you do not want this script to run because it increases the loading time of your site.
Enable the Disable Emojis option within the SG Optimizer settings.
Don’t worry about your emojis, though! I love emojis just as much as the next person. Most modern browsers will still show emojis when it detects smileys and other things.
🙂 See? I have the Disable Emojis setting enabled and you still see a smiley.
Plus you saved precious site speed. All is good in the world!
- New Images Optimization – Enabled
- Existing Images Optimization – Have SG Optimizer automatically optimize all the images in your Media Library.
- Generate WebP Copies of New Images – Enabled
- Manage WebP Copies for Existing Images – Either delete or bulk generate all WebP image files.
- Lazy Load Media – Enabled
All of the SG Optimizer Media Optimization options focus on two things.
- Optimizing your images so that they take up less space and load faster
- Lazy loading various forms of media (images, videos, Gravatars, etc.)
I have officially dropped all other image optimization plugins such as Imagify (which I used to use with WP Rocket) and ShortPixel on all my sites hosted with SiteGround because the SG Optimizer plugin does everything you need. It’s truly an all-in-one optimization plugin.
You most likely want all of these settings enabled, but I will go over each of the best SG Optimizer settings for Media Optimization below.
New Images Optimization
In order to let the SG Optimizer plugin optimize all of your new images that you upload to your Media Library, you should enable the New Images Optimization setting.
After you do this, all you have to do is upload images to your Media Library like you would any other time and they’ll automatically be optimized to make the file size smaller.
The plugin chooses the best quality for the web which reduces the size of the images and it also strips all the metadata of the images if it exists (such as location, phone model, time, etc.) because you don’t need to have all that information.
Existing Images Optimization
In the Existing Images Optimization section, you will see a “Start Optimization” button if you haven’t already optimized all your images through SG Optimizer.
All you have to do is hit the “Start Optimization” button and the SG Optimizer plugin will go through and optimize all of your images for you.
NOTE: Make sure you have a backup of your original images because the SG Optimizer plugin will overwrite your original images to save you space.
After you hit the “Start Optimization” button, you will see a pinwheel spinning as the plugin goes through and optimizes all your images.
Keep in mind that this image optimization process happens in the background. You can close out of the tab or even let it run overnight if you have thousands of large images that need to be optimized. Just make sure that your WordPress cron functionality is enabled.
Once all your images have been optimized, you will see a success message in the Existing Images Optimization section.
Also, if you have already optimized your images but need them re-optimized again for any reason, you can click the re-optimization link in the success message.
Generate WebP Copies of New Images
This section allows you to generate WebP copies of all your images. WebP is a next-gen image format which more and more browsers are supporting. It decreases the size of your images even more without losing quality.
If you are using a CDN that has the ability to serve images in WebP format, I would suggest using that.
Otherwise, if you aren’t using anything else to create WebP images, feel free to enable the Generate WebP Copies of New Images section.
When you click the toggle to turn on this setting, you’ll see a warning pop up.
As I said before, if you are using a CDN such as Cloudflare or BunnyCDN, check to see if you can have WebP enabled through your CDN provider. Otherwise, click “Confirm.”
After you enable the Generate WebP Copies of New Images setting, you will see a dropdown with two Optimization Types for your WebP images:
I would personally suggest using lossless. Lossless optimization will make your files smaller without any noticeable degradation of quality in your images at all.
However, after you run it, if you still aren’t satisfied with the image sizes, you could optimize them even more by choosing lossy and I would shoot for around 80% quality.
Using lossy optimization does degrade the quality to achieve smaller file sizes, but by using 80% quality, you shouldn’t notice any difference still.
Manage WebP Copies for Existing Images
The Manage WebP Copies for Existing Images allows you to take action against your existing images. If you haven’t done anything in this section, yet, you should see two buttons: Delete All WebP Files and Bulk Generate WebP Files.
If you want to create WebP copies of all your existing images, hit the Bulk Generate WebP Files button.
Just like the Existing Images Optimization section that I talked about earlier, you’ll see a pinwheel spinning as the plugin goes and creates WebP copies of all your existing images.
NOTE: Unlike the Existing Images Optimization section where it replaced all your original images, generating WebP copies does exactly that… it creates copies of all your images. So, if you had 1,000 images, you’ll now have 2,000 images on the backend. Keep that in mind in case you’re low on space.
Once the SiteGround optimizer plugin has created WebP copies of all your existing images, the Bulk Generate WebP Files button will go away and you’ll see a message that says it has successfully generated all your files.
Congrats! All of your images should now be served in WebP format and all of the major browsers now support WebP.
The nice thing is that, if the browser doesn’t currently support WebP, the SG Optimizer plugin will automatically detect that and serve the non-WebP version of the image (either png, jpg, etc.). This is why the plugin needed to create copies of your images rather than completely replace them.
Lazy Load Media
- Lazy Load Iframes – Enabled
- Lazy Load Videos – Enabled
- Lazy Load Gravatars – Enabled
- Lazy Load Thumbnails – Enabled
- Lazy Load Responsive Images – Enabled
- Lazy Load Widgets – Enabled
- Lazy Load for Mobile – Enabled
- Fix for Lazy Loading Short Codes – Disabled
Okay, so now we’ve covered the whole first section of the Media Optimization tab which focused on optimizing all your images to make them smaller so your site loads faster.
Now, let’s focus on the second section, Lazy Load Media, where we’ll go through a list and choose which media types we want the SG Optimizer plugin to lazy load.
If you aren’t familiar with lazy loading, it’s easy to understand. Lazy loading is a technique used for loading web content when it’s needed rather than all at once.
Normally, if you have a blog post that contains 25 images and 2 videos, as soon as a user lands on that page, the browser would download everything it needs to show all those images and videos.
However, what if most of your users only scroll 10% down your page? Why should the browser be loading all 25 images and 2 videos (which takes a long time) if the user will never see them?
That’s where lazy loading comes into play. It only downloads the web content when the user is about to scroll it into view which saves a huge amount of data and helps page speed dramatically.
Even though WordPress includes lazy loading by default now, I would still highly suggest using the lazy loading provided by the SiteGround SG Optimizer because it does a much, much better job than the simple WordPress implementation.
To make things easy, you could enable everything in the SG Optimizer Lazy Load Media list if you’d like. I enable all of them except for the “Fix for Lazy Loading Short Codes” because I don’t use it.
I’ll go over each SG Optimizer Lazy Load Media setting briefly.
Lazy Load Iframes – This lazy loads IFrames (Inline Frames) which are often used for video embeds from other sources.
Lazy Load Videos – This will lazy load any video that you have added to your page which can be a huge help on loading times.
Lazy Load Gravatars – This lazy loads Gravatars (Globally Recognized Avatar) which are the small images used on WordPress comments and other meta areas. This setting is a life-saver for blog posts or pages with hundreds of comments (every comment is a request to the Gravatar servers).
Lazy Load Thumbnails – This lazy loads any thumbnail images that are created by WordPress (often used at the end of blog posts or in sidebars).
Lazy Load Responsive Images – When you upload an image to WordPress, many plugins and themes will create multiple versions of that image in various sizes to better place the correct image in various areas. This lazy loads those extra images created if they are used.
Lazy Load Widgets – Enabling this option will lazy load images in your widget areas (for example, in your sidebar or your footer).
Lazy Load for Mobile – This lazy loads mobile requests to your site.
Fix for Lazy Loading Short Codes – This only needs to be used if images on your site are generated from short codes and aren’t being lazy loaded properly.
Exclude from Lazy Load – In this area, you can specify any CSS classes you want where you want the SG Optimizer to skip lazy loading. There is also a default class added called skip-lazy which means you could place the CSS class “skip-lazy” on any image you want to be skipped from lazy loading.
We are all done with the Media Optimization section of this SG Optimizer tutorial. Let’s go over the Performance Test.
With the SG Optimizer Performance Test tab, you can quickly test the level of optimization on your site.
All you have to do is choose a Device Type (Desktop or Mobile) and then type in the URL that you want to test. If you don’t type anything in the box, it will test your home page. Otherwise, you can test any URL on your site that you want.
The SG Optimizer is integrated with Google PageSpeed Insights. However, you will get more information by running a speed test directly from Google PageSpeed Insights, GTMetrix, or WebPageTest.
That being said, this is a nice, quick way to get some immediate optimization feedback from within the plugin.
Here’s a Performance Test I ran on a demo site of mine with all the best SG Optimizer settings as defined in this tutorial.
As you can see, I received a score of 98 and all of the checks were green. The SG Optimizer gave this demo site some massive improvements, especially considering it was a heavier site from the start.
**READ THIS FIRST: If your site is using a naked domain without ‘www’ (mywebsite.com) and you don’t want to start using the ‘www’ version of your website (www.mywebsite.com), then DO NOT set up Cloudflare through SiteGround because SiteGround requires that you use the ‘www’ version of your website in order to enable Cloudflare through them. If you have a naked domain, you can still use Cloudflare Full-Page Caching through the SG Optimizer by setting up Cloudflare manually on your site.
The SiteGround SG Optimizer allows an option to enable full-page caching on your Cloudflare CDN server edges. This can help reduce your TTFB (Time To First Byte) pretty significantly in many scenarios which will, in turn, lower the loading times of your website.
There’s something to keep in mind.
Consider whether you actually need to use a CDN. Don’t just use a CDN to use a CDN.
If the majority of your traffic to your website is on the same continent as you, using a CDN may actually slow down your website for those users. However, if you have a global audience (visitors from all over the world), then a CDN will certainly help load times for those on other continents.
Okay, now that we’re clear, let’s move on.
There are three items we’ll cover for Cloudflare Full-Page Caching in SG Optimizer:
- Activating Cloudflare Full-Page Caching
- Purging the Cloudflare Cache
- Deactivating Cloudflare Full-Page Caching
Activating Cloudflare Full-Page Caching
First of all, before we can activate Cloudflare full-page caching in the SG optimizer, we first have to activate the Cloudflare CDN directly through SiteGround.
I want to repeat myself from before. If you already are using ‘www‘ in your domain name (www.mywebsite.com), then you can set up the Cloudflare integration through SiteGround. If you are using a naked domain without ‘www‘ such as this site (startblogging101.com), then do NOT set up Cloudflare through SiteGround because you will be forced to switch to the ‘www‘ version which can have a very negative effect on SEO when your site switches over and it’ll take some time to recover. If you’re using a naked domain, you can still set up Cloudflare manually and use Cloudflare Full Page Caching through the SG Optimizer.
In order to do this, sign into SiteGround and go to Site Tools > Speed > Cloudflare and click the Set Up button to get started.
After you click the Set Up, you’ll see a modal where you can either create a new Cloudflare account if you don’t have one or connect to an existing account.
Once you have successfully created a new account or connected to an existing account, you’re ready to activate Cloudflare.
Make sure that the correct domain is chosen.
Then, make sure you read the highlighted line that reads “IMPORTANT: Your site will be reconfigured to work through WWW, and traffic to URLs without WWW will be redirected to URLs with WWW.”
This is the step I was talking about before. Only use this if you are currently using a domain name with ‘www‘, because I would not recommend changing from a naked domain (non-www) to ‘www‘. If you’re already using ‘www‘, you’re good to go.
Once the correct domain is chosen and the checkbox is checked, you can click the Activate Free button. You do not need the premium version of Cloudflare.
It will process for a short while and then you should see a success message.
The hard part is done!
Once Cloudflare is successfully activated through SiteGround on the backend, all you have to do now is go to your SG Optimizer plugin and enable Cloudflare Full Page Caching.
Notice that the Cloudflare tab shows in the SG Optimizer interface once Cloudflare is configured properly through SiteGround.
After enabling the Cloudflare Full Page Caching setting, all you have to do is plug in your Email used with Cloudflare along with your Cloudflare API Key in the boxes.
If you’re wondering where to get your Cloudflare API Key, you can go to the Cloudflare API token page or use the link from within SG Optimizer.
Once you’re on the Cloudflare API token page, you’ll see a line for Global API Key. Click on the View button to get the API key.
Once you have your Cloudflare Email and your Cloudflare Global API Key plugged into the Cloudflare Full Page Caching area, hit the Authenticate button.
If all goes well, you’ll see a message saying that everything was successfully authenticated to your Cloudflare account.
Congratulations! You now have successfully enabled Cloudflare Full Page Caching within the SG Optimizer. Enjoy your ultra-fast TTFB speeds. 😉
To show you what Cloudflare full page caching does for your TTFB, check out this GTMetrix speed test I ran on a demo site that I set up.
Talk about insane speeds. Having a TTFB (Time To First Byte) under 100 ms? That’s the power of Cloudflare full-page caching, baby!
By using the fastest SG Optimizer settings as I’ve specified in this article, you can easily achieve the same lightning-fast speeds.
If you’re reading this, I’m assuming you’re already using SiteGround hosting. Pair that with a super lightweight WordPress theme that is tightly integrated with Gutenberg and packed with features (Kadence theme), and you’ll have a fast, beautiful site that Google will love.
Purging the Cloudflare Cache
All you have to do to purge the Cloudflare cache is hit the Purge Cache button under the Cloudflare tab.
One important thing to note is that purging the Cloudflare cache can take some time (compared to purging the SiteGround cache which is instant). This is stated in the Cloudflare documentation and the SG Optimizer plugin can’t do anything to speed it up.
Test URLs for Cloudflare Cache Status
This is where you can type in a URL and test to see if the Cloudflare cache is working on that URL.
All you have to do is type in your URL you want to check and hit the Test button.
If the URL is cached by Cloudflare, you’ll see a green success message. Otherwise, you’ll get a red message saying the URL isn’t cached by Cloudflare.
Deactivating Cloudflare Full-Page Caching
In order to deactivate Cloudflare full-page caching from within the SG Optimizer, simply click the Deauthenticate link from within the message seen below.
Deactivating the Cloudflare full-page caching will remove your settings from your CDN account and will remove the worker that SiteGround had set up.
That’s a wrap, folks! All of the best SG Optimizer settings to dramatically increase the speed of your website.
As you can see, the SiteGround SG Optimizer plugin offers a treasure trove of optimizations for your website which is why it’s the best host-provided caching plugin on the market.
If you stuck around for this entire tutorial, THANK YOU! This was a long one, but I wanted to write the most comprehensive SG Optimizer guide on the web.
Feel free to share this with anyone you know who uses SiteGround as their host or anyone that might be thinking about switching to SiteGround! They’ll have a faster website in no time.
Did these settings work for you? What kind of speed improvements did you see after learning how to set up the SG Optimizer plugin best settings? Let me know in the comments below!
Join the Community
Join the completely free WordPress Without Page Builders by StartBlogging101 Facebook Group and connect with an awesome community of rockstar individuals who are passionate about building fast, profitable WordPress sites to grow their businesses. Come say hi! 👋
That is well-explained article huge thanks
Hey segni! I’m glad you enjoyed it. I put quite a few hours into it to make it the most comprehensive SG Optimizer tutorial out there. 🙂 Thanks for stopping by.
Such a great article. Also, I was having problems with SEO following Siteground’s Cloudflare www set up (I have a naked domain). This explains why. Thank you so much
Hey Giuseppe! You’re very welcome. Glad to hear it helped 🙂 There are some tricky things with Cloudflare when set up directly through SiteGround and so I wanted to hopefully clear some confusion!
Hi Jake, great article! I did everything you mentioned, however when testing my URLs for Cloudflare Cache Status I am getting the red message saying the URL isn’t cached by Cloudflare… Any idea how I can fix this? Thanks in advance!
Hey Geoffroy! Glad you enjoyed the article. Hmm, I have Cloudflare set up on two different websites through SG Optimizer, and each time I plug in the URL to check the Cloudflare cache status, I get the correct green success message. So, I haven’t run into that scenario, yet. SiteGround’s support is fantastic, though. Just reach out to them and they should be able to take care of it in no time.
Nicely done. I was already using SG for my sites, and this is the best writeup I’ve seen on this plugin. Thanks!
Thanks, Dave! SiteGround has been great and their SG Optimizer plugin is the cherry on top, especially being free with their plans. I wanted to make it the most comprehensive writeup on SG Optimizer best settings, so I’m happy to hear that 🙂
You say that enabling Direct Delivery will cache all the static resources like CSS files. I don’t think that is correct – direct delivery does the opposite – it ensures that all static resources are delivered from disk, not the cache.
I think you’ll find that if you disable direct delivery, changes to CSS files will not be reflected on the front end because they are cached. If you enable direct delivery, the CSS files are not cached and changes to them will take effect immediately. The same is true for JS files, images and other static resources.
Additionally, the SG Optimizer plugin has an option to flush the cache. It’s that little brush icon on the Dynamic Cache tab. The location of this icon is confusing because it will flush both dynamic resources AND static resources. In other words, if you DISABLE direct delivery, then static resources like CSS files are cached. To flush those static resources from the cache, you can go to the Dynamic Cache tab and use the brush icon. In my view that brush icon shouldn’t really be on the Dynamic Cache tab as it also applies to static resources. With the Optimizer plugin enabled you get a Purge SG Cache option in the WP admin bar. That’s a more sensible place for it. That option will flush whatever you have in the cache, static and dynamic.
Hi Russ, thanks for the comment! The description of NGINX Direct Delivery is correct. You can read all about it directly from SiteGround’s site here.
“NGINX Direct Delivery caches all the static content of your website including images, CSS, JS, and plain HTML documents. Thus, your visitors load such content from the cache instead of the server directly. The cached copies are stored in the server’s RAM and they are delivered much faster because the RAM access time is much faster than the SSD access time.”
Interesting article as I use Kadence on a few websites that are hosted with Siteground. I have a question though. In regard to font settings you mentioned that using the local option in Kadence was a better option than preloading options in Supercacher.
So in Kadence performance do you enable just ‘Load Google Fonts locally’ or do you also enable ‘Preload local fonts’? With either or both of these enabled do you then disable the ‘Web fonts optimization’ option in the supercacher settings?
I would personally let Kadence handle the fonts since it’s built directly into the theme. So, you would have “Load Google Fonts Locally” enabled and also the “Preload Local Fonts” option enabled. This will do all the work behind the scenes to locally host your Google Fonts on your server and then also preload them which should help them load even faster. I wouldn’t think you would need to enable the “Web Fonts Optimization” option in SG Optimizer then and would probably encourage disabling it in that scenario as you don’t want conflicts.
As with anything, though, no site is the same. You could also try turning off the preload in the Kadence customizer and turn on the option in SG Optimizer and compare the performance difference with speed tests.
Hope that helps!
Hey Jake, great write-up. I was looking for something just like this.
Do you know of any big downsides to the full-page Cloudflare caching?
I’m debating on setting it up for my site, but last time I setup Cloudflare the experience wasn’t great. Migration took longer than I’d like and speeds were slower after (although I didn’t try the full-page caching).
I’ve noticed my current TTFB times are pretty high, which is why I’m debating on setting up Cloudflare again with the full-page caching. Just want to make sure the hassle will be worth it.
Hey Dylan! I can’t really think of any big downsides to using full-page caching from Cloudflare. It will drastically speed up your website because when you use Cloudflare APO (Automatic Platform Optimization) it stores ALL files (CSS, JS, images, AND HTML) on the edge servers. This is a little different from a traditional CDN like BunnyCDN where they serve images, CSS, and JS from the CDN. Since the HTML is also stored, this is what drastically brings down your TTFB times.
When I have Cloudflare full-page caching set up through SiteGround, I would get a TTFB of around 70ms which is crazy fast. You shouldn’t have to worry about any migration or anything. The full-page caching gets enabled and then it just works, so it should be a pretty easy process!
Let me know how it goes! Good luck.
Great article, thanks for all the effort you put into it. I have just one question – I am using Siteground and Cloudflare. I called support when I got 404 errors on my site, and they told me to switch off NGINX Direct Delivery. The 404 errors went away after I did that. It is very disappointing that NGINX Direct Delivery and Cloudflare does not seem to be compatible, I wonder why it worked for you but not me?
Hi there Eve! That’s interesting. Are you using the Cloudflare Full Page caching through SG Optimizer (the last tab in the plugin) or do you simply have Cloudflare hooked up through SiteGround? I haven’t run into any issues with SiteGround + Cloudflare on any of my SiteGround hosted sites.
Hi Jake, thanks and congratulations for this outstanding post. I am pretty sure a lot of people, like me, are getting huge benefits from your hard work. I got a question, my new website is under construction and expected to be launched a month ahead. Of course I am hosting at SG. Currently I just have an informative page showing our site is under construction but I would like to make everything possible to optimize as much as I can previously. What do you suggest me to do, to wait until I upload the first new website version, to apply your above suggested settings starting today, to do immediately some things (and which ones) and the others later when published, other than that? Thanks…
Hi Boris! Thanks for all the compliments – I appreciate it 🙂 These recommended SiteGround Optimizer settings should be safe to apply to your site now. Whether your site is currently under construction or not shouldn’t really affect anything. Hope that helps!
No problem 🙂