donuts
Skip Navigation

A Primer on Site Speed and Performance Overview Site speed (performance) should be treated as reverently as the content, design, functionality, and SEO considerations of the website.

Get the latest web news, tips & tricks in your inbox. We promise never to spam you or sell your email address.

Posted by Aztek Admin on - Read

A Primer on Site Speed and Performance

Overview

Site speed (performance) should be treated as reverently as the content, design, functionality, and SEO considerations of the website. Everybody wants their site to load fast, but often lose sight of this during the site's development when big images or video, features, and functionality seem to drive most decisions at the expense of page speed. When this happens, the end result is a slow-loading site that turns users away before they even see those features.

Instead, clients and agencies should agree on a performance budget (a size/time limit in which they believe the site should load within) to make decisions about what features and assets should be cut or included.

Key Lessons

Page speed affects SEO

Google has flat out said that page speed is a signal in their ranking algorithm. Why? Because Google knows that users are impatient, so if all other factors between two ranked sites were equal, the faster loading experience should win.

https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

Page speed affects UX and therefore sales/conversions

An extension of Google's logic (above), the faster a page loads, the more likely a user is to interact with it. In fact, speed is probably more important than design. The cliche' "wow-factor" design often sought by clients may come at the expense of speed.

Consider the evidence:

Users exposed to a 200 ms delay since the beginning of the experiment did 0.22% fewer searches during the first three weeks, but 0.36% fewer searches during the second three weeks. Similarly, users exposed to a 400 ms delay since the beginning of the experiment did 0.44% fewer searches during the first three weeks, but 0.76% fewer searches during the second three weeks. Even if the page returns to the faster state, users who saw the longer delay take time to return to their previous usage level.

Page views drop off as page load times increase.

A corresponding increase in page load times from 400 milliseconds to 900 milliseconds. This resulted in a 25% dropoff in first result page searches. Whereas, a 5 second speed up (from ~7 seconds to ~2 seconds). This resulted in a 25% increase in page views, a 7-12% increase in revenue, and a 50% reduction in hardware. Google has calculated that by slowing its search results by just four tenths of a second they could lose 8 million searches per day.

A slow page costs your users real money

Another often overlooked aspect is the cost to users. Despite the perception that everyone has an unlimited data plan, the reality is much different. Most mobile plans still have caps and limits. Every time a user requests your unnecessarily bloated website, you are costing them a chunk of their monthly data allowance. If you want to see how much, try this website: https://whatdoesmysitecost.com/

You can 'trick' your site into feeling faster than it actually is.

There are techniques to make a page feel faster than it actually is. By optimizing the part of the screen that the user sees first, you can defer loading other assets until they are ready to be seen. But this is not an excuse to have a bloated, overweight page! Just like exercise, going jogging in the morning doesn't mean you can gorge yourself on pizza and soda at night.

  • Optimize Start Render Time - The time it takes for users to start seeing the page render visually. It is possible to make sure that the elements the user will see first (before scrolling) load first and they don't just see an empty page.
  • Lazy load all the things! - A technique to defer loading of page assets until the user scrolls to the point of the page where they will actually see them. If they never scroll, they are never loaded.
  • Progressive images - The image starts a low-quality, blurry version and gets clearer as image loads fully. But it holds the place of the layout, and the user sees there is something happening; which helps reduce abandonment rates.

Set a performance budget (and stick to it)

Clients should work with their web design agency to establish a performance budget. How fast should the site load? Five seconds? Four? Three? Two? This gives everyone a good starting point. For what it's worth, Forrester Consulting found that users expect your site to load in under two seconds. That may not be possible, but it's something you should be aware of.

What number should I use for my website performance goals?

20%. That's the number it takes for your users to notice a difference. You site needs to be 20% faster than it was before. Or, pick a time in which you want your site to load. Let's start with 2 seconds. That gives us this hypothetical breakdown:

  • HTML 5% 5k
  • CSS 15% 60kb
  • FONTS 15% 60kb
  • JAVASCRIPT 15% 60kb
  • IMAGES/VIDEO 50% 250kb

In the future, as you want to add things to your site and pages, you should keep that performance budget in in front of you as ask if the new feature fits within the budget. If not, can something else be removed to make room?

Issues Impacting Site Load Speed

Images - Does this GIF make me look fat?

Once you take over management of your CMS, continue to optimize images! If you're in charge of managing the content of your website, you're going to have to educate yourself on how to use it. That includes understanding some basics about the use of graphics and images on the Web. And since we're talking specifically about performance today, we're worried about image size and quality.

TL;DR: You need to keep image sizes in check or your site is going to balloon up and load slowly in no time. If you don't want to worry about this, ask you web developer to implement a Content Delivery Network (CDN) like Cloudinary that will serve automatically optimized images on your site with you having to do anything.

Plugins and Third-party add-ons add up

Chat with one of our representatives now! Signup for our newsletter! Share this page on social media! You know exactly what I'm talking about. These features seem to be on every site you visit. And they add tons of weight to a page. And the truth is, most users hate them, or at the very least ignore them. So consider their impact on your speed (and users) before adding them to your site.

Fonts. Cool it on the weights and variations.

As a designer, I was really excited when webfonts finally came of age (I've be doing this since back when you have to choose from Arial, Verdana, and Times New Roman). And brands can be picky about the typefaces they have to use for their identities. But it's easy to get carried away and load up so many fonts that your page speed suffers. Remember, even if you only use one "font", every weight and variation counts against your total performance budget. So ask yourself do you really need to use five different weights, each with a regular, bold, and italic variation?

Too many requests? Try bundling and using sprites, or maybe HTTP2

Each time your webpage needs to load an asset (a stylesheet, a piece of JavaScript, an image, etc.) it has to ask a server to get it. And in regular ol' HTTP, it can only ask for one thing at a time. So if your page is asking for a lot of things, you have just created a long waiting line of things your users can see until each request has fired. The solution? Make less requests by using a technique called bundling (basically combines all your css and/or JavaScript files into one so the page can make fewer requests). Sprites, a similar concept but for images. Or if possible, HTTP2; which allows the page and server to make/serve simultaneous requests.

Server limitations. Your bargain hosting is costing you more than you think

You may actually just have a lousy webhost who put you on an old, under-powered shared machine with lots of other sites (all competing for server resources). The solution here is easy, upgrade your hosting, but be prepared to pay more for premium.

Page Speed Tool Results. They're yelling at me for external resources I don't control!

One frustrating aspect of page speed analysis tools is they will give you a lower "score" for external resources (such as tracking scripts) that you don't control. On one hand, this seems unfair because you don't control that asset (you're just calling it from their server), on the other, it probably is contributing to your site performance so they have to make you aware of it. If you absolutely have to keep a third-party script, just factor it into your performance budget and you can still have a fast site experience for users.

Next Steps:

The speed of your website matters to your users and translates to real money for both you and them. If you think you need help imp riving the performance of your site, contact your web developer right away.

Further Reading

Resources

References

Search this site