How to Speed up Your Website: WordPress

|

Google doesn’t like your slow website, your audience doesn’t like your slow website, you don’t like your slow website.

So let’s try to speed things up, okay?

In this guide, we’ll go over several ways to speed up your website, what you focus on when running speed tests, and finish off with why speed matters.

Ready, Slowpoke?

Contents

  1. Use a fast WordPress host
  2. Choose a server close to your visitors
  3. Choose a fast WordPress theme
  4. Avoid an excessive DOM size
  5. Use blocks instead of page builders
  6. Optimize images
  7. Use a caching plugin
  8. Use a CDN
  9. Use a fast DNS
  10. Optimize fonts
  11. Leverage browser caching
  12. Check your plugins
  13. Remove query strings from static resources
  14. Eliminate render-blocking JavaScript and CSS
  15. Clean up your database
  16. Offload your emails
  17. Optimize your comment section

Notes on Site Speed

  1. How to test your website speed
  2. What to focus on when testing your site speed
  3. Why website speed matters

Disclosure: You should always assume that pretty much every link on this site is an affiliate link, and if you click it and buy something you like, I’ll earn some money to help me buy a DeLorean, build a time machine, and travel back to the 90s so I can watch Hey Arnold! and eat Dunkaroos again.

1. Use a Fast WordPress Host

One of the easiest and fastest ways to speed up your site is to switch to a good WordPress host.

The reason cheap $3/month shared hosting companies are able to keep their prices so low is because they pack a ton of customers on the same servers.

This means that you’ll have a lot of people fighting over the resources of that server, which will lead to slower loading speeds for everyone.

It’s like trying to split a 12″ pizza with 30 of your friends.

Another downside of cheap shared hosting companies is that they don’t worry about updating their software until they absolutely have to.

This doesn’t only affect speed, but also security. Plus, if someone on your same server gets hacked, your site could be compromised as well.

If you’re on a cheap shared hosting provider, moving to a managed host will make a significant difference in your site speed.

Recommended WordPress Hosts

  • NameHero – cheapest on the list. If you’re just starting out and don’t expect to get traffic quickly, NameHero shared cloud hosting might be enough honestly. They use LiteSpeed web servers in all their plans and have pretty good support. (my review)
  • Cloudways – if you can stretch your budget to $10-13/month, I highly recommend you move to a managed WordPress host like Cloudways. Use it with Vultr High Frequency (HF) or Digital Ocean (DO). They also have their own caching plugin – Breeze – but I still recommend using WP Rocket instead. Personally, I would go with Vultr HF instead of DO, but they’re both good. (my review)
  • Kinsta – fast speeds, high security, top-notch support, and free hack-fix. This is actually where my main fitness site is hosted, I can sleep like a baby not having to worry about anything. And if something does happen, I know they’ll be on top of it. Obviously, starting at $30/month, they’re more expensive than other options. (my review)

Underperforming WordPress Hosts

If you’re new to this, you’ve probably seen Bluehost recommended everywhere by “big” bloggers.

However, Bluehost is one of the most underperforming hosts. The only reasons they’re so heavily promote is because of their aggressive affiliate commissions.

Most of these “big” bloggers would be making 2-3x less if they were promoting other hosting companies.

Besides Bluehost, I would also recommend not hosting with HostGator or InMotion Hosting.

2. Choose a Server Close to Your Visitors

You should always aim to choose a data center closest to your visitors, as this will help reduce latency and time to first byte (TTFB).

  • Latency – how long it takes for data to go from one point to another. The lower latency, the better.
  • TTFB – this measures how long it takes for the browser to receive its first byte of data from the server. Google recommends keeping it under 200 ms. We’ll talk more about this in the “Testing Your Site Speed” section of this how to speed up your website guide.

Ideally, your ping time should be less than 100 ms from the server to your visitor’s location.

To give you an idea, there’s about 80 ms ping time from coast to coast in the United States.

You can use a site like WonderNetwork to check ping times between cities.

  • If your target audience is all over the US, you can simply choose a US central server.
  • If you have a local business, you can choose the server closest to it.
  • Targetting the US and Europe? You can go for a US server on the east coast.
  • Worldwide audience? A US server on the west coast might be a good idea.

3. Choose a Fast WordPress Theme

Poorly coded and bloated themes are another common cause of slow website speed.

