2. The Importance of Speed
When you're building a modern mobile web experience, it's important to measure, optimize, and monitor if you're to get fast and stay fast.
Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones.
Mobile sites should focus on optimizing for user-centric happiness metrics. Tools like Lighthouse highlight these metrics and help you take the right steps toward improving your performance.
How to think about Speed
To "stay fast", set and enforce performance budgets to help your team work within constraints keeping your site fast and users happy.
There are many metrics to measure speed, one of which is the Speed Index. This takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted.
UK Sector Speeds
speed = performance
Half of all web traffic is now mobile. Slow sites are a quick way to lose customers.
A recent research report shows 53% of visits are abandoned if a mobile site takes three seconds or more to load.
And that quickly worsens as page load time increases.
For example, if you keep mobile users waiting just 1s to 5s, the probability of them bouncing spikes by 90%.
Add just another second, and that figures rises to 106%
Mobile pages that load 1s faster see up to 27% increase in CvR
Conversion rate impact
The Mobile Conversion Challenge
Desktop vs. Mobile Conversion:
While mobile usage is 4X higher than desktop, its weaker user experience means it only converts half as often.
Consumers aren’t loyal to brands. They’re loyal to things that make their life easier or more productive. According to a recent Google study, nearly two-thirds of consumers say they’d switch from a poorly-designed mobile site to one that makes purchasing stuff easier. *
* Source - ThinkWithGoogle November 2018
Consumers love speed
Part of the problem lies with speed, or rather lack of it. In a recent survey, 46% of users cited slow load times as the thing they disliked most about mobile *
* Source - Google Webmaster Central Blog - April 2015
Top Tips
Increasing Page Speed through Image optimisation
“The most optimised image is the non-existing image”
Removing images can lead to fewer complications and less maintenance. You should consider:
- Removing unused and unnecessary images
- Prioritising loading hero images first
- Use CSS effects and animations where possible
- Use web fonts instead of encoding text in images
Start working with Image Prioritisation
Next, make sure your images are formatted correctly:
- JPEGs for pictures
- PNGs for transparencies
- Use SVGs if possible, and
- GIFs for animations
Use progressive JPEG for images over 10k bytes, and begin exploring Next-Gen Formats, such as JPEG 2000, JPEG XR, and WebP.
Learn more about selecting the right image formats
Optimising images can help you achieve the largest byte savings and performance improvements for your website.
- Compress images and remove metadata
- Experiment with quality settings for your formats
- Server side resizing of images
- Enable GZIP compression for files
- Use automated tools for image optimization
- Use responsive images to adjust to screen sizes
Dive deeper into this image optimization checklist
Once everything else is in place, you need to make sure that your images are delivered as fast as possible.
- Lazy loading: Loading images only when needed
- Multi-serving images: Serve different image versions to different devices. Use srcset and the browser will figure out which image is best
- Placeholders: Display placeholders while loading
- Enable caching: Beneficial for returning visitors
Top tips
Increasing Page Speed through Critical Path Rendering
Speed Index in WebPageTest tells you if the content above the fold loads fast. Are you below 3000?
If not, you need to optimize the code.
Time to Interactive in Lighthouse shows you how fast visitors can interact with the content. Also check Speed Index here.
Run an audit with Lighthouse to get recommendations about what to fix within the code.
Each recommendation is connected to a link to learn more.
Use Chrome DevTool to go through your code and see where you have bottlenecks. Here you can learn how to audit your code.
Since CSS is a render-blocking resource, it’s important to go through your CSS and only load what is needed on the page – check if you can inline.
You can use media types and queries to unblock rendering of the CSS that can be loaded later.
Learn more about render-blocking CSS
- JavaScript can also be render-blocking, so make sure you only load the necessary resources and then use defer or async for anything that can be loaded later.
- Does every script have an owner and is being used? If not, you might be able to clean some out
- Go through your tag manager and check if there’s anything you can clean out here
- Talk to your marketing stakeholders regarding measurement scripts. Are all tools being used? Is it possible to use one measurement provider instead of two or three? Work together and try to find opportunities.
More about render-blocking JS and JS optimization