How to Speed Up Your Website & Core Web Vitals (Ultimate Guide)

Cole B. | April 27, 2025

In this case study, I am going to give you an easy-to-follow guide on how to improve your website load speed.

In fact these tips helped me achieve a score of 100 across all Google PageSpeed Insights metrics for my previous AI blog website (flywithai.co).

So if your looking to reduce your bounce rate, help SEO, and create a better user experience, this guide is for you.

1. Speed testing (for existing websites)

First off, this step is for people who already have an existing website to identify what exactly is holding back their website’s load speed.

There are a few free resources below that I recommend:

1.1 Google PageSpeed Insights

This is the main resource I use for finding and fixing website issues because it identifies not only issues with website speed but core web vitals (we will explain this more below) as well.

In addition to giving you metrics, it gives you the problem areas easily laid out for you. This is my #1 tool for testing website performance.

Here, Google PageSpeed Insights is going to lay out the issues with your website.

I am not going to specifically address each possible issue here, but through this article, we are going to indirectly address how to solve each one of these issues.

1.2 GTmetrix

GTmetrix is another website that is more serious for finding problems with website speed. Good to pop your website in this every once in a while, in addition to Google PageSpeed Insights.

It is a lot more robust than most other tools and can offer more specific insights into issues your website is experiencing.

The only issue for some people is that it can be overwhelming for people and it doesn’t really tell you how to solve issues, just identifies them.

1.3 Pingdom

Now, Pingdom is a resource I really only use for one reason: the number of requests.

Why?

Well, requests are something you can always optimize by combining files from CSS and JavaScript into one big file to save time on having the website bounce back and forth between a server to load everything

It is much more preferable to have one big CSS file, rather than 10 small CSS files. The amount of code loaded is the same, but it saves time on requests.

We are going to use Pingdom to optimize for this issue in particular, and we will address combining CSS and JavaScript files later in the article.

2. DNS provider

Don’t worry if you don’t know what a DNS provider is! We are not going to get technical with it, and only focus on what to do.

A DNS provider is which host you are using for your domain (website address). There are many to choose from, and sometimes your DNS is also what you are using for your CMS as well.

I am going to list some popular DNS providers below to see if any of them ring a bell.

Namecheap
Cloudflare
Amazon Route 53
Domain.com
GoDaddy

Why does your DNS provider matter?

Some DNS providers are slower than others, simple as that. It can add up to 50 milliseconds for every website visitor for every webpage.

It’s not much, but incremental improvements are the name of the game with website speed.

I recommend using a premium DNS like the ones below:

Cloudflare
Amazon Route 53
Google DNS

3. Use a lightweight theme (WordPress)

Okay, now themes are going to be specific to CMS’s that use them for templates. A lot of CMS’s require users to use a theme for their website, like Shopify and WordPress.

Why do themes load faster or slower?

Themes usually come with specific identities or a stylistic look with which involves them having more code (specifically JavaScript is what we are trying to avoid).

So, how do I know which themes are fast and slow?

That is a complicated question. I’ll give you a couple of ways to do so, but I don’t recommended selecting a theme this way. There are way too many themes to test, but I’ll still give you the information on how to do so.

1. Test the theme’s performance.

First, download the theme(s) you are interested in and compare the results from the speed test websites above.

After this, you can make an informed decision on which theme you might want to use based on the speed scores and theme styles.

2. Download themes specifically meant to be fast (recommended)

What I would recommend, however, is researching the fastest themes for your current CMS and sticking with them.

I have already done some of this research with WordPress, and I’ll show what I found below:

WordPress

Please, dear god, use one of these themes to have a fast-loading WordPress website. These three themes below come with minimal JavaScript and responsive images built into the code.

They will be a little generic and bare as a result, but it is up to you to make your website look pleasing by editing the website, not relying on the theme.

Themes:

Generate Press
Astra
OceanWP

4. Images & CDN

If you have read anything about website load speed, you are probably well aware of how much images are a factor.

Why?

Images are HUGE in file size. Well… if you don’t optimize them, in addition to some image loading strategies.

We are going to get into the thick of it on all the things you can (and should) do for image optimizations.

4.1 Content Delivery Network (CDN)

Firstly, having a content delivery network (CDN) for your images is going to be one of the most important parts of loading images quickly.

