I help other people optimize their sites, and yet, here I am, overlooking this blog’s performance for a whole year (that’s how long the blog’s been alive for!)

Anyhow, my whining aside, it was time for fixing a thing or two (or 10…)

It happened two days ago. I came across an article about WordPress speed optimization, which made me wonder when it was that I checked my site’s speed the last time.

Can you take a guess?

Well, it was the day I finished designing the blog. In case you’re new in this place, I went through a redesign last October. So yes, that’s when I last checked my site’s performance. And it wasn’t too great. I had meant to come back to it, but things kept getting in the way.

Also, being a side blogger means that I only have some 10 hours or so every week to write, and promote, and make products, and make opt-in freebies… time’s already pretty tight as you can guess.

But once I checked the site’s performance I couldn’t sit still. You’ll understand what I mean once you see it for yourself. I saved a screenshot of GTmetrix performance report.

Yeah. That bad… just too bad… gosh this is embarrassing..!!

Anyhow, moving on.

As you can imagine, after seeing THAT, I couldn’t possibly sit still. So I threw whatever I had on hand and made up my mind to do something about this embarrassment pronto. Which meant making some investments (well worth it, I’d say), and spending a couple of hours making sure things are working.

After pretty much an entire morning doing various things I had to do, the following is what GTmetrix rewarded me with 🙂

Considering how image heavy my landing page is, it’s not too bad! Not bad at all, eh?! I always take those scores with a pinch of salt. But that load time… THAT is what I wanted to improve. And the total page size. Basically, the numbers on the right box labeled as “Page Details” are the important ones. If you do things right, chances are that you’ll also improve your PageSpeed and YSlow Scores as well.

Anyhow, I figured this would be beneficial to all of you who’re trying to optimize your website for better performance and faster load-time. So, today, that’s exactly what I’ll be showing you how to do 🙂

Also, many people get scared when you think about doing this yourself. Let me tell you, this isn’t rocket science. If you’ve done things right from the beginning (signed up with a good hosting company, invested in a well put-together template, and haven’t loaded up your website with unnecessary plugins), then this part is going to be a breeze.

Read carefully, follow the directions, ask if you have any questions in the comments.

Let’s get started 🙂

[This post contains several affiliate product links. Please see affiliate disclosure here.]

Why Website Speed Matters

The two most important reasons are:

1. User Experience
2. SEO

1. User Experience

Imagine stumbling upon a blog and having to wait five full seconds for the page to load. 5 seconds don’t sound too bad? Try it!

It’s bad!

Your goal should be to make people want to stay on your site as long as possible. People don’t have an abundant amount of time. Information is dime a dozen. So, if you can’t hook someone landing on your site for the first time in about 2 seconds or less, forget it; you’ve lost them for good.

2. SEO

Yep! Website speed matters when it comes to SEO, short for Search Engine Optimization. Now, I know I keep saying not to worry too much about SEO when you’re a beginner blogger.

BUT!

This is one aspect of SEO that you SHOULD pay attention to. Why? Well, you may not be actively trying to rank your page on Google, but that doesn’t mean you opt for bad practice when it’s avoidable.

Website performance is a big factor when it comes to how Google views your site. According to Google, their algorithm takes your site speed into account when determining site ranking. Basically, it’s a big deal.

There are two variables that are important: Time to First Byte (TTFB), and page load time. You should try to improve both of these to be on Google’s good side. I’ll go over these terminologies, what they mean, and how to improve them below.

Measuring Website Performance

The first thing you need to do before you sit down to optimize a website is to figure out where you need improvements. Below I’ve tried to explain a few terminologies you should be aware of to understand your performance metrics (as well as how to measure and what to look for).

Time to First Byte (TTFB): Google’s ranking algorithm takes TTFB into account as I mentioned above. TTFB or Time to First Byte, as the name suggests, is the time it takes for a user’s browser to receive the first byte of the requested page from when an HTTP request is made. Typically, blogs and other dynamic sites based off of a content management system (such as WordPress) should have TTFB less than 500ms. Of course, the general consensus is that the faster the better. This can get a little tricky, and I’ll be talking more about it shortly.

Fully Loaded Time: The time it takes for a website to fully load on your browser along with all its assets. A well optimized and well-performing page should load within 2 seconds or in that vicinity.

Measuring Performance with GTmetrix