A lot of beginners tend to go for hyped-up, all-in-one themes because they offer every fancy feature available.

Honestly, using a one-stop solution is sometimes reasonable, so I don’t blame them for doing so.

However, when it comes to things like WordPress themes, it’s more beneficial to use one that includes only the features you need.

The reason all-in-one themes are so popular is because they add every feature possible to appeal to a larger audience.

The issue with this is that each person will only use a couple of features, yet the theme will still load all of them.

The large amount of CSS and JavaScript used on these themes can also conflict with other plugins.

Lastly, these themes don’t really care about the features they add, they just do so so they can tell people “hey, buy our theme, we give you all of this.”

It’s sometimes better to leave specific features to plugins that specialize in them.

It’s like going to a TGI Fridays for pasta instead of an Italian restaurant.

Recommended WordPress Themes

My favorite theme, by far, has to be GeneratePress.

The theme itself is only 30 kb in size, price is cheap, and the developer is loved by the WordPress community.

It’s funny because they recently increased their pricing and everyone was telling them that it’s still too cheap.

GeneratePress is actually what I use in all of my sites.

They also have several pre-made templates on their Site Library you can install with one click.

You can read my full GeneratePress review here.

Another theme that I really like, but it’s double the price of GeneratePress, is Artisan Themes.

They have the most beautiful themes and pre-made templates I’ve seen.

If you want something that looks completely different than other sites and don’t want to have to make too many changes, check out their templates.

If you’d like to explore other options, you can read my best WordPress themes article.

If performance is what you’re after, I’d recommend staying away from Divi, Avada, Flatsome, and anything from Envato Market/ThemeForest.

4. Avoid an Excessive DOM Size

Excessive document object model (DOM) size is cause by complicated style calculations.

For example, if you have an image inside a container, inside another container.

Excessive DOM size is very common on websites using drag-and-drop page builders like Divi and Elementor, which is why it’s often recommended that you build your site with a Gutenberg blocks plugin instead.

Don’t worry, we’ll talk about these plugins in the next section.

Unfortunately, fixing the excessive DOM issue can only be resolved by redesigning your site.

5. Use Blocks Instead of Page Builders

As mentioned above, page builders often cause a lot of complicated style calculations, which leads to more processing time and ultimately slower page speed.

The large amount of CSS and JavaScript loaded by some page builders can conflict with those used by other themes and plugins, especially caching plugins.

Obviously, some page builders can be optimized so your site runs fast, but it’ll require more work to get the same performance you’d get with a site built with blocks right off the bat.

A lot of “six-figure” bloggers push these page builders and themes like Divi because they offer high recurring affiliate commissions.

They say it’s easier to customize and make professional-looking designs and speed isn’t something to worry about at the beginning.

Honestly, it’s way easier and cheaper to start your site with speed in mind than it is to fix a mess later or hire someone to do it.

Starting with a page builder like Divi and switching later on can be a complete headache since your site will be left with a ton of shortcodes you’ll need to remove, and then rebuild your site from scratch.

So, if you can, rebuild your site with a Gutenberg plugin.

Recommended Gutenberg Blocks Plugins

  • GenerateBlocks – I use the free version on all my sites. It was created by the developer responsible for GeneratePress, so you can expect a smooth integration. The plugin it’s extremely lightweight and minimal, so much that I don’t recommend it to beginners who need more features.
  • Atomic Blocks – another free, well-coded, and lightweight one but with more features than GenerateBlocks. This is my favorite for beginners. They have things like pricing tables, testimonial blocks, accordion blocks, and more.
  • Genesis Blocks – another solid one.

If you want something similar to page builders but without the bloat, you can try these:

  • Qubely
  • Stackable

6. Optimize Images

If you take photos on your phone and upload them directly to your website, you’ll end up with a large file that not only takes a lot of storage space but also longer to load.

This is because cameras aim to get the best quality possible.

Here are a few things you want to do to optimize your images:

  • Properly size images
  • Compress images
  • Serve images in next-gen formats (WebP)
  • Defer offscreen images (lazy load)
  • Optimize GIFs

Properly Size Images

The ideal dimensions for your images will depend on your current layout.

You don’t want to upload an image that’s larger than the content area where it’ll be placed, doing so will create extra work for your site since it’ll have to resize it.

