Start Blogging 101 is supported by its readers. If you purchase through a link on my site, I may earn a commission. Learn more

Best SiteGround SG Optimizer Settings Tutorial

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?

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 SG Optimizer plugin was a game-changer for WordPress sites hosted with SiteGround when the new version was released.

Fortunately, the SG Optimizer plugin keeps getting substantial updates and has taken the crown as the best host-provided caching plugin on the market right now.

With all of the latest SG Optimizer features, I have officially dropped WP Rocket on all of my sites hosted with SiteGround which saves me $50 every year on a single site.

The SiteGround team actually suggests you only use their SG Optimizer plugin over 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).

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 this website (Start Blogging 101) which is 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:

  1. Using fast, reliable hosting (SiteGround)
  2. Using a lightweight, customizable WordPress theme (Kadence Theme)
  3. Not using third-party page builders (WordPress Without Page Builders – Facebook Group)
  4. 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 SG 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:

SuperCacher Settings

  • Dynamic Caching – Enabled
  • Manual Cache Purge – Manually clear the Dynamic Cache for your entire website.
  • Automatic Cache Purge – Enabled
  • Browser-Specific Caching – Disabled
  • Exclude Post Types – Quickly exclude all posts from a specific post type from being cached.
  • Excluding URLs – Here is where you can specify certain URLs on your website that you don’t want to be cached to keep them dynamic.
  • Memcached – Enabled

SiteGround’s SuperCacher is the bread and butter of their optimization service offering three different levels of caching to make your site run faster – static, dynamic, and memcached.

Having all three of the caching levels enabled in the SuperCacher will allow for maximum performance on your website.

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 into SiteGround and go to Site Tools > Speed > Caching as shown below:

SiteGround Site Tools Speed Caching

Nginx Direct Delivery – Make sure Nginx Direct Delivery is enabled for your site(s) that you have on your SiteGround hosting plan. Nginx Direct Delivery caches all of the static content on your site including your images, CSS, JavaScript, and HTML files.

SiteGround Site Tools Nginx Direct Delivery

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.

SiteGround Site Tools Dynamic Cache

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.

SiteGround Site Tools Memcached

Now that everything is set up correctly on the backend of your SiteGround hosting, let’s look at the SG Optimizer plugin settings for SuperCacher Settings.

Dynamic Caching

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.

Ideal SG Optimizer Settings Dynamic Caching Enabled

Now I’ll briefly explain each of the options underneath the Dynamic Caching setting.

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.

Memcached

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 SG Optimizer plugin.

Best SiteGround SG Optimizer Settings Memcached Enabled

We are officially done with the SuperCacher Settings section. Time to move on to Environment Optimization!

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

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 area, fill in third-party domains that apply to your site.

Lastly, if you are on a SiteGround 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.

Otherwise, if you’re on a StartUp or GrowBig account, use PHP 7.4.

I’ll go over each of the best SG Optimizer Environment Optimization settings in more detail below.

HTTPS Options

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.

SiteGround Site Tools SSL Manager Lets Encrypt

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.

SiteGround SG Optimizer Plugin Environment Optimization Enable Https Fix Insecure Content

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

SiteGround’s SG Optimizer plugin now gives you the ability to control the WordPress Heartbeat API which used to be an advantage for WP Rocket, but not anymore.

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).

Best SG Optimizer Settings for WordPress Heartbeat Optimization

DNS Pre-fetch for External Domains

Enabling this option helps reduce the load time of third party scripts. If you’ve used GTMetrix to measure page speed, you may have seen it ask to reduce DNS lookups in the YSlow tab.

GTMetrix Reduce DNS Lookups SG Optimizer

If you see third-party domains show up here, copy them into the DNS Pre-fetch for External Domains box and hit add for each one.

Make sure to not include http:// or https:// – you only need to enter the domain name in there.

SG Optimizer DNS Pre-fetch for External Domains Settings

Scheduled Database Management

WordPress database management used to also be a feature advantage that WP Rocket had over SG Optimizer, but now SG Optimizer has caught up.

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

GZIP Compression

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.

SiteGround SG Optimizer GZIP Compression Automatically Enabled

Browser Caching

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.

SG Optimizer Plugin Settings Browser Caching NGINX Direct Delivery

Frontend Optimization

  • Minify the HTML Output – Enabled
  • Minify JavaScript Files – Enabled
  • Combine JavaScript Files – 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

The Frontend Optimization section contains a gold mine of optimizations that will help get better scores in GTMetrix and Google PageSpeed Insights while also lowering your fully-loaded times.

Google has announced three Core Web Vitals (Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift) that will be part of the Google Search ranking factor starting in May 2021.

Using the ideal SG Optimizer settings for the Frontend Optimization section will help you get better Core Web Vital 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 JavaScript Files, and Minify CSS Files. Doing this will greatly increase the loading speeds of your website by removing all unnecessary characters (empty spaces, empty lines, comments, etc.) from your JavaScript and CSS files along with the HTML output of your site.

Best SG Optimizer Settings Minify the HTML Output Enabled
Ideal SG Optimizer Plugin Settings Minify JavaScript Files Enabled
Best SG Optimizer Settings Minify CSS Files Enabled

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

