A Beginner’s Guide to Website Performance

In the time it takes you to read this sentence, your website visitors have already abandoned your website and chosen your competitor’s site instead.

That’s how long it takes to lose them forever.

If you’ve ever had to wait for a web page to load, you know how frustrating it can be.

Websites these days are complex and often filled with images, videos, and scripts. This means they require more time to download than simple HTML pages from the good ol’ 90s and early 2000s.

But even worse is the fact that so many of these modern sites are also poorly designed. They’re packed with features but suffer from slow performance because they don’t understand how people use them.

There’s no excuse for subpar website performance at this point. Not if your site is well managed by someone who cares about what their visitors experience every day.

If you need help improving your website’s performance, follow these tips below.

But first, a few important questions…

1) What is website performance?

Website performance is the speed at which your website loads in a visitor’s browser. It also includes how responsive your site is and how easy it is to navigate.

2) Why does website performance matter?

A slow-loading website will frustrate both visitors and Google. This will lead to a decrease in your rankings in Google for your target keywords.

It’s also important because today’s users have become impatient with slow-loading sites. If they see yours loading too slowly, they’ll leave it behind and find another one with better performance in less time.

There are 3 key areas where website performance matters:

• User Experience
• SEO
• Conversion Rate

2.1) User Experience: Website performance will impact your brand perception

Research has shown that a slow website can actually make visitors leave your site without viewing a single page. Google has found that a one-second delay in website loading time can decrease conversions by up to 20%.

And if the site doesn’t load at all, they’re not going to stick around.

It’s also important to remember that your visitors aren’t always on high speed internet connections like you are.

A recent survey by Speedtest found that the average mobile download speed worldwide is 56.74 Mbps. While that may sound really fast, keep in mind that is an average.

Many developing countries still have underdeveloped internet infrastructures. A recent study by IDB found that only 33% of schools in Latin America have sufficient internet bandwidth, less than half of those reported on average in OECD countries (68%).

There’s even a massive gap in high speed internet services between urban and rural areas in the United States. As of 2016, 39% of the US population did not have access to high speed internet services.

That means many people worldwide are still using slow internet speeds. If you live in one of these areas or are expecting visitors from them, making your website load faster will be even more crucial.

2.2) SEO: Website loading speed directly impacts Google rankings

Web performance is a key factor in SEO, as it makes or breaks your site’s speed and performance.

Google uses page speed as a ranking factor so if your site takes too long to load, you can watch your rankings take a nasty tumble.

It’s even more important for mobile sites, which require extra optimization to improve loading speeds.

Slow websites get left behind by the competition. Simple as that.

Even if your website is designed beautifully, has great content, and offers quality products and services, slow loading times will eventually hurt your rankings.

2.3) Conversion Rates: Website performance will make (or cost) you money

Website loading speed has a strong, direct correlation to conversion rates and sales.

Check out the difference actual milliseconds can make in your website’s conversion rate. (According to Cloudflare)

Here’s the kicker: It is at least 5X more expensive to acquire a new client compared to retaining your existing customer. This is why it’s actually much more profitable to keep your existing customers than find new ones.

So, with the costs of acquiring new customers being so high, it’s in your best interest to make sure that your site loads fast enough. Because once they leave, it will be way harder to get them back.

3) How to test your website’s performance

Now that we’ve established why it’s important to test your website’s performance, let’s look at how we can do it.

3.1) Website performance tools

There are many different website speed test tools that you can use to test your site performance.

All of these tools essentially do the same thing, but have some variations in testing standards and ease of use.

GT Metrix

GT Metrix is a free website speed test tool that will help you understand where your site stands in terms of speed and responsiveness.

The test takes less than a minute to complete, and it measures the load time of a single page of your website. One at a time.

It also tells you how your site performs on mobile devices, including iPhone and Android. And you can test from multiple different servers located around the world.

Though many of the best features are locked away behind the pro version of the tool, you can still get a ton of valuable and actionable information from the free version of GT Metrix.

My favorite feature is the waterfall chart, which breaks down every single file that is loaded on your website so you can pinpoint the exact problem. Of course, this isn’t unique to GT Metrix. I just like the visual interface.

GT Metrix is my personal choice for the best website speed test tool. It’s the tool I’ll be using throughout this website optimization guide.

Google PageSpeed Insights

Google PageSpeed Insights is a website speed test tool that helps you identify quick fixes to improve your site. It tells you where you need to cut down on the amount of HTML, scripts, and even images on each page.