For example, if the width of your content area is 900 px, you want to upload an image that’s no larger than 900 px wide.

If you have images with important information, like infographics, you can make them double the area width to make them look better on retina screens if you’d like.

For example, if your content area is 900 px, you could upload a 1,800 px wide image.

How to Resize Images

You can easily resize your images with your computer’s default photo editor or any other photo editing software like Photoshop or Affinity Photo.

Open the image you want to edit > Tools > Adjust Size… > Enter the width you’d like > Make sure the “Scale proportionally” option is checked > OK.

If the “Scale proportionally” option is checked, once you enter your desired width, the height of the image will be calculated automatically when you enter the width and vice versa.

Open the image you want to edit with the Photos app > click the three dots in the top-right corner > Resize > Define custom dimensions > check the “Maintain aspect ratio” box > enter your desired width > Save resized copy.

If the “Maintain aspect ratio” box is checked, you only need to change the width and the height will adjust automatically.

Compress Images

Compressing images is basically reducing the file size as much as possible without losing quality.

How to Compress Images

You can compress images for free before uploading them to WordPress using websites like Optimizilla and TinyPNG.

Optimizilla will give you a slightly better quality/file size ratio, but they’re both solid options.

If you already have a ton of images on your media library, you can use plugins like ShortPixel and Imagify to compress them.

ShortPixel allows you to optimize 100 images per month for free and Imagify around 200.

If you need more than that, you’ll have to use their paid plans.

Using the LiteSpeed Cache plugin? If you are, then you get unlimited image optimizations for free, so you might not need a separate plugin for this.

Personally, I run my images through Optimizilla or TinyPNG before uploading them to WordPress.

Serve Images in Next-Gen Format (WebP)

WebP is another image format (PNG, JPG, etc.) developed by Google.

WebP images will be even lighter than the other formats while retaining the quality.

Not all browsers support this format, though, so you need to have the JPG or PNG version of your image so that your site can serve those to the unsupported browsers.

Don’t worry, most image optimization plugins do this.

How to Serve Images in Next-Gen Format (WebP)

You can use any of these plugins to create and serve WebP versions of your images for free:

  • WebP Express
  • ShortPixel
  • Imagify

If you’re using LiteSpeed Cache, you don’t need a separate plugin since they have this option as well.

All of these plugins also have the fallback option, so if someone visits your site from a browser that doesn’t support WebP, the PNG or JPG version will be served instead.

Defer Offscreen Images (lazy load)

Lazy loading your images means loading them as they come into view instead of all at once, which can slow your site’s response time.

The reasoning behind this is, “why should I load images at the bottom of the article right away if the user can’t even see them yet?”

WordPress latest update actually includes lazy loading by default, so you don’t really need a plugin to do this anymore.

That being said, most caching/optimization plugins include this feature.

When lazy loading images, though, you want to exclude images above the fold.

These are any images that are shown as soon as a visitor lands on your page, such as your website’s logo, header images, and your blog posts’ featured images.

7. Use a Caching Plugin

Caching is the process of storing copies of files in a temporary storage location so that they can be served faster the next time they’re requested.

These plugins can be life-savers when it comes to speeding up your WordPress site.

Most caching plugins now come with several optimization features like minifying and combining CSS and JS, remove unused CSS, and more.

Recommended Caching Plugins

1. WP Rocket

Arguably the best overall caching plugin available. Very active developers and easy for beginners to set up (basically plug-and-play).

If you want something stable, WP Rocket might be the best option for you.

The plugin is $49 for one year of updates and support. They also offer a 30% renewal discount.

» View WP Rocket

2. LiteSpeed Cache

One of my favorite caching plugins for those using LiteSpeed web servers (hosts like NameHero).

It’s actually super complete, it even has free image optimization and server-side cache instead of PHP.

The best part?

The plugin is free, lol.

» View LiteSpeed Cache

Notes on Caching Plugins

While caching plugins are extremely helpful, they can often break your site if you don’t know what you’re doing or if they have very aggressive settings.

You have to be careful, especially if you’re using page builders like Divi or Elementor.

Most of the time someone tells me that their site’s broken, it’s due to a setting in their caching plugin.

Broken site FBM
Broken site FBC

That’s also why I recommend solutions like WP Rocket that are stable and easy to set up.

