Page speed is always a top frustration for website users. They are in a hurry to get to the information they need. They don’t have time to wait for a slow Web page to load (don’t we all?).
How fast should it load?
Two seconds or less (or you might lose them)
Based on a survey done by Akamai and Gomez.com, 47% of users expect a web page to load in 2 seconds or less. And 53% of them will surf away if that page does not load within 3 seconds.
Another interesting side-effect of slow page loading is how it affects brand perception. Users will have more negative feelings about their experience and the brand, which they will share with other users (definitely not one of your goal).
Where is the Problem?
Steve Souders, author of High-Performance Web Sites, stated that 80-90% of the end-user response time is at the front end.
The following are common issues slowing page load:
- Sliders and carousels (is it really needed?)
- Bad CSS
- Custom fonts
- Too many plugins
- Third party scripts
- Gigantic assets (images, videos, etc)
- Popup / modal / lightbox
Where to Start?
To fix your page load issues, you first need to take a closer look at your pages, find out their weight and speed. A great tool to get you started is WebPageTest.org. It will let you run a speed test with detailed optimization recommendations. A performance-specific waterfall chart will be created.
[A waterfall chart is a form of data visualization that lets you see how the assets on your website load. More about using this tool: WebPagetest Documentation ]
Perfmap is a bookmarklet and Chrome extension that creates a front-end performance heatmap of resources that load in the browser. After loading a web page, all you need to do is click on the bookmarklet/extension icon to overlay the performance map.
The heatmap colours and the first ms value indicate at what point an image finished loading. The second value is the time it took the browser to load that specific asset.
There is also a legend attached to the bottom of the page showing timings for the full page load. If you hover with your mouse over a coloured area on the heatmap, the timeline indicator will show you when the image was fully loaded.
Web Performance Budget
A great idea to help you with page load, mentioned on Tim Kadlec website, is the use of a web performance budget. No, you don’t need to pull out your wallet for this one.
Instead of counting money, the load time is the currency.
It is best to write down as much information as possible such as load time limit, the maximum size of images, maximum weight of a page, and so forth. Jonathan Fielding created an online Performance Budget Calculator to help you calculate your budget.
You want to keep your budget goals in mind and really stick to them. Remember, every asset has to be budget in. This is a great way to control page bloat.
Speaking of page bloat, one of the biggest culprits is your image size. Please don’t just upload your gargantuan images without reformatting and compressing them first.
To compress images, I like to use the online tool TinyPng since clicking a bookmark is quicker than opening my graphics software (yes, impatience and speed seem to be a common theme here).
More information about optimization tools
Tools and resources for improving page load speed and UX experience
- How Loading Time Affects Your Bottom Line (Kissmetrics)
- Setting a performance budget (Tim Kadlec)
- Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility (Nielsen Norman Group)
- Why Users Aren’t Clicking Your Home Page Carousel (UX movement)
- WebPageTest – Test a website’s performance
- PageSpeed Insights (Google)
- Perfmap – Github / Chrome Web Store
- Web Font Optimization (Google)
- Optimize CSS Delivery (Google)
- Five CSS Performance Tools to Seed up Your Website (SitePoint)