What is a content delivery network (CDN)?

A CDN is where you store your images on a server, so they are loaded way more efficiently, and usually they are a part of a network of server,s and they choose to load the image from the closest one to the website visitor.

This might be the most important thing you can do for loading images quickly.

Your website host or DNS might come with a CDN. Of course, I would recommend using the fastest CDN’s below, but sometimes convenience is kin,g and using whatever CDN is already included with your DNS and/or host can be much easier.

For example, if Cloudflare is your DNS, then it comes with a free CDN (I don’t recommend the free version, very slow), or some WordPress hosts like Kinsta come with a CDN as well.

If you don’t have a CDN included with your website or are looking to switch, choose these below:

Cloudflare (paying for the premium plan)
Microsoft Azure
Google Cloud CDN

4.2 Lazyload Images

We want your images to be Lazy!

This is the only time being lazy is a good thing, I promise. Lazyloaded images mean that images don’t load until the website visitor scrolls to a part of the page that shows the image.

Why does this work?

Loading all the images on a page all at once is s-l-o-w.

But only loading the necessary images that someone is currently looking at is fast.

How do you do this?

Ideally, you use a CMS, theme, website builder, or plugin to achieve them. There are many options to lazyload images on your website.

I’ll give you some options for WordPress below:

Plugins

Plugins on various CMS’s can add the functionality to lazyload images.

Here are some plugins you can use on WordPress to lazyload images:

A3 Lazy load
Autoptimize
Lazy load

CMS & Website Builders

Some CMS’s and website builders like Elementor come with an option in the settings to lazyload images.

You just need to look at the settings to see if you can turn this setting on.

Additional Advice

A lot of people lazy-load all the images on their web pages. This is unoptimal.

The images that a website visitor would immediately see before scrolling (above the fold), shouldn’t be lazyloaded.

This only makes those images slower to load because the website has to use logic to determine that the user is able to see the images before loading them. Instead, they should just be loaded immediately.

4.3 Compress Images

Images should be compressed before being uploaded to your website!

Compressing an image reduces its file size greatly while minimally reducing the quality, sometimes indistinguishable.

There are two forms of image compression:

Lossy Compression

Lossy compression significantly reduces the image file size, but the image could look lower quality.

In my opinion, it’s worth it. Maybe if it’s an important image for a photography portfolio, you wouldn’t use this, but for most people, it should be fine.

Lossless Compression

Lossless compression reduces the image size less than Lossy, but the image will look exactly the same. Meaning no reduction in quality whatsoever.

Application

All images should be compressed using one of the two methods above.

Use any of these image compression websites:

TinyPNG
FreeConvert
XConvert

Also, there are some plugins in WordPress that automatically do this as well:

Imagify
WP smush
Optimole

4.4 Responsive images

Responsive images are going to be an important way of loading your images using HTML, especially for mobile users.

What it does is load a different-sized version of the same image depending on the screen size on which the website is being viewed.

This helps images load faster by loading smaller versions of an image when applicable, for example loading a smaller image on mobile devices.

This is what it looks like:

There are many ways to achieve this, other than hand-coding it.

For WordPress, this is usually enabled by default. Otherwise, it should come with the themes I had listed above.

For other CMS’s I would recommend using a theme that come with responsive images or using plugins.

4.5 WebP file format

You might not have heard of images using the WebP format. It’s a little new in terms of image formats.

The most common image formats are: .JPEG, .PNG, and .TIFF.

The reason I recommend using WebP, is that images using this file format are usually smaller in file size. Also, our overload Google recommends it.

Convert image file formats by using a website like XConvert.

4.6 Fetch Priority

This is a more minimal improvement to prioritizing images, but it is still worth mentioning.

You can designate a priority to images in the HTML that loads the image.

This is what it looks like:

This is high priority.

This is low priority.

I recommend assigning any images above-the-fold a high priority and all other images a low priority.

4.7 Reduce the image size to the necessary size

If your website has a maximum size that images will ever be loaded at, don’t upload images any larger than that. Even with responsive images.

This prevents any unnecessary loading of pixels that don’t need to be. Not the biggest deal with responsive images, but it is best practice.

5. Optimize HTML, CSS, and JavaScript

Without getting too deep into coding, HTML, CSS, and JavaScript are what make up what you can see on a website.