If you do run into any issues with a caching plugin, it’s always recommended that you enable each setting one by one to see which one breaks your site and then leave that setting off.

Also, don’t combine caching plugins, only use one at the time, okay?

8. Use a CDN

A content delivery network (CDN) is a globally distributed network of servers or points of presence (PoP) whose goal is to deliver your content faster.

A CDN will distribute your data to different servers around the globe and deliver the content from the one that’s closest to the visitor requesting it.

For example, if your site is hosted in the United States (US), it would take longer for someone in the UK to receive your page after sending a request.

With a CDN, your website would be delivered from a closer location, for example, Germany.

If you have a local business, then you don’t really need a CDN.

Just choose a data center close to your city, and you should be more than okay.

Recommended CDNs

1. Cloudflare

Cloudflare CDN is free and very good. So if you don’t feel like spending money, this is the way to go.

The only “downside” is that it has a lot of PoPs, over 155 data centers.

This might be a good thing if you’re getting a ton of traffic from lots of different places.

But if you aren’t, you might experience a lower cache hit ratio since you don’t have enough traffic to keep those cache active in each data center.

Note on Cloudflare CDN

A lot of hosts offer Cloudflare integration; however, I recommend signing up for Cloudflare on your own and then adding your website there instead.

That way, if you ever decide to switch hosts, you’ll have your own Cloudflare account and not have any problems when moving.

2. BunnyCDN

If you want better performance than Cloudflare and can spend an extra $1-4 per month (depending on usage), go with BunnyCDN instead.

This is what I use on this site.

It has around 60 data centers, which might lead to a higher cache hit ratio than Cloudflare.

Again, they’re both great.

9. Use a Fast DNS

The domain name system (DNS) is like the contact list on your smartphone.

It matches easy-to-remember names (domain names) with their corresponding phone number (IP address) so that you don’t have to memorize all your contacts’ phone numbers.

Basically, a DNS is responsible for translating human-friendly domains (blogstalgia.com or youtube.com) into server IP addresses (204.12.173.250) that can be read by computers.

This process of looking up DNS records and directing traffic can take some time, so it’s a good idea to choose a good DNS, not use the one typically offered by your domain registrar, as they’re usually slow.

Recommended DNS

There are both premium and free DNS services available.

Lucky for us, the fastest DNS provider – Cloudflare – is actually free.

DNS performance analytics comparison
DNS performance analytics comparison

So you can simply go to Cloudflare, create your account, and easily set up your DNS with them.

This is where I keep the DNS for this site.

10. Optimize Fonts

When it comes to improving site speed, it’s easy to underestimate something like fonts because they are small in size.

For example, custom web fonts, such as Google Fonts, can make up around 3.2% of a page’s weight.

However, they can still affect your load times, especially if you’re loading a few different font styles.

How to Optimize Fonts

When it comes to optimizing fonts, you have a couple of different options:

  • Using system fonts
  • Hosting custom web fonts locally or on your CDN

1. Using System Fonts

System fonts are fonts already installed on your computer, so there’s no need to load any font at all on your pages.

This option will lead to faster load times than using custom web fonts, even when hosted locally.

I use system font stack on all of my sites.

If you have a theme like GeneratePress, this option is just one click away, and you don’t have to install extra plugins to prevent Google Fonts from loading.

2. Hosting Custom Web Fonts Locally or Your CDN

If you’re not feeling system fonts and want to use custom web fonts instead, you can host them locally or on your CDN.

This way, there won’t be any extra DNS lookups to a third-party.

You can do this easily with a free plugin like OMGF.

11. Leverage Browser Caching (Store Google Analytics Locally)

Hosting Google Analytics (GA) locally will help you speed up your site by reducing extra DNS lookups.

It will also get rid of the “leverage browser caching” recommendation from some speed tests.

How to Fix Leverage Browsing Caching

Here are a few plugins you can use to host Google Analytics locally and fix the leverage browsing caching warning:

  • CAOS – free and simple plugin that gets the job done.
  • Perfmatters – if you’re using Perfmatters for optimization, they have this feature there as well.
  • WP Rocket – if you’re using WP Rocket, they have this option there.

12. Check Your Plugins

Poorly-coded, all-in-one, and plugins that load scripts on every page on your site are another common reason for slow site speed.

