Slow sites frustrate consumers. Frustration costs money. To delight consumers, beat competitors, and to please Google, your site will need to load in under a second. And you’ll need to get there fast, otherwise, your competitors might beat you to the finish line. Sound impossible? Web performance is no longer an art, but a science. Alderson shared the top tips, tricks, tools, and tactics you need to speed up your website. Here’s a recap of the presentation. Users expect fast – a fast website, a fast app, a fast digital experience. The relationship between web performance and user behavior is backed by plenty of research.
- A research by Google found that delays of over 3 seconds can lead to over 50% abandonment.
- In 2014, a study revealed that 47% of people expect a site to load in less than 2 seconds.
- Radware discovered that 20% of users abandon their cart if the transaction process is too slow.
Google’s Take on Site SpeedNow the world is changing primarily because Google, as a powerhouse of influence and authority, has become very interested in speed – and for a whole bunch of different reasons. In early 2018, Google announced how important they consider speed to be and that it’s officially going to be a ranking factor for mobile searches starting July of that year. The search engine’s advice?
“We encourage developers to think broadly about how performance affects a user’s experience of their page and to consider a variety of user experience metrics.”What Google is essentially saying here is that speed underpins user experience. When you are browsing , trying to get your page or channel to load, or add a product to a shopping cart, how quickly that happens is a huge component of the overall UX. For Google, speed = efficiency. And as sites get faster, slow is going to feel slower. Consumers expectations’ will increase and the fastest, best experiences they have will become their expectation for the norm. So, what do we need to do?
Approaching Speed OptimizationThe secret isn’t to do a big web (re)development project. In speed optimization, you’ll win by a thousand tweaks – now, and every day, forever. You’ll need to find the important bits and make them faster. At the heart of speed optimization, you need to understand two fundamental truths:
- There’s no such thing as speed.
- The only thing which matters is perception of speed.
There’s No Such Thing as SpeedWhen you start exploring this, it becomes very difficult to answer the question, “How do you measure speed?” How do you put a metric against how fast your website is? You could probably start off by saying “The time how long it takes for a page to finish loading.” But, what does that mean? What if the server responds quickly, but then it takes ages to show the content? What if the page has components which only load when you interact, or scroll? Are they “finished”? We need better definitions to understand how well we are doing. Most stock metrics from speed check and optimization tools are flawed and designed to give you a false sense of comfort. Until recently, Google’s PageSpeed Insights tool was equally nonsense. The score didn’t actually measure speed and the charts were bad because measuring against slow competitors makes you complacent. When Google updated the tool, it added the metric First Contentful Paint which:
“…reports the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.”In other words, how quickly can we show something interesting? How many milliseconds until we can put something on screen that looks like it’s doing something rather than having a blank white page with just a spinner or loading icon? How quickly can we make it look like it’s happening? For many people that will be a hero image at the top of the page, a logo or the navigation bar. If you can optimize your site in such a way that you load the important bits first with a minimum amount of delay (and then worry about loading all the other stuff after), then it feels much faster. This works because waiting without visual feedback is the worst kind of slow. Optimizing for First Contentful Paint will make your site look and feel faster. Your scores might not change that much, but the goal is not to optimize for scores. Just make it faster.
The Only Thing Which Matters Is the Perception of SpeedGoogle’s own documentation says this much.
Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.However, regardless of what your website is, what sector you’re in or how it works, there is one golden moment that you might want to measure. It’s Time to Interactive. The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. Simply put, how quickly can we make it feel ready? If there’s a fundamentally important thing to understand here is that it’s not likely that Google is specifically measuring the actual page speed. What they’re much more interested in is the perception of speed. If you make a lightning-fast website that feels slow to load, you’ve wasted a lot of time and money. The emphasis needs to be on:
- How do we show something quickly?
- How do we make it feel ready?
Where Do You Start?You need to start by finding the slow stuff. While tools aren’t good for giving you metrics over time, they are really good at spotting problems. The most impactful thing you can learn about speed optimization is to look at the way in which pages load and find out what’s waiting for other stuff. If you can remove those bottlenecks, change the order of how things load in, and get them to load at once rather than one at a time, then everything else happens sooner. One other thing to remember is that Google is monitoring, measuring and analyzing sites in a mobile-first way. Many of our users are using mobile devices and that’s where the particularly slow pain points are. There is no magic bullet. We’re on a journey of 1,000 tweaks. Here’s what you can start doing today, instead.
Top Tips to Shortcut Speed
Load Less StuffYou might want to consider lessening your website’s elements. Some things to look at: Basics
- Plugins, extensions, and integrations
- Bytes transferred
- DOM complexity
- Colors, details, icons, lines, borders, shadows
- Lazy-loading, deferring or async’ing resources
- Cross-domain resource reduction
- DNS and asset prefetch/preload
Tidy up Your CMSUse plugins, extensions, and integrations to measure. What to use: Query Monitor, New Relic
Bolt on a CDN (Cloudflare)Advanced
- Page rules
- Edge workers
- Server push
Get Good HostingYou need to do your own research to find a good hosting company but here are a few recommendations:
Use a Static Page CacheRather than every user triggering your website to load up to request all its themes and plugins to go through that process to manipulate the outcome, why don’t you just save that the page and the outcome or save that database query and whatever it said. This is not for everybody. If you want an easy win and you’re on a simple site, this might be a good fix for you. What to use: WP Rocket or Total Cache for WordPress, Redis, Varnish Cache
Optimize Your ResourcesConsider optimizing your images using tools like TinyPNG or Squoosh. You can also do some advanced things, such as:
- Offload media to, e.g., Amazon S3.
- Use an image CDN like Cloudinary or Imgix.
Other Things You Can DoAside from the tips and tricks mentioned above, you can also try:
- Canonical AMP
- Post-load interaction improvements
- New ways of thinking about CSS