You don’t have to know these languages to make them load faster. Honestly, doing this step by hand would take forever.

We are going to use plugins and tools to make all our code load after and in a more optimal order to accomplish this.

Let’s dive in.

5.1 HTML

HTML is the code you see with inspect element. It gives the page all the text, images, links, pretty much everything.

So how do you optimize it?

Minify Code

The first step in optimizing HTML is minifying it.

What this means is that the code is going to get rid of any spaces and in some cases, just be one big line of code.

5.2 CSS

CSS is what is applied to HTML to make it look different. Is that important to know? No. But I wanted to give you a background.

Let’s learn how to make it load faster.

Minify Code

This is the same as minifying HTML, you are basically just making the code take up the least amount of space possible.

Combine Sheets

Combining CSS sheets into one big sheet can reduce the number of requests the web page needs to make, while loading all the same code.

I would only recommend this for CSS that is loaded on all website pages.

Optimize delivery (advanced)

Now this is for some website-savvy people.

If a specific CSS sheet is only needed for a specific page or group of pages. Then it is much more optimal to only load those CSS sheets on those pages.

There are some plugins that accomplish this, but this would take a decent amount of time and knowledge of exactly which CSS sheets are necessary for each page.

5.3 Javascript

Arguably, the most important code to optimize is JavaScript. JavaScript reduces website load speed the most of the three codes mentioned.

Unfortunately, the world is cruel, and JavaScript is possibly the hardest to optimize as well. But I am going to do my best to make it as simple as possible.

Let’s go into it.

GTM

Some JavaScript can be loaded using Google Tag Manager (GTM).

I am going to go more in-depth on a section below, but I wanted to mention here as well because it is relevant.

Loading JavaScript with GTM makes it possible to load scripts more optimally by deciding when they should be loaded, and using GTM condenses the amount of code and requests in your header.

Combine Scripts

Combining JavaScript into one big script that will be loaded on every single page of your website can benefit website load speed by reducing the number of requests made.

I am not an expert in JavaScript, so I personally use plugins or external websites to do this.

Minify Code

Minifying JavaScript is the same as above, it just reduces space in the code. Use websites or plugins to minify your JavaScript.

Load specific scripts per page

This is a more tech-savvy way of reducing the impact JavaScript has on your website.

What this approach does is, if JavaScript is only needed for specific pages on your website, for example, a review widget appearing on a product page, then the script for that should only be loaded on that page.

That might sound obvious, but most scripts load on ALL pages on your website.

Defer & Async (Important)

How JavaScript is normally loaded is that it pauses loading the HTML until the script is done loading.

Deferring and asyncing your JavaScript stops the page from pausing during its loading.

Learning to defer and async your JavaScript is very useful for making sure that the important parts of your page that users see will be loaded first.

Let me explain more below:

Asyncing JavaScript

Async JavaScript downloads the script during HTML parsing and executes the JavaScript immediately once it has loaded.

This way, your JavaScript doesn’t pause loading the HTML of your website, and your users can see content quicker.

Deferring JavaScript

Defering your JavaScript is similar to async, but the key difference is that the JavaScript waits to load until after the HTML is parsed.

I personally recommend almost all JavaScript to be deferred. Most of the important elements on a page are going to be HTML and CSS.

No need to make the user wait for anything else.

6. Fonts

Loading fonts takes up way more time than people might think. They can be the same size as the HTML you are loading for a page!

I am going to keep this simple.

6.1 Use a universal font (recommended)

I highly recommend this. Maybe I am a noob at branding, but I think using these ridiculously specific fonts are over-rated.

There are many fonts to choose from that are already downloaded by default on every operating system.

I suggest using one of the fonts below to avoid any impact on website load speed from fonts:

Avenir
Calibri
Courier
Georgia
Times New Roman
Helvetica
Veranda
And much, much more…

This is a resource to find a huge list of all the fonts downloaded on your computer, with a ranking for readability.

6.2 Wait to load your font

This method is much more complicated. If you are using WordPress you can easily do this with plugins. Otherwise, you might have to dig into your header HTML to do this yourself.

I am not going to go too in-depth on how to do this.

Basically, what you need to do, it load the text on a webpage first using the default font for the website visitor’s computer, then load your front.