Plugins should only load the feature you’re using and make as few requests as possible to keep things running fast and efficiently.

For some of you reading this, getting rid of unnecessary plugins could make a HUGE improvement on your site speed.

You can check out my list on the best WordPress plugins here.

Is Having Fewer Plugins Better?

You’ve probably heard that keeping fewer plugins is better, and this is… kind of true.

The reason this isn’t ALWAYS the case is because plugins with tons of features still behave like several different plugins packed together into one.

For example, you could have a plugin like Yoast SEO that has a ton of features, such as content analysis, breadcrumbs, XML sitemaps, meta descriptions, and schema.

But you might only need the XML sitemaps and breadcrumbs features.

In this case, it might be better to just install 2 different plugins like Breadcrumb NavXT and XML Site Map, for example.

Yoast might be only 1 plugin, but it’s behaving like 10 different plugins put together.

Another option would be to use a modular plugin like The SEOFramework, which allows you to enable only the features you need.

What to Look for in a Plugin

When looking for plugins, look for ones used by developers, not what’s hyped up by “big” bloggers.

This doesn’t mean that all recommendations from developers are good or that all recommendations from “big” bloggers are bad, but there’s a higher chance of a developer’s choice being better.

As mentioned above, you want to install plugins that you absolutely need and only have the feature you’re looking for.

Lastly, you want to be careful with reviews from WordPress.org, as high ratings doesn’t mean that a plugin is good, just that it’s popular.

And the reason many plugins are popular is because they’re multi-purpose. They add a ton of features so they can appeal to a larger audience.

Managing Plugins

Unnecessary Plugins

It’s tough to give a general recommendation on plugins since everyone’s needs are different, but here are some plugins I believe are unnecessary and can/should be handled by your theme:

  • Simple Custom CSS – this is already built into WordPress Customizer, so no need to install a separate plugin.
  • Font plugins – your theme should be handling this.
  • HTTPS plugins – it’s pretty easy to force HTTPS manually.
  • Head, Footer, and Post Injections – you can just add codes directly to your theme files. Not sure why people are terrified of doing so.

Plugins That Could Be Deleted

Here are a few plugins you could get rid of depending on your theme and how much work you’d be willing to put in:

  • Table of contents plugins – you can create your own with just HTML and CSS. It’s even faster now that Gutenberg has an easy way of adding anchors, but still takes more work than simply installing a plugin.
  • Scroll to top button – if you’re using GeneratePress, they have this option built into it.
  • Author box plugins – the author box at the end of my articles and the sidebar are both created with Gutenberg and placed there using GeneratePress hooks. So no need to install something like Fancier Author Box.
  • Ad Inserter plugin – you can use GeneratePress hooks to insert ads.
  • Redirection plugins – add redirections using .htaccess instead.
  • Security plugins – security is really something that should be handled by your host, not a plugin. If you’re using a good host, you probably don’t need one or could manually add what you need into your .htaccess.
  • Hero banner plugins – again, GeneratePress hooks.
  • Page builders – builders like Divi, Avada, WP Bakery, and Elementor aren’t only heavy, but they load stuff on every page and even features you’re not using. You’ll constantly see people in their Facebook groups asking which plugin they can use to prevent stuff from loading on certain pages. You can use Gutenberg blocks plugins instead.

13. Remove Query Strings From Static Resources

Another recommendation you might see on your website’s speed report is to remove query strings.

Query strings are the part of your URL that contain extra information, such as the file version of your CSS and JS, affiliate IDs, filters and more.

For example, YourDomain.com/style.css?ver=1.9 or YourDomain.com/ref?=1990.

Some servers can’t cache query strings, so by removing them, you can sometimes improve you caching.

If you don’t know what you’re doing, I recommend just leaving query strings alone, as removing them can sometimes cause some issues.

One example is that changes to your site won’t appear to your visitors because your site will still be serving the old cached version until the cached resource expires or you purge the cache.

How to Remove Query Strings

If you still want to remove query strings, you can easily do it with a plugin like Perfmatters with one click.

14. Eliminate Render-Blocking JavaScript and CSS

The eliminate render-blocking and JavaScript and CSS recommendation will show up if you have files preventing your website from displaying a page before loading these files.

You can fix this issue by enabling the “Load JavaScript deferred” option in WP Rocket.