The interface can be a tad overwhelming for new web developers, though Google has made some good strides in simplifying it in recent years.

Pingdom

Pingdom provides a website speed tool that provides insights on load time, reliability, uptime, mobile friendliness, and other key metrics. It also provides recommendations for how to fix any issues you find.

It is part of a much larger suite of performance monitoring tools for websites. You can even install Pingdom’s monitoring tool directly onto your WordPress site to help you measure performance from within the WordPress dashboard.

And yes, there is a Pingdom extension in the form of a bookmarklet.

3.2) Website performance metrics

Website performance metrics are used to measure the load time of web pages. They are usually reported as the average number of seconds it takes for a page to render.

Core Web Vitals

The most important website performance metrics, according to Google, are what they call the Core Web Vitals. These web vitals will evolve over time but, as of this writing, these are the targets to focus on:

• LCP (Long Contentful Paint)
• FID (First Input Delay)
• CLS (Cumulative Layout Shift)

LCP (Long Contentful Paint)

LCP is a content performance metric that assesses the perceivable loading experience for users.

In its simplest form, LCP determines how long it takes for the largest “content element” on your page (like a hero image, headline text, and so on) to become displayed within a visitor’s viewport.

FID (First Input Delay)

First input delay (FID) is the measure of time between when a user initiates an input (hovering over a website link, clicking on an element, or typing in text) and when the website responds to that input.

As a website becomes more interactive, FID becomes one of the most critical website performance metrics because it affects how fast visitors can complete tasks like “purchase” or “sign up.”

CLS (Cumulative Layout Shift)

CLS gauges a website’s visual stability during a page load. To put it another way, CLS measures the unexpected moving of web components while the page is being generated.

The aggregate score of all the layout changes on your site is then quantified as a whole. Google Web Vitals includes CLS as “page stability.”

Other Web Vitals

Aside from the Core Web Vitals, there are a few more website speed test metrics you’ll want to optimize for.

While not technically included in the “core”, these secondary web vitals will definitely impact the core web vitals.

TTFB (Time to First Byte)

TTFB stands for time to first byte. It is the time between pressing enter on your keyboard and getting the first piece of page data.

TTFB is particularly important on mobile devices with a low quality internet connection.

FCP (First Contentful Paint)

The FCP metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

TBT (Total Blocking Time)

TBT is the total time that it takes for a website to respond to a visitor’s input. More specifically, TBT measures the amount of time spent being blocked by specific scripts and code.

Full page load time

Load time is the average number of seconds it takes for a given page to render completely.

This can be anywhere from 1-2 seconds for fast websites to as much as 15-20 seconds for slow websites.

If your website is even slower than that, then you don’t really have a website. You have a digital parking space with your name on it.

3.3) Website user experience metrics

There are a number of metrics you can use to measure your website’s user experience. The most important metrics are bounce rate, time on page and conversion rate.

These should not be confused with content performance metrics like TTFB, LCP and CLS. Those metrics show how long it takes for content to load. User experience metrics measure how long an individual piece of content is engaged with during a given time frame.

Bounce rate

Website bounce rate is the percentage of visitors who leave your site after viewing just one page. It’s calculated by dividing the number of single-page visits by the total number of visits to your website.

For instance, if you have 1,000 total visits and 800 of them are single-page visits that means that you have an 80% bounce rate.

And your average page speed has a major affect on website bounce rate.

One important thing to note about website bounce rates is that, while they can be helpful for Google Analytics, they don’t tell the full story for measuring user engagement because they don’t quantify engagement with individual pages or sessions.

Session duration

Session duration is the length of time a user spends on a particular session.

This metric can be used to find out how productively visitors are spending their time on your site, as well as how effectively they’re interacting with it.

If the “time on page” metric for each visitor is too short, it could mean that you need to create a more compelling website. This is because shorter visits might indicate that your visitors were unable to find what they were looking for and quickly left.

The average time someone spends on a web page varies depending on the type of content. But research shows that the average is dropping across the internet.

If your session durations are below average or people are bouncing too much, then you need to investigate further and find out why.

Conversion rate

A conversion is the successful completion of an action you want your website visitors to take, such as purchasing something or signing up for your email list.

If you’re not getting conversions it’s most likely because people are bouncing too much. 🦘

You can improve conversion rate by increasing page speed, reducing the number of steps it takes to complete a desired action, improving your website’s clarity and more.