Here is a resource that explores this topic more thoroughly.

7. Google Tag Manager (GTM)

Google Tag Manager, also known as GTM, is a way to dynamically load scripts on your website. This tool is useful if you are loading multiple analytics scripts, like Google Analytics and Hotjar, for example.

Follow this guide to use GTM for your website.

8. Plugins

Pretty much every plugin you use on your website slows it down. Plugins usually add JavaScript to every single page on your website!

I have two recommendations for plugins:

8.1 Delete or use the least amount of plugins possible

This is self-explanatory.

Most plugins have code that loads on every page, even if you’re not using it.

You should seriously go one by one and consider deleting every plugin. Each deleted plugin is going to save 100+ milliseconds on your website.

8.2 Replace plugins with the fastest-loading version possible

For every available plugin on a website, there is usually an equivalent plugin that does the same function but loads faster.

Do some research to find the best plugin for load speed.

For example:

Yoast SEO plugin has an equivalent plugin called “The SEO Framework” that does the same basic functions with less impact on website load speed.

9. Delete website sections that aren’t static

This might take some explaining for the inexperienced website owner, but bear with me.

Some parts of your website are pulling information using JavaScript (our worst enemy), to populate parts of your website.

For example, if you have a blog post grid widget on your website that automatically selects the most recent blog posts to display, that is using JavaScript. It needs to pull information about all your blogs and look at the publish dates, and then populate it on your widget.

Everything on your website should be static, ideally, nothing is dynamically loaded.

Of course, there are some exceptions, but for the most part, try to avoid dynamically loaded content.

10. Core Web Vitals

What are core web vitals? They are Google’s way of deciding whether your website is well optimized for load speed and giving a good user experience.

Unfortunately, around here, we focus on pleasing our overlord, Google.

So I am going to teach you how to optimize for these three important core web vitals below:

10.1 Cumulative Layout Shift (CLS)

Cumulative layout shift is a measure of how much a page’s content moves around unexpectedly during page loading.

Here’s an example:

Google puts a high importance on CLS when judging the performance of your website, so naturally, we are going to optimize for it.

Specify Image/video size

In HTML, you can specify the width and height the image is going to take up on the page, so the page doesn’t shift the content around once it loads.

Above is an example of how to specify the width and height of an image in HTML, and this should be done for all images.

Reduce the amount of content loaded dynamically

Above is an example of how to specify the width and height of an image in HTML, and this should be done for all images.

Reduce or get rid of animations

Some animations, specifically with the layout of a page, can increase CLS.

I don’t recommend animations in general because they usually use JavaScript, but hopefully this gives you another reason.

10.2 FCP & LCP

Both First Content Paint (FCP) and Largest Content Paint (LCP) involve the loading of content on a page.

Let’s get into the differences and how to optimize for them:

First Content Paint (FCP) = Measures when the first content is loaded on a page, which includes text and images.

Largest Content Paint (LCP) = Measures when the largest content element, like an image or text, becomes visible within the user’s view.

Both can be optimized similarly, although FCP is optimized using pretty much this whole guide.

A lot of this section will be repeated parts from the optimizing image section above, but I wanted to include it just in case you are skipping to this section and didn’t read above.

Preload Images

Preloading images loads an image ahead of time to prevent any issues with FCP and LCP.

Use this code on what would be considered the LCP and/or FCP of a page.

High-Fetch Priority

Fetch priority designates a priority for images to be loaded.

Follow my guide above, where I go over how to add fetch priority to an image.

Compress Images

Compressing images reduces the image file size. Incredibly important for both FCP and LCP.

Same as above, see the “Images & CDN” section for more information.

Responsive images

Responsive images are a way of loading the necessary size for an image depending on the viewport size.

If you aren’t tired of me saying see above, well… see above in the “images & CDN” section to learn how to do this.

Fonts

Sometimes loading fonts can hinder FCP. See above on how to optimize font load speed.

11. Website Cache

A website cache is a stored copy of your website’s files. Like HTML, images, CSS, and JavaScript.

I’m not going to pretend like I fully understand what a website cache does.

What’s important is that you know how to use it.

What is the ideal thing to do is to clear your website’s cache whenever you update the website. Is this reasonable? Not really.

I recommended clearing the website’s cache at least once a week or after big updates.