There are plenty of tools to measure your site’s performance. They all work more or less the same way, and all of them should be considered with a grain of salt. However, so far I’ve found GTmetrix to be most satisfying. I love how they break up the result in different categories and also list what needs optimizing. This is helpful if you’re trying to troubleshoot and pinpoint exactly what’s making your performance to drop.

Few things to note: WordPress and other dynamic sites can be almost impossible to score 100 on GTmetrix. Unless you have a static page built with HTML and CSS only and little to no images, you’ll likely get some warnings on GTmetrix or whichever tool you’re using to measure your site’s page-speed and performance. And that’s fine. We’ll go over all the different things that affect your site’s performance and what you can to improve them. If you do everything I mention below, you should get be able to get your pages loading within or around 2s. And that’s really what we’re trying to achieve.

To measure your site’s performance, go to GTmetrix, then enter your website URL and then hit “Analyze” (ideally you’ll want to measure a few different pages to get a good picture of your overall site performance, but let’s start with the homepage for now).

It should take a few seconds to do the whole analysis. When you get the report, the first things you see are some “grades” based on your overall page quality. I want you to take note of two timings: the full page load time, and the Time to First Byte or TTFB, as mentioned above.

The full page load time is right there, big and bold. The TTFB, however, is hidden at first and you have to do a little digging.

Right underneath the prominent scores, you should see a few tabs. One of them is “Waterfall”. That’s where you’ll find TTFB. Click on that tab to expand, and then hover your mouse over the first entry. A box will pop up with all kinds of timings. The one labeled “waiting” is your Time to First Byte (TTFB).

Again, your goal for TTFB is to have it under 500ms (for a dynamic site such as WordPress), and full page load time should be less than 2 seconds (ideally, that’s considered a good time).

As you can see above, that popup box has all the different things that happen between first HTTP request (when you enter a URL into your browser and hit Enter) and seeing a fully loaded page. I can’t go over all of these as that is outside the scope of this blog post.

However, in the next few sections, I’ll show you some best practices for optimizing your WordPress blog/website to improve performance and page-speed. 

Optimization Step 1: A Strong Base

What do I mean?

Your base is the most important thing.

You want to know what was the first thing I did after I saw that terrible score for TSB some two days ago?

I upgraded my hosting plan (same host, but an upgraded plan).

Pick Your Hosting Company Carefully (SiteGround all the way FYI)

I love, love, LOVE SiteGround [affiliate]. They’re officially recommended by WordPress.org as their preferred hosting company. So, as you can guess, they’re pretty much one of the best if not THE best hosting company currently out there. Even their cheapest plans have SSD storage, which is way faster than most other hosting companies who use hard drives for their storage (EIG companies, such as BlueHost use hard drives for storage… yuck!) Also, SiteGround has 4 different server locations — another reason they are faster (compare that to BlueHost’s single location… double yuck!)

In the images below you’ll see some high praises from some of the best influencers in the industry, along with some comparisons:

These are just two hosting companies, but there are plenty of other comparisons online for Siteground vs. Other, and in almost all the cases, Siteground is a clear winner when it comes to performance.

SiteGround has several different hosting plans. I’ll give you a short primer because this will help you understand why I upgraded.

The entry-level shared hosting plans offer two variations: StartUp and GrowBig. The StartUp is really just for folks who’re tight on budget, entry-level hobby bloggers with little to no traffic to speak of. It has limited functionalities, and most of the premium features of SiteGround that I LOVE are not offered with this package. The level up from StartUp is the GrowBig plan. This is what I suggest people sign up for. This plan is really one of the best with affordable pricing for new customers and feature-rich functionalities. (Take a look at the different SiteGround shared hosting plans here.)For first time users, SiteGround offers the GrowBig plan for only 5.95 per month (paid annually). This plan offers everything that a beginner to mid-sized blogger needs, such as native caching with SuperCacher, staging capabilities (useful for when a new WordPress version comes out or you need to do some troubleshooting without touching the live site), etc.

Well, GrowBig was the plan I was on. But, now that’s I’m getting more and more traffic to my site, I was already thinking of upgrading. And then after seeing those embarrassing scores on GTmetrix, I knew I couldn’t wait any longer. So I pulled the plug and upgraded to their GoGeek plan.