4) How to improve your website’s performance

This is the only guide you’ll ever need to speed up your website. (I think. Hopefully…)

4.1) Reduce the size of your page by getting rid of “code bloat”

There are many reasons why you should reduce the size of your web page:

• Reduce website load time
• Increase website performance
• Maximize website engagement
• Improve the user experience
• Trim code bloat

Code bloat is a term used to describe the amount of code that’s needed to make a website work. Simplifying your code can help reduce load time and also make it easier for you to maintain your site.

Code bloat can be very damaging because it takes up more space, slows down your website, and can even cause bugs or security vulnerabilities.

Picture yourself driving to work in the morning. Now imagine all of the different roads you can take to get there.

They all take you from and to the same place. From home to work. But which roads you choose dictates how long it will take you to get there.

Picture this illustration every time someone tries to visit your website.

There are many ways that web developers can reduce code bloat:

• Use images wisely
• Host videos externally
• Delete comments
• Reduce HTTP requests
• Don’t use external web fonts
• Delete unnecessary plugins

Let’s look at how to do each of these one by one.

Use images wisely

There is no exact number of images that you should aim to include on your pages and posts. Each time you upload an image, ask yourself one simple question:

If you can’t answer that question, don’t use the image.

Host videos externally

Videos can take up a lot of space and often there’s no guarantee that the person watching your video will have the bandwidth to stream it.

Instead of hosting videos directly on your website, which will be using your web host’s server storage and bandwidth, it’s almost always better to host it externally and embed it into the page.

Upload your video to YouTube or Vimeo and place the HTML embed code on your page. All major website builders make it easy to do this.

Delete comments

Comments are a very useful way of fostering healthy discussion on the inter- LOL JK they’re more toxic than wrapping your lips around a car exhaust pipe and taking a deep breath.

While comments have been shown to provide some SEO benefit, (I’ve even seen it myself with my cancel Netflix post), it’s not usually worth the loss in web page speed.

As can be seen in the story of MightyBytes, allowing comments on your blog posts does slow down website loading times.

And the more comments there are, the worse it gets.

I can personally attest to removing website comments to improve page speed. Unfortunately, I didn’t do a comparison of the data when I made the switch… So it will have to remain anecdotal.

The bottom line is this: Comments slow down page loading times. They generate additional database calls which can result in an increase of up to 50% in server load time.

It’s generally best to just remove commenting from your blogs and move on.

Reduce the amount of HTTP requests

HTTP requests will make your site load slower.

Unnecessary integrations are the most common source of too many HTTP requests.

They can be defined as unnecessary because they take up more space on the page and slow down loading times while providing very little value to the user.

The worst offenders are built-in integrations which come with some themes or plugins. These integrations work well for people who want them, but they can’t be turned off or deleted if you don’t want them AND these integrations take up loads of space and slow down page load times.

Here’s what it looks like when a website has too many HTTP requests:

Just from a quick glance at the urls from each request, we can see HTTP requests from:

• Google Analytics
• Google Maps
• Google Fonts
• Facebook
• Hotjar
• Tawk
• Twik
• Hey Oliver
• Liveleads
• Yandex
• Polyfill
• Visual Website Optimizer
• X.AI
• YourWebsite

YIKES. 🤮

It’s no wonder that this web page takes 9.6 seconds to load.

And the worst part is, these are nearly all unnecessary marketing gimmicks that actually make the website’s user experience worse.

Don’t use external web fonts

One of the top offenders in dragging website loading speeds is web fonts.

Companies like Adobe, Google and Typekit host thousands of fonts for the web. Website builders integrate their APIs to include these fonts in a super-simple drop-down of choices. Like one of my favorite page builder plugins, Elementor.

Web fonts will increase the number of HTTP requests that your website makes because it has to load several different files from external sources just to display text.

This can be a huge drag on page load times. It’s also really frustrating for people who are trying to read your site.

To make matters worse, many web fonts are only available in specific formats like .eot or .ttf which not everyone can access.

The thing is… fonts are cool. And there’s nothing wrong with wanting to make your brand feel unique and stand out from the crowd.

So, what should you do?

If you’re already speeding up your website by using many of the strategies mentioned here, you likely can afford to have a little bit of fun with some fonts.

But if you’re obsessed with ludicrously fast loading times, like I am, then simply use some of the common system fonts in your design. System fonts are the fonts that come preinstalled on your device.

Sure, they’re not as pretty. But the boost in user experience far makes up for that, IMO. I’ve used them right here in my own website!