Combining your JavaScript and CSS files will reduce the amount of HTTP requests on your site.

SiteGround suggests that you enable both these options: Combine JavaScript Files and Combine CSS Files.

Best SG Optimizer Settings Combine JavaScript Files Enabled
Best SiteGround SG Optimizer Settings Combine CSS Files Enabled

These two options, especially the Combine JavaScript Files option, can sometimes cause some issues.

Combining JavaScript files that require a certain order of execution may cause something to load incorrectly. After you enable the Combine JavaScript Files option, you’ll see a warning come up telling you to check the frontend of your site to make sure everything still works okay.

SG Optimizer Combining JavaScript Files May Cause Issues With Scripts Warning

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.

If something goes wrong, disable the Combine JavaScript Files option and see if it fixes it.

Additionally, you can click the Exclude from JavaScript Combination link under that option and choose from a list of JavaScript files that you want to exclude if you figure out which script is causing the issue.

SG Optimizer Exclude From JavaScript Combination List

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’m using pure Gutenberg blocks and Kadence Blocks to build this site 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.

Enable the Defer Render-Blocking JS option.

Best SG Optimizer Settings Defer Render-Blocking JS Enabled

After doing so, you’ll see a similar warning to the one you saw with the Combine JavaScript Files option. It looks like this.

SG Optimizer Deferring Render-Blocking JavaScript May Cause Issues Warning

Hit Confirm and then go to your website and click around different pages to see if all is well. If so, you’re golden!

If you are seeing issues, you can either disable this option or you can click on the Exclude from Loading JS Files Asynchronously link which allows you to choose JavaScript files that you want to exclude if you find a problematic script.

SG Optimizer Exclude From Loading JS Files Asynchronously List

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.

SG Optimizer Web Fonts Optimization Preload Google Fonts Enabled

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>

Fonts Preloading

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 <head> section:

<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.

Kadence Theme Performance Load Google Fonts Locally

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.

Kadence Theme System Default Font Option

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:

https://startblogging101.com/wp-content/themes/kadence/assets/css/header.min.css?ver=1.0.7

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.

Best SG Optimizer Settings Remove Query Strings From Static Resources Enabled

After you enable this option, your script lines will now look something like this:

https://startblogging101.com/wp-content/themes/kadence/assets/css/header.min.css

Notice that the ?ver=1.0.7 query was eliminated from the previous line of code.

Disable Emojis

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.

SG Optimizer Disable Emojis Enabled

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!

Media Optimization

  • 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.

  1. Optimizing your images so that they take up less space and load faster
  2. Lazy loading various forms of media (images, videos, Gravatars, etc.)

I have officially dropped all other image optimization plugins such as Imagify (which I was using 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.

New Images Optimization SG Optimizer Enabled

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.

SG Optimizer Existing Images Optimization Start Button

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.

SG Optimizer Existing Images Optimization Currently Processing Progress Bar

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.

SG Optimizer Plugin All Images In Media Library Have Been Optimized Successfully

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.

Best SG Optimizer Settings Generate WebP Copies of New Images Lossless Optimization Enabled

When you click the toggle to turn on this setting, you’ll see a warning pop up.

SG Optimizer Generate WebP Images Warning For CDN Users

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:

  • Lossless
  • Lossy

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.

SiteGround SG Optimizer Manage WebP Copies For Existing Images Delete or Bulk Generate Files

If you want to create WebP copies of all your existing images, hit the Bulk Generate WebP Files button.

SG Optimizer Generate WebP Images Currently Processing Progress Bar

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.

SG Optimizer Plugin Manage WebP Copies For Existing Images All WebP Copies Generated Successfully

Congrats! All of your images should now be served in WebP format (if the browser supports it).

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.

Best SG Optimizer Settings Lazy Load Media Options

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.

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.

Best SG Optimizer Tutorial Performance Test Google PageSpeed Insights Score 98

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.

Cloudflare

**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:

  1. Activating Cloudflare Full-Page Caching
  2. Purging the Cloudflare Cache
  3. 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 withoutwww‘ 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. 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.

SiteGround Site Tools Activate Cloudflare CDN Set Up

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.

SiteGround Connect Cloudflare Account Create New Or Connect Existing

Once you have successfully created a new account or connected to an existing account, you’re ready to activate Cloudflare.

SiteGround Site Tools Cloudflare CDN Redirect Through WWW Activate Free

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.

Fastest SG Optimizer Settings Cloudflare Full Page Caching Enabled

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.

Cloudflare API Key for SG Optimizer Plugin

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.

SG Optimizer Tutorial Cloudflare Full Page Caching Successfully Authenticated

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.

Fastest SG Optimizer Settings Cloudflare Full Page Caching Enabled TTFB Under 100 ms

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.

SiteGround SG Optimizer Plugin Purge Cloudflare Cache

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.

SG Optimizer Settings Cloudflare Test URLs for Cache Status

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.

SG Optimizer How To Deactivate Cloudflare Full Page Caching

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, beautiful WordPress sites to grow their businesses. Come say hi! πŸ‘‹

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *