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).

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

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
  • Javascript not optimized or blocking content
  • Third party scripts
  • Gigantic assets (images, videos, etc)
  • Popup / modal / lightbox

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.
Wikipedia

Where to Start?

WebPagetest

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 ]

Waterfall Chart

PageSpeed Insights

Google’s PageSpeed Insights is another great tool to use. By running your website through PageSpeed Insights, you will receive a score and suggestions on how to improve your website speed.

More Google tools are available to analyze and optimize your website

Perfmap

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.

TinyPNG

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