Delete unnecessary plugins

It’s best to keep plugins to a minimum.

Only install plugins that are absolutely necessary to your site’s functionality, and don’t detract from your site’s user experience.

Unfortunately, lazy web designers will often install a plugin to solve every little problem that comes their way. Even when much of the functionality that is provided by a plugin can be accomplished using simple HTML and CSS.

In one of my crazier web design case studies, I rebuilt a website that had over 32 plugins clogging up their website and reduced it down to 12.

Here’s the before and after of their website redesign:

The result was a much faster website that loaded like a dream. The client couldn’t be happier. (Oh yah, I also did it for less money 😉)

4.2) Optimize your images

Images that are not optimized can be extremely troublesome for website performance. Here are some quick tips to optimize images for your website:

Choose the best image format

Which image format is best for your website performance depends on what you’re using the image for.

• JPEG is best for photos with large amounts of color and high contrast. JPEG reduces the file size but introduces some data loss.
• PNG is best for images that are drawn or text, as it does not introduce compression on drawn objects.
• GIF is good for short animated sequences because the file format only supports 256 colors.
• WEBP is an up and coming format, and you’ll start to see it more often, but it’s not quite mainstream yet. I wouldn’t worry about it for now.
• SVG is your best option for vector graphics and icons if you’re an advanced designer. It scales up and down without losing sharpness and quality, and the file size is much small than PNGs.

Set the correct image dimensions

Finding high quality free images for your website can be a major pain.

That’s why a lot of new web designers and bloggers make the mistake of downloading images at their largest size and then uploading it to their site without doing any image optimization.

But there’s still one more critical step you must take before that image is ready to be uploaded to your site.

Compress every image

It is important that images are compressed before they are uploaded to your website.

This is the easiest and simplest way to speed up your website’s loading speed.

You know all of those fancy, beautiful free stock photos that we just talked about? They’re massive.

There are a number of ways your can compress and optimize your images, but here’s the simple method I use:

Using Photoshop to reduce the size of images

Depending on the version of Photoshop you are using, this might look a bit different. I am subscribed to the Creative Cloud version of Photoshop for $10/month, so it is constantly updated for free.

Let’s assume we’ve already resized the dimensions of the image. Now it’s time to compress the size.

Go to File > Export > Save for Web

Again, the flow of this might be a bit different for your version of Photoshop. But it should be in the same general area.

Choose your image compression options

Now, choose your options.

The majority of your pics can be saved in the JPEG LOW format. If you need to have a transparent background, then make sure to select PNG-8.

Quality is set on a scale of 1-100. I usually never go above 5-10. You’ll notice that 90% of the quality is preserved anyway. And it’s worth losing that 10% for the drastic savings in file size.

Then, click Save.

Name your new image and click Save

Keep it simple and relevant so it will be easy to search for later.

Bask in the glory of your results!

Do you see that??

The original image clocked in at a whopping 3.8 MB.

The new, compressed and totally optimized version? 60 KB!

THAT my friend, is how it’s done.

Like I said, compressing your images is the #1 way to quickly speed up the performance of your website.

4.3) Use caching

Caching allows a website to retrieve resources from a local cache so that it doesn’t have to use up resources from its server.

Caching is beneficial because it allows the browser or device to use content that has already been stored rather than loading it fresh every time.

This speeds up page loading time considerably for users accessing your site. It also reduces the strain on your bandwidth, which will allow your site to host more visitors without risking congestion.

One of the most powerful ways you can optimize website loading speeds is by utilizing caching. There are many different types of caching available depending on what your needs are.

HTTP caching

HTTP caching allows you to minimize the number of requests a user’s browser makes to your server by using HTTP headers to cache resources sent from the server.

This is generally seen as one of the most powerful ways to optimize your website performance because it can reduce bandwidth usage by up to 80%.

Page caching

Page caching is another type of caching, where only specific resources are cached instead of all resources.

By caching the HTML of a web page, visitors can load that page without connecting to your server and downloading all of the components on your website for that page again.

Browser caching

Browser caching refers to the caching that occurs in the user’s browser.

This allows resources like images, video files and CSS/Javascript to be cached on the local hard drive so that when users return to your website, they’re able to load pages faster.

Server caching

Server caching is a type of caching that occurs on the server where your website is hosted.

This will serve static files to your visitors so they are able to load your website faster.

4.4) Eliminate or defer render-blocking CSS and Javascript

