5 Design Tips to Speed Up Your Site

One of the best things you can do to improve your website’s performance is speed up your site.

Online users may have been tolerant of slow loading pages in the past. But things are different today as consumers expect fast browsing experiences.

Optimizing site speed needs to be a priority if it isn’t already. Otherwise, you risk leaving visitors with a negative impression of your business.

If you want to speed up your website and improve performance, you’re in the right place. Keep reading for tips that you can implement to deliver faster experiences to your visitors.

First, let’s take a look at why website speed matters.

Why website speed is important

Picture this: You’re searching for information online and you click through to what seems like a promising result. After a few seconds, the webpage still isn’t loading.

What would you do in this case?

Chances are you’ll simply click the back button and click through another result. You might even make a mental note to never visit that website again.

The example above illustrates the importance of website speed.

Nothing is more frustrating than staring at a blank webpage. Online users simply don’t have the patience to wait around as there’s no telling how long it will take for the page to load.

Here are more reasons why you shouldn’t overlook web performance.

Site speed affects rankings

Google discovered that users spend less time on sites that respond slowly. Their internal data have also found that users place a high priority on web performance.

So, Google made site speed a ranking factor for both desktop and mobile searches. All factors being equal, a site with fast loading times will outrank slow webpages.

Of course, other factors like relevance and backlinks still carry a ton of weight. But you’re not exactly doing your website or visitors any favors by having a slow website.

Loading times increase bounce rates

Bounce rates are the percentage of visitors who visit your website, but leave without interacting with other pages. High bounce rates aren’t always a bad thing — a visitor may simply be checking business hours and clicking away.

But a high percentage is still worth paying attention to. It could indicate that users aren’t finding your content relevant or because the page isn’t loading.

Google has found a correlation between bounce rates and loading times:

If your loading times are between 1 to 3 seconds, the probability of users bouncing is 32%. But if that goes up to 10 seconds, then the probability of them bouncing increases to 123%.

If visitors are bouncing at a high rate, they’re not staying on your page long enough to learn about your products or services. That brings us to the last and final point.

Poor web performance leads to fewer sales

Slow loading pages have a direct impact on conversions. When asked what people would do if they encountered a slow ecommerce site, 45.4% said they would be less likely to make a purchase.

Web performance affects rankings, bounce rates, and conversions.

One way to increase site speed is with a content delivery network or CDN — a network of servers that host your website. This reduces server load and improves loading times. Depending on the size and needs of an organization, edge computing is another option.

There are other ways to improve web performance, which we’ll cover later in this article. But there’s one thing you should do first before anything else.

Establish a website speed baseline

Establishing a baseline is the first step to improving web performance — it allows you to track and measure any changes you make to your site.

Head over to PageSpeed Insights, a free tool from Google that analyzes a website and provides suggestions on making it faster. The tool also measures both the mobile and desktop versions of your website.

Enter your URL and click the Analyze button.

Run your website through the PageSpeed Insights tool and jot down the Field Data and Lab Data for both the mobile and desktop version of your site. This will allow you to track and measure changes that you make.

Now that you’ve established a baseline, let’s dive into how you can speed up your website and provide a faster experience for your visitors.

#1. Compress your images

Images are a great way to enhance your website and provide visitors with context of your products or services. They also improve readability by breaking up blocks of text.

But one of the biggest problems with images is their file sizes. Images that are poorly optimized are serious bandwidth hogs. While high resolution images may look great, some visitors may not even be able to see them if their connection is too slow.

Use photo editing software like Adobe Photoshop to decrease your image file sizes before you upload them. Ideally, your images should be 100 KB or less.

Be sure to also use smaller formats like JPG as you can compress their file sizes without compromising the image quality too much.

Here’s a comparison of a JPG and a PNG image:

Honestly, it’s hard to tell the difference between the two. But here we see that the JPG image is 60.3 KB and the PNG image is 377 KB.

If you’re using WordPress, you can make things much easier for yourself by installing an image compression plugin to automatically compress your images.

#2. Embed your videos

Videos are another type of media that can make your website more engaging. Instead of scrolling through text, visitors can watch a short video to learn more about your products or services.

But videos are significantly larger in file size compared to images, which means they’ll take up your bandwidth when visitors load them.

Does that mean you should ditch them altogether? Not exactly.