Now, some plugins do use jQuery, so test your site throughly when enabling this option.

15. Clean up Your Database

Almost everything gets stored in your WordPress database, from comments, posts, revisions, drafts, stuff from plugins you’ve uninstalled, to spam.

This can not only slow your site down but can become expensive if your host charges you for storage.

So consider cleaning things up every once in a while, okay?

There are several performance plugins that have the option to clean up your database, such as:

  • LiteSpeed Cache
  • WP Rocket
  • Perfmatters

If you’re looking to clean up your media library, you can use Media Cleaner by Meow Apps.

16. Offload Your Emails

Emails are another thing that’s often overlooked by people, but they can also have an impact on your server and server resources.

All of the emails and attachments you send and receive take up disk space that could be use by your site.

This becomes even worse if you’re sending bulk marketing emails from your server, which you shouldn’t, by the way.

Not only because of the impact on your resources but because of deliverability.

Marketing emails should be sent from an specialized email service provider (ESP).

Emails sent from your website/WordPress have a higher chance of ending up in your customers’ spam folder.

Recommended Email Providers

For marketing emails, you can check out:

  • ConvertKit – this is what I use. You can use them for free for up to 1,000 subscribers. (my review)

For transactional emails, such as receipts, confirmations, and other emails sent automatically from WordPress like updates, notifications, and reply to comments, you can check out:

  • Mailgun – what I use. The free plan should be more than enough for most people.
  • SendGrid – another solid option.

17. Optimize Your Comment Section

If you’re getting a ton of comments on your blog posts, let’s say over 50, your site speed might be starting to get affected by it.

The issue with the WordPress native comment system is that, while it’s fast, it loads all comments and their Gravatar at once.

So if you have hundreds of comments, your load times will increase.

Not only that, but your visitors might be turned off by the long scroll bar and think that your article is too long and just a bunch of fluff with no value.

Here are a few ways you can optimize WordPress’ native comment section:

  • Disable comments – I know, I know. This isn’t technically optimizing it, but completely removing the problem. Still, I thought I’d share that option, just in case. Besides, it will also solve the spam comments problem.
  • Paginate comments – an easy way to speed up your website’s comment section is to simply break comments into pages. This can be done by going to your WordPress dashboard > Settings > Discussion > and checking the box that says “Break comments into pages with # top level comments…” You can keep 10-20 comments per page.
  • Load Gravatars from your CDN – another way to improve your speed even more is to load Gravatars from your CDN.
  • Lazy load comments – the last option is to install a plugin like Lazy Load for Comments to, well… lazy load comments, just like we did earlier with images.

A lot of people also like using the Disqus plugin to replace WordPress’ default comment section.

The problem with Disqus is that it can be a little slow as it makes a lot of requests and loads 3rd-party assets even on pages that don’t have any comments.

If you’re trying to optimize Disqus, you can try the following:

  • Disable tracking – go to Settings > Advanced > uncheck the “Tracking” box.
  • Disable affiliate links – right under “Tracking,” you should see the option to disable affiliate links. Uncheck that box as well.
  • Load on user interaction – the last trick is to use a plugin like Disqus Conditional Load to make the comment section load only when the user interacts with the page.

How to Test Your Website Speed

You can test your website speed using any of these sites:

When testing, keep comparisons within the same tool, not across.

For example, if you tested your site speed with GTmetrix before making any changes, then test it again with GTmetrix after the changes and compare them.

Do not compare Pingdom results with GTmetrix results or PageSpeed Insights.

Also, make sure that you select the location from where you want to test your speed.

What to Focus on When Testing Your Site Speed

A lot of people, especially beginners, focus way too much on their page speed score (letter grade) instead of measurements that matter most.

When learning how to speed up your website, you should focus mainly on these three measurements:

  • Time to First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Cumulative Layout Shift (CLS)

You could get a 99% score, but still have a load time over 5 seconds.

Now, this doesn’t mean that page speed scores are completely useless. I mean, if you get an A, it means that you’re following best practices.

TTFB

Time to first byte (TTFB) is the amount of time it takes for a visitor to receive the first byte of data from the server.

Here are some good guidelines for you:

  • Under 100 ms – good
  • Under 200 ms – recommended by Google
  • Between 200-500 ms – it’s average
  • Above 500 ms – might want to look into fixing this

FCP