Now, the GoGeek plan is very different from StartUp or GrowBig plans. GoGeek a semi-dedicated hosting solution. In short, a full dedicated solution has only one user in one server, and a shared hosting solution (such as StartUp or GrowBig) has many users in one server. A semi-dedicated hosting solution is something in-between. It has much fewer users per server, which increases website speed and improves performance over the shared plans. So, that’s what I have upgraded to.

And guess what?

Remember TTFB? Before switching to GoGeek, my TTFB stood at over 1000ms (that’s over a full second), and as soon as I made the switch, my TTFB went down to about 600ms-ish.

And by the way, I still wasn’t doing any other type of optimization… no caching, no minifying, no nothing! Just by upgrading from shared hosting to semi-dedicated hosting, I cut down TTFB by almost half!

So, if you’re with a sub-par hosting company, I suggest you switch to SiteGround pronto and preferably pick either GrowBig or GoGeek plan, based on how old your blog is and how much traffic you get and the resources that are running on your site.

If you’re with SiteGround already, and with a StartUp plan, then I suggest you switch to GrowBig.

If you’re with a GrowBig plan, then you may or may not have to upgrade. I suggest you go through the rest of the optimization methods explained below, and then run a GTmetrix test to see where you’re at. If your site is still slow even after going through all the customizations, then maybe it’s time for the next level upgrade. You can see all available shared hosting plans on SiteGround for a closer comparison.

[Just as a side note, I have every intention of upgrading further to Cloud hosting, offered by Siteground. That would really take the performance to the next level. I still need to wait a few more months before that, but thought I’d mention just in case some of you are ready to make that investment already :)]

Invest in a Good Template

Poorly coded templates will be the death of your website. Seriously.

Right now I’m using Astra with Elementor Pro theme builder on this blog. It’s the best combination ever! Astra itself is a fairly lightweight theme that’s also feature-rich. But with Elementor Pro, you can basically do anything!

If you’re strapped for time and want to get it over with as soon as possible, try a theme from StudioPress. They’re based on the Genesis framework, which is a trusted WordPress framework.

Try to stay away from questionable themes even if they look pretty. For example, I wouldn’t buy any random theme from Etsy.

If you’re looking for a free theme, just go with Astra.

Optimization Step 2: Use Latest PHP

Not all hosting plans keep up with the latest PHP. I won’t go into details, just know that PHP versions change fast! According to some studies, less than 20% of WordPress sites are running on PHP 7+. This is crazy because as PHP versions change, older versions start to get slower and less secure. I mean, support for PHP 7.0 ended last year. We should all be on PHP 7.1 or newer version (7.3 being the latest).

The cool think about SiteGround is that it automatically updates sites to a PHP version that’s current.

If you’re not hosted with SiteGround, contact your hosting provider to make sure you have the latest version of PHP.

Optimization Step 3: Optimize Images

For bloggers (and site owners) who use images a lot, it’s likely one of the biggest culprits for your sites being slow-loading.

Now, there are plenty of free and premium plugins that optimize images for you, but personally, I suggest starting the optimization process even before you upload them on your WordPress Media Library.

Let me walk you through what I do.

1. I optimize all my images in one of two ways. I create most of the blog featured images and Pin graphics with Canva. So they are fairly optimized out of the box. I also save images as JPG files and not PNG as those tend to be larger files. The second method is via Photoshop. I use Photoshop when I’m optimizing screenshots for my guide and tutorial type posts. Again, I save them as JPG file with a high compression level.

Now, here’s the thing. Some people go nuts with image compression. And sure, the smaller the files the faster our website will be. But the problem is when people view these images on retina (or just really high-resolution screen) devices. Let’s just say that I prefer the middle ground. I hate it when images are blurry and pixelated, but I also prefer faster loading sites. So I do compress my images, but not too much. And for me, that’s just fine because most of the images I use on my blog posts are screenshots, so they tend to be smaller files anyway.

But if your blog niche is fashion or food or some other topic where you tend to use a lot of high-resolution photos, I can see why that may pose a problem. Here’s my advice: Use Photoshop to resize images to a size that’s slightly larger than the maximum size you’ll need (typically the desktop or tablet view has the largest size). Then, choose “Export > Save for Web” option when saving. That way, Photoshop will know that you’ll be using these photos on websites, so it’ll show you compression parameters most suitable for web uses. Choose a compression level that no less than medium (I’d even say go with high unless you have TONS of photos).

