The next five trains are cancelled and you’re looking for an alternative route. You urgently need to reach your child while they’re at school and you can’t remember the number. Some idiot has dented your car and you need to make an insurance claim. It’s really frustrating when a web page doesn’t load quickly, isn’t it?
It’s not so bad when it’s Netflix, Amazon or your online banking service. We might get irritated at slow page-loading times, but we’ll usually wait because we can’t—or don’t want to—go elsewhere. But, how many times have you clicked on a link and got distracted by a different tab, or your phone, or the TV, while waiting for a web page to load? And, how often do you open up several links at once and just go to whichever one loads the fastest?
People want to be able to find answers to their questions as fast as possible — studies show that people really care about the speed of a page.Using page speed in mobile search ranking, Google
Milliseconds earn millions
Users are impatient. Last year, Google did a study into mobile page speed and found that 53% of mobile site visitors leave a page that takes longer than three seconds to load. It doesn’t matter how beautiful your site is or how great your content – with every extra second it takes, you lose more people to a competitor’s faster site. Your website’s speed matters when it comes to conversions.
Your website’s performance is also crucial for attracting new users. Google has been using page speed in their search ranking algorithm for a while, but last year they announced that they’ve started using the mobile page speed of a site, rather than its desktop page speed, as the ranking factor. So if you care about your website’s SEO, you can’t ignore its performance.
BMW’s website used to be an elegant digital showroom; a beautiful portfolio of their range of vehicles in stunning high definition. It was a well-presented look-book for car enthusiasts and yet, for a brand synonymous with speed and performance, their website was incredibly slow. So when they decided to rebuild it, their primary focus was on page speed. And the result? Higher conversion rates and a much-improved search ranking.
The new mobile site loads 3X faster. The proportion of people clicking from BMW.com to a BMW sales site soared from 8% to 30%. The number of our mobile users has risen by 27%. And SEO now generates 49% more site visits than the old site.Tracking BMW’s road to a faster mobile experience, Jörg Poggenpohl
0 to 60 in 2.5 seconds
It’s not just important to have a fast website. It needs to feel fast as well. But unless your site is really basic, the browser is going to need time to grab your content from the server. If you have a website with lots of content, it’s going to take more than 3 seconds to render a page if you load it all at once.
But the user isn’t usually looking at the whole page at once. They’re not going to know if we haven’t finished rendering the sections that aren’t currently visible on their screen. This means we can be smart in how we prioritise which content to load first. And we’ve got a whopping 3 seconds to load all the visible parts, which is more than enough time, but we do it in 2.5 or less.
Here are just three of the ways we’re making the web faster, one site at a time.
1. We got lazy
Images are among the largest assets on your website, so we don’t want to load images that are bigger than they need to be. And we don’t want to load them at all if they’re not going to be seen. Using two techniques—lazy sizes and lazy loading—we ensure the browser only gets the images it needs, at the sizes it needs them. So no more serving 3000px wide images to 320px wide phones, or loading every single image on a page, even if the user never actually scrolls down to see them.
Instead, we detect their screen size and give their browser an image that’s just the right size. We also don’t load images at all unless they’re at the top of the page or the user starts scrolling towards them.
2. We learned to read minds
If we’re only loading the parts of a website that are currently visible to the user, what happens when they click through to a different page?
We knew you’d ask that.
Using machine-learning and Google Analytics, or just by looking at where a user’s cursor is, we can predict the next page a user is likely to visit. Then we prefetch that page so it’s ready by the time the user gets there. This improves their perception of your site’s page load performance, which means they’re less likely to get fed up and leave.
3. We changed the way we Vue things
If you’ve ever visited the Netflix, LinkedIn or Facebook websites, you’ve used a single-page application (SPA). The purpose of an SPA is to offer the user an experience that feels like a desktop app. This means that when a user visits different pages on your website, they aren’t loading new pages. We’re just swapping the content of the page they’re already on.
Let’s look at an example.
This blog is not an SPA. If you click on a link to another page of our site, you’ll see that the new page, and everything on it, has to load again. The icon in the tab at the top of your browser will turn into a loading icon while the page loads. And you might experience an entirely blank page for a moment. It’s not so painful if you’ve got a fast internet connection, but if you’re on 3G, and you get distracted during the wait, we might lose you completely.
But if you look at our main website, you’ll notice the experience is completely different. Click on Projects then through to a case study, and you’ll see that the content changes but the page never reloads. Isn’t that a much smoother experience?
Building SPAs isn’t new for us, but we’ve recently changed the technology we’re using to do it. It’s called Vue*, and it helps us build lightning-fast SPAs without any extra developer time. That’s cheaper for you, and a better experience for your users.
* If you’re in the tech industry, you might be wondering why we didn’t pick the Facebook-owned React, which is probably the best-known tool for building single-page applications. I could probably write a whole other blog post about the topic, but essentially it comes down to this: Vue is lighter, and I don’t like Facebook.
Slow websites lose users. If your website isn’t loading in under 2.5 seconds, it’s having a negative affect on your company. It might be the loss of a sale or an increase in customer emails and calls because it’s quicker to contact you than trying to find your FAQ page. And, the slower your website, the lower your organic Google search ranking.
If you’re not sure how fast your website is, Google offers some really great tools to check. If you’re concerned that you’re losing users and you want to find out how we can improve your site’s speed, we’d love to hear from you.