The first contentful paint (FCP) is the time it takes for the browser to first render any text, image (including background images), non-white canvas, or SVG.

FCP should happen within 1 second of the page starting to load, according to Google.

Here are some guidelines:

  • Under 1 s – good
  • Between 1-3 s – okay
  • Over 3 s – get this thing fixed

CLS

Cumulative layout shift (CLS) measures how much your content bounces around when the page loads.

Have you ever visited a page and noticed that the elements, such as buttons, paragraphs, images, and forms quickly “came together” or “assembled?”

Or how images pushed content down as they started to load?

Well… that’s a bad cumulative layout shift.

Here are some CLS guidelines for you:

  • Under 0.1 – good stuff
  • Between 0.1-0.15 – okay, but you could do better
  • Between 0.15-0.25 – longer than recommended
  • Over 0.25 – get your layout under control, will ya?

What About Fully Loaded Time?

Another measurement that many people tend to worry about is fully loaded time, however, this doesn’t matter much because your page can be completely usable to your visitors way before it has loaded completely.

Why Website Speed Matters

  • Google has mentioned that page speed is a ranking factor. Obviously, it’s not as important as quality content and backlinks, but still…
  • Users typically leave a site if it takes more than 3 seconds to load.
  • Google’s Page Experience update is set to launch in May 2021. This will take expected user experience into consideration for ranking in search results. To evaluate this, Google will use signals like how quickly your page loads, if it’s mobile-responsive, has a valid SSL, if you have intrusive pop-ups, and whether content shifts as the page loads (CLS).
  • Website speed can significantly affect your conversion rate. The faster a page loads, the higher the chances a visitor will perform your desired action. Not surprisingly, Walmart found that for every 1 second improvement in page load time, conversions increased by 2%.

Final Thoughts: How to Speed up Your Website

When it comes to learning how to speed up your website, there are just many different things that come into play.

In this guide, I showed you pretty simple and basic tricks that should be enough for most people to get good loading times.

Unfortunately, some websites might require more specific tuning that would require someone to actually take a look at it.

That’s it for now, but I’ll keep updating this guide with more optimization tricks.

Chris

Christian Coulson

Christian is an industrial engineer who's used his knowledge and experience to grow 7Sigma Physiques—his fitness coaching business and blog with thousands of monthly readers.

Comments

  1. This is such an interesting read! My website speed isn’t great at all, even though I do use everything possible to compress my images (aka tinyjpg and shortpixel). I will refer to this again to improve the speed even more! 🙂

    Reply
  2. Very informative post. After reading it I think there a quite a few things I need to work on to speed up my website. Thanks for the suggestions

    Reply
  3. Wow really helpful. I’ve been trying to speed things up on my blog for a while. Thanks for breaking it down. First on my list, get a cdn!

    Reply
  4. I really need to pay more attention to website speed, and you’ve shared so many great suggestions, so I guess I have no more excuses!
    I especially appreciate that you’ve explained about which measurements we should focus on.
    Thank you for all the helpful advice. 🙂

    Reply
  5. Great post! There’s so much useful information here. I’ll have to try some of these tips to make my website faster. Thanks for sharing!

    Reply
  6. Wow! I was really impressed with the level of detail you went into! I made the mistake of starting my blog on WordPress.com (rather than the .org and self hosting). This year I am looking into migrating it to self host but haven’t taken that plunge yet.

    Reply
  7. Thanks for this great post! I kept getting an alert that my site is slow and I think it’s because I use Bluehost. I didn’t even know that could be the culprit!

    Reply
  8. I’ve found most of these tips online through my searches and I can say it will be a huge time-saver for others to have them all in one place like this ? I’ve been pretty heavy into hosting lately and am currently in the middle of a full migration from Hostetter to Cloudways Vultr HF. It can be intimidating, but is probably one of the more important parts of blogging if you want to perform well.

    Reply
  9. I am about to create a fairly complex website on conflict resolution and this (plus the linked articles by the author on related topics) is by far the clearest of the many articles’ve read on the topic of speeding up a website. I will be using Kadence Pro as my design tool and am about to sign up with either NameHero or Rocket.net as a web host. Your articles have given me much more confidence to begin this process, Christian. I really appreciate all the effort you put into this. Paul

    Reply

Leave a Reply to Christian Cancel reply