While you could self-host videos on your server, a better and faster option would be to embed a video from YouTube. Embedded videos are streamed directly from their servers.

Here’s an example of how this medical alert system provider embeds a video on their homepage:

Visitors can simply click the play button to watch the video and they won’t know that it’s streaming from a different server.

Follow these steps to embed a YouTube video in HTML:

  1. Upload a video to YouTube
  2. Grab the 11-character video ID (the part at the end of the URL after the last slash)
  3. Define an <iframe> element on your web page
  4. Add the YouTube URL with the ID to the “src” attribute
  5. Specify the “width” and “height” attributes

Here’s what that looks like:

<iframe width="420" height="315"
    src="https://www.youtube.com/embed/video-ID-here">
</iframe>

Then simply paste that code into the HTML of your website. Note that you can also add more parameters to your video like autoplay, loop, and controls. Be sure to test the video embed before you make the changes live.

#3. Stabilize your page layout

Have you ever visited a website and everything suddenly shifted? Or just when you were about to click on a link, you end up clicking on something else?

That’s an example of a layout shift.

While not directly related to page speed, another metric that’s worth paying attention to is Cumulative Layout Shift (CLS) — a metric that measures unexpected shifts on a page.

Layout shifts have a negative impact on overall user experience. In some cases, it can result in visitors accidentally clicking an ad.

The most common causes of CLS include:

  • Dimensionless images
  • Ads, embeds, and iframes
  • Dynamic content (e.g., signup forms)

To provide a good user experience, your website should have a CLS score of 0.1 or less. This indicates that your layout is more stable and less susceptible to shifting.

Reply’s LinkedIn email finder’s page does really well on this front with a cumulative layout shift of 0:

They’ve achieved a CLS score of 0 which means that visitors won’t experience any shifts as they browse the page.

There are a number of things you can do to stabilize your layout. The first is to pay particular attention to any embeds and iframes on your website. A common issue is these elements not having the accurate dimension.

If you’re using embeds like YouTube videos or Google Maps, determine what the exact dimensions are using Chrome Developer Tools and create a placeholder. Then style the placeholder with the correct dimensions to stabilize the layout.

Ads are another common cause of layout shifts. Of course, you could reduce the number of ads you have on your website or even remove them entirely. But if that’s not an option, you could pre-allocate space on your site for the ad and design around it.

Finally, address dynamic content like newsletters by placing them below any existing content or reserving space for them.

#4. Compress your website files

Making your site files smaller allows them to load even faster.

You can achieve this by compressing your site with Gzip — a data compression program that compresses and decompresses content over the Internet. With Gzip, you can significantly reduce your JavaScript, CSS, and HTML files.

You can take this a step further by minifying your code. This means removing bloat from your code like whitespace and unnecessary characters.

Here’s an example that illustrates how much you can reduce file sizes by:

Smaller site files means that they’ll load much faster for your visitors.

#5. Get website feedback

As you improve loading times, don’t overlook the overall user experience (UX). After all, what good is a fast website if users have trouble navigating your pages or finding what they’re looking for?

Good UX leaves visitors with a positive impression of your brand. Get this right and you can turn more visitors into customers. But get it wrong and your visitors will likely bounce and click through to another result instead.

So how can you improve the UX of your site?

The best way is with a website feedback tool. Instead of wondering what visitors think about your website, you can collect their feedback directly. They can capture video and provide feedback as they navigate your website.

The feedback you receive from actual users allows you to identify areas of improvement. This enables you to make better decisions around design.

Conclusion

Online users today place a considerable amount of value on fast websites.

To engage more of your visitors and get them to stay on your pages, improving web performance needs to be more of a priority. Even a delay of a few seconds is enough to cause users to bounce.

Follow the tips as described here to boost your website speed. This includes optimizing your images, embedding your videos, stabilizing your page layout, compressing your site files, and using a feedback tool to understand your visitors better.

Try Userback for free for insights on how customers see your website. Using this tool will help you design a better website for your audience.

Guest Author Byline

Dustin Howes owns an affiliate marketing agency that is dedicated to helping companies maximize their affiliate marketing efforts. Through group coaching and private consulting, Dustin teaches program managers how to recruit the right affiliates, optimize working hours, and how to take the growth of the program to the next level. Learn more affiliate marketing tips at dustinhowes.com.

Try it!

Contact Us

Thank you!
We will get back to you as soon as possible
at .