Below you can see my Photoshop settings when I’m saving an optimized screenshot. Not sure if you can tell, but the quality is pretty poor when compression is medium (50%). But that’s because the screenshot was low quality to begin with. if you have really high-quality images to start with, then you may be fine with medium or even low-level compression.

If your images have EXIF data, make sure to strip those as well.

2. As you can see, my images are already somewhat optimized even before I upload them. But that’s not enough. I use an image compression plugin to further optimize my images. There are plenty of free and paid plugins that’ll do the job for you. However, after trying a few (Imagify, Smush, EWWW), I’ve decided that I like Optimole the most. It offers 1GB of free optimization per month. If that seems enough for you, then you’re good to go. If you have a lot of images, you will benefit from purchasing a subscription.

The reason I like Optimole so much is because (and this was really the deciding factor) they serve optimized imaged via CDN on the fly (third party server). This means your server doesn’t get bloated with these optimized images. Which further improves your page load time.

As you can see below, the settings are super straight forward.

Optimization Step 4: Turn on CloudFlare CDN

SiteGround comes with a basic Cloudflare CDN built in for those who sign up for a Grwbig or higher plan, did you know?

In case you’re not sure what CDN is, it stands or Content Delivery Network. The idea is that cached copies of your content are served globally with various servers all over the world, which ensures fast content delivery (decreases site load time).

In addition to making your site faster, CDN also improves your site’s security. Pretty neat, right?

Like I mentioned, SiteGround has built-in integration with Cloudflare CDN. It’s super cool! If you’re with a different hosting company and not sure if your hosting provides this feature, I’d suggest contacting the customer support and finding out.

Enabling Cloudflare is easy on SiteGround.

Go to cPanel, then locate and click on Cloudflare.

Next, click on “Activate Free” next to the domain for which you’re activating Cloudflare. Once activated, click “Manage” next to the activated domain, and then in the next page, click on the “Settings” tab.

Under “Settings”, keep all settings as is, except the SSL. Scroll down to where it says “SSL Support”, and make sure it is set to “Full” or “Full Strict”. If not, then change it to either of these, and click “Change” next to it. And you’re done! (Also, I’m assuming you’ve already taken advantage of free SSL with SiteGround, and have activated it for your site.)

Optimization Step 5: Use a Plugin (WP Rocket) for Caching and Minifying and Other Website Performance stuff…

SiteGround comes with its own FREE plugin for improving page speed (SG Optimizer). However, I chose to go with WP Rocket because by far this plugin gets the most votes for its ease of use as well as powerful optimization and performance. The thing about WP Rocket is that a lot of crucial optimization parameters are built-in within the plugin and runs in the background. this makes setting up this premium plugin super easy!

For example, some crucial optimization factors such as enabling gzip compression and leveraging browser caching are built-in features in this plugin.

Here’s how I’ve done my setup if you’re interested:

1. WP Rocket is a premium plugin so you’ll need to purchase it. Once you purchase the plugin, you’ll be able to download it and then install it on your WordPress dashboard. (Free alternatives include W3 Total Cache, WP Super Cache, WP Fastest cache, and of course, Siteground’s own SG Optimizer. However, I’ve used ALL of the aforementioned and so far WP Rocket, albeit not free, has been the best!)

2. Once it is installed, go to settings and follow the setup I have (shown below).

DASHBOARD

In the “Dashboard” I have Rocket Tester and Rocket Analysis turned off. Once we’ve gone through the entire settings process, we’ll “Clear Cache”.

CACHE

Check “Enable Cache” and “Separate cache Files for Mobile Devices”. Leave everything else as is. I usually disable caching for logged in users so because I prefer it that way.

FILE OPTIMIZATION

In the “File Optimization” tab, the goal is to check them all for maximum optimization. Be careful though, some templates use CSS and JavaScript in ways that can break if you minify them all. Start with checking all of them, and then see if your site is looking and behaving the way it should. If something seems off, start by unchecking one at a time to pinpoint exactly what may be causing your site to misbehave. In my case, I realized that I cannot combine JavaScript files, so I left that unchecked, and checked everything else.

LAZYLOAD

In the Media tab, you can start off by checking everything again and see what it looks like. Personally, I don’t like having images lazyload (where images only load when you scroll to the image. This can get annoying really fast when every time you scroll you have a slight delay until the image is totally loaded. So, I’ve left that unchecked.)

PRELOAD

