Page speed is always a top frustration for website users. They rush through websites wanting to see content instantly as soon as they click the mouse! They hate waiting… (don’t we all?)
There is no denying the extreme importance of developing web pages that load quickly.
How fast should it load?
Two seconds or less (or you might lose them)
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.
Akamai / Gomez.com
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?
Banner blindness is a phenomenon in web usability where visitors to a website consciously or subconsciously ignore banner-like information, which can also be called ad blindness or banner noise.
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.
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).
(added June 4, 2018)
This image compressor was brought to my attention very recently by a reader and like TinyPNG, it will compress your images.
The big difference however is in the size of the images allowed and the number of images that can be compressed at once.
Limit: 40 images, maximum 50 MB each
(compare to tinyPNG which offers up to 20 images, maximum 5 MB each)
We might have a winner!
More Image Compressors
- Optimizilla (up to 20 images, includes image preview and slider to adjust quality, supports: JPEG and PNG)
- Compressor.io (file size limit 10 MB, 1 image at a time, 2 types of compression, lossless or lossy, supports: JPEG, PNG, GIF, SVG)
As this article is not about reviewing image compression tools, I will suggest the following articles if you are curious about reading more about them:
In the next section, you will find tools and resources to help you achieve better page load speed and improved UX experience. Have fun!
Tools and Resources
- 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)