If your website is not very large, deferring the loading of CSS and JavaScript can be a very effective way to optimize performance.

Deferring scripts basically means rearranging the order in which the scripts are loaded on a web page.

Often times this can easily be accomplished by placing scripts in the footer of your site.

Scripts that are deferred will only load if required, which reduces the initial page weight required for loading.

You can also use a plugin to defer scripts. This allows you to load scripts when necessary without delaying the load time for other aspects of your website.

How to find and eliminate render-blocking CSS and Javascript

Navigate to the “Structure” tab in your GT Metrix report and click on “Reduce unused Javascript”

This will show you what Javascript files GT Metrix believes are either unnecessary or can be deferred to load later.

Remove or defer each file one at a time, then test your website

If you’re using WordPress, this process is a lot easier. You can use a popular cache plugin like WP Rocket or Hummingbird to defer Javascript files.

If you’re not using WordPress, things can get messy real quick. There are a number of ways to defer Javascript but they will all involve coding. This is for advanced developers only.

If you don’t want to get involved in that stuff, I highly recommend you simply delete as many of the offending plugins and scripts that are using this Javascript. So much simpler.

4.5) Choose a server closer to your visitors

Choosing a server close to the geographical location of the visitor is important for website performance.

The closer your web server is to your visitors, the faster data can be delivered to them.

It’s also critical for local SEO, as Google will prioritize websites with better user experiences. And loading speed = better UX.

The only real way to know where a server is located is by asking the web host before you sign up with them. There are other methods, but they’re far more advanced. I don’t even know how to do them.

If you choose dedicated hosting with a company like Cloudways, you’ll be able to pick between a number of cloud hosting providers who offer servers all around the world.

Use a CDN for international visitors

A content delivery network, or CDN, is a geographically distributed group of servers that work together to provide faster delivery of website content.

Most website hosting providers will offer a CDN as part of their website package. Using a CDN will allow website pages to be served from the closest possible data center to the visitor rather than from your website’s server.

This can reduce load times for website visitors by up to 50% and reduces bandwidth costs. Each website visitor will only need to download the files they need from the server that’s closest to them.

Most CDNs are premium services with a wide variety of costs. Cloudflare does offer a free version of their CDN service, but it’s mainly limited to security benefits.

If you have a lot of international visitors, particularly if you have a multilingual website, a CDN will help your website content load faster for them. This can increase the amount of traffic you receive from overseas.

A CDN will also remove the stress on your own servers by hosting content on servers internationally. This means that your server will have less work to do and be less likely to fail because of overuse.

4.6) Avoid 301 redirect chains

Redirect Chains are caused when a 301 redirect sends a visitor from one page to another page on your site, and then another… and another.

Redirecting more than once will cause unnecessary delays in page loading.

The simplest way to avoid this problem is to keep 301 redirects to a minimum. When you do use them, make sure they only redirect once.

4.7) Choose a fast content management system

A Content Management System is an application that lets you manage your content. The CMS might be as simple as a text editor, or as complex as a platform like WordPress with custom widgets and plugins.

A more common, and simpler, term for CMS in the context of web design is website builder.

So, it matters what website builder you use.

Why? Because not all website builders are created equal when it comes to website performance.

Yet another reason to love Weebly!

And even more reasons to avoid Wix like the plague…

If you’re using WordPress, make sure you choose a page builder plugin that is as lightweight as possible.

Fortunately, most of the major page builder plugins have invested massively in performance upgrades. There isn’t much of a discernible difference between them at this point.

4.8) Get better website hosting

If you’re not getting the speed that your website needs to be functioning properly, it might be time to upgrade your website hosting.

Great web hosting isn’t expensive. It’s well worth the investment if the high speed of your site converts more visitors into customers.

A fast site means a higher ranking on Google search. It also means better support for more devices and browsers.

I see far too many small business owners cheap out on website hosting and suffer the consequences.

Take your time and do your research to choose web hosting that’s right for you.

5) Conclusion: Improve your website speed ASAP!

Website performance is a critical part of your website’s user experience.

Website loading speed can impact the success or failure of an online business, so it pays to take care in how you manage your site resources.

In this website performance guide we reviewed some tips for making sure that your site loads as fast as possible while keeping users happy at all times.

We’ve highlighted the most important considerations that you should make in order to optimize your site for speed, along with some tips on how you can improve loading time without sacrificing content or usability.

Give these suggestions a try and let me know how it goes!