Site Speed Influences a lot more than you think

Digital Marketing Consultant

There’s a very clear connection between page load times and conversion rates. Statistics from Google and Amazon show that an increase in load time has a direct and profound impact on user engagement. For Google an increase in page load time from 0.4 second to 0.9 seconds decreased traffic and ad revenues by 20%. For Amazon every 100 ms increase in load times decreased sales with 1%.

In his book Website Optimization, Andy B. King said:

Speed is the most important factor, after site attractiveness, to increasing flow in users. People who are more engaged while browsing your site will learn faster and show an improved attitude and behavior toward your site

– Andy King, Website Optimization, page 148

Google is going to make page speed a direct ranking factor on mobile devices. This means that you will get fewer visits with a non-mobile site. 3 months after Google launched its new algorithm in 2015 that penalized the mobile search rank of web pages that were not optimized, almost half of non-mobile-friendly web pages experienced a loss in page rank.

mobilegeddon-600x351
According to Radware’s 2014 State of the Union for Mobile eCommerce Performance, every one-second delay impacts bounce rate, conversion rate, cart size and page views.

1-second-delay-chart

There are a number of things that one can do to dramatically increase increase site speed.  Here are the most important things to do:

1. Use Google’s PageSpeed Insights tool to identify problem areas

Run the PageSpeed Insights tool on the pages of your site. Google will tell you how your pages perform, and will also specify the problems seen by the tool, with links to resources to help fix them. Give the instructions to your web developer and they will fix them. The screenshot below is for Capitec Bank

capitec-page-insights
2. Critical path rendering

Most web pages download in a way that requires most of the code to be downloaded before any content is rendered to the user. The smarter way is to alter that, so content begins to get displayed while the downloading continues, as shown below:

critical-path-rendering

The main content needs to be loaded first and should render as it downloads.  The menus, sidebars and all else below the fold have lower priority in rendering the page. This puts content in front of your visitor as quickly as possible.

3. Optimizing CSS and JavaScript

This is were most site fail. The majority of sites spread CSS and JavaScript across many files and load them in a very inefficient manner. Do the following to optimize your CSS:

  1. Minify CSS.
  2. Avoid CSS conflicts (multiple IDs, overriding rules, etc.).
  3. Don’t use CSS inline of HTML tags.
  4. Load CSS using deferred and asynchronous JavaScript.
  5. Load critical CSS in the HTML. Reduce CSS libraries to only what is actually needed.

Here are similar tips for dealing with JavaScript:

  1. Minify JavaScript
  2. Implement Unobtrusive JavaScript approach
  3. Load JavaScript using deferred and async attributes
  4. Load Critical JavaScript in the HTML
  5. Reduce JavaScript libraries to only what is actually needed.

4. Optimize Images

Most web designers upload images as pngs because the format has higher quality. However that higher resolution is pretty much wasted on the web. PNGs need to be converted to JPG format, as the resulting images are smaller and will load faster. Images can also be compressed to make them even smaller

  1. Use Sprites (http/1.x only).
  2. Defer Loading (lazy loading).
  3. Use width and height attributes.
  4. Use lightweight favicons.

5. Accelerated Mobile Pages (AMP)