In the “Preload” tab, you can define if some files should be preloaded. Your sitemap is such a file. If you have Yoast installed (which you should), then WP Rocket will automatically detect it. But if you’re using some other program to create your sitemap, you can enter the link in the specified box. Under the Prefetch box, you can enter certain links that you think your site will benefit from when preloaded. Google fonts, certain Facebook apps, for example. In any case, below is a good list to have on there. I advise you copy and paste the links below in the Prefetch box.

//maps.googleapis.com
//maps.gstatic.com
//fonts.googleapis.com
//fonts.gstatic.com
//ajax.googleapis.com
//apis.google.com
//google-analytics.com
//www.google-analytics.com
//ssl.google-analytics.com
//youtube.com
//api.pinterest.com
//cdnjs.cloudflare.com
//pixel.wp.com
//connect.facebook.net
//platform.twitter.com
//syndication.twitter.com
//platform.instagram.com
//disqus.com
//sitename.disqus.com
//s7.addthis.com
//platform.linkedin.com
//w.sharethis.com
//s0.wp.com
//s.gravatar.com
//stats.wp.com

ADVANCED RULES

Under the “Advanced Rules” tab you can add any additional rule you may have. I don’t have anything so I’ve left it blank.

DATABASE

In the “Database” tab, you can clean up your database to optimize the site further. I typically do this manually a few times a month. If you think you might forget to do this manually, set up automatic cleaup for once a week. You can also accomplish this with a plugin called WP Optimize. However, since WP Rocket has this built in, if you have it, there’s no need to use an additional plugin to clean up unwanted things such as trash comments or post/page revisions.

CDN

Under the “CDN” tab, I don’t have anything because I enabled CND through SiteGround’s Cloudflare CDN in the previous section. If you do not host your site with SiteGround, ask your hosting company if they offer free CDN. If not, you can create a free Cloudflare account. However, you’ll have to manually enable CDN in this tab if you do so. Otherwise, leave it blank.

HEARTBEAT

Check “Control heartbeat, leave everything else disabled.

ADD-ONS

You likely have Google fonts and Facebook pixel on your site. Turn on these add-ons and WP Rocket will host them locally instead of adding them each time site is loaded. You may see other options on that page as well, such as Cloudflare or Sucuri. If you have turned on Cloudflare from inside SiteGround, you don’t need to do anything else. But if you haven’t and you’re using Cloudflare from their site instead, you will have to turn this option on (along with properly defining CDN name and enabling it under the CDN tab).

And that’s it for setting up WP Rocket. Make sure to clear cache once you’re done with the setup. That’s all I really had to do to get my page load time go under 2s (for the homepage).

Do check a few other pages on your site to make sure they are loading in the vicinity of 2 seconds or less.

That wasn’t too bad I hope. If you have any question for me at all, feel free to leave a comment.

This was a long post, so here’s a summary:

Summary

Optimization Goals

Have a website load in 2 seconds-ish or less. Time to First Byte or TTFB for WordPress pages with dynamic content should be less than 500ms. For mostly static content, this should be 200ms or less. You can check these on GTmetrix.

Optimization Steps

1. Make sure your blog/site is hosted on a good hosting company. According to most, SiteGround is now one of the best hosting companies with the best performance features. Sites hosted with SiteGround also tend to be faster compared to sites hosted with other hosting companies.
2. Make sure you have a good template installed. I prefer the free Astra theme paired with Elementor Pro page builder plugin. Or, Genesis based themes from StudioPress. Stay away from questionable themes. Poorly coded themes are one of the biggest reasons for slow sites.
3. Make sure your PHP version is current. If you’re on SiteGround, you don’t have to do anything. SiteGround automatically takes care of it. But if you’re hosted with a different company, check with them to make sure your PHP version is current. As of writing this post, you should have PHP version 7.1 or higher.
4. If you’re on SiteGround, turn on their free CDN with Cloudflare. if you’re with a different host, see if they have this option available. If not, you can create a free Cloudflare account on their site directly.
5. Optimize images. make sure they are optimized even before you upload them on WordPress. Further optimize with a plugin. I recommend Optimole.
6. Use a plugin to optimize your website/blog further. I recommend WP Rocket.

Looks like a lot of work, I know, but trust me, seeing your site load faster is worth taking the time out to optimize its performance. Also, remember, Google loves fast loading sites!