Are you losing customers due to poor site load performance? Here’s how to fix it.

Site performance is a big part of the user’s perception of how fast and responsive your company is. 40% of people on many sites will leave by 3 seconds. By 10 seconds, they are multi-tasking and have probably already left your site, never to return. Also, Google has started taking site speed into consideration for their ranking. The good news is that page size and loading time can be greatly reduced by optimizing images. Your web experience gives your customers and potential customers their first taste of what their experience with your company will be, so you need to make it a great one.

There are many reasons to improve performance:

  • Keep users on site and on task — a site that loads too slowly will cause users to multi-task and even abandon the site.
  • Meet needs of customers in low-bandwidth areas (developing countries, and often much of Europe due to demand. India and China also tend to be markedly slower than the US or EU areas)
  • Beat the competition
  • Align with your company’s digital identity

As a digital company, you need to create a responsible responsive design experience, which Scott Jehl (Responsible Responsive Design — an excellent book!) defines as:

  • Usability: The way a website’s user interface is presented to the user, and how that UI responds to browsing conditions and user interactions.
  • Access: The ability for users of all devices, browsers, and assistive technologies to access and understand a site’s features and content.
  • Sustainability: The ability for the technology driving a site or application to work for devices that exist today and to continue to be usable and accessible to users, devices, and browsers in the future.
  • Performance: The speed at which a site’s features and content are perceived to be delivered to the user and the efficiency with which they operate within the user interface. (Scott Jehl, Responsible Responsive Design)

Where do I start?

There is a lot of low-hanging fruit and more in-depth areas you can use to optimize performance, from optimizing images to minifying JavaScript and CSS code to minimizing redirects and much more. We’ll also go over some great testing and comparison tools.

You’ll want to make sure you identify and optimize your critical paths for your web ecosystem, such as signing up, signing in, searching for information, creating a case, subscribing to a service, loading the homepage, and getting to strategically important pages. Once you have a benchmark, strive for a 20% improvement each time, as this is the threshold at which users will notice a difference in load time.

You don’t get a second chance to make a first impression!

Since best practices in the responsive web design industry state that we have 100 milliseconds for the user to feel like the task was instantaneous, and 10 seconds before the user will lose interest entirely and start to multitask while waiting for the task to complete, we don’t have a lot of time. You’re probably already familiar with the “five second impression”. Well, if your page doesn’t load in five seconds, that’s certainly not creating a very good impression! Page weight on the web is up everywhere, with an average total size of 2200 KB, with images about 64% of that size, at 1400 KB.

Webpagetest.org creates this helpful breakdown to help you measure your site against best practices for total weight and image percentage.

Benchmark against your competition with these FREE tools

A great tool for benchmarking against your competition is GTMetrix.com. This tool gives great information, but relative page size and load time, so make sure to check it using webpagetest.org and with Chrome Developer Tools. You can test up to 3 competitors at a time for free, and can retain your reports for up to 30 days.

This GTMetrix.com chart shows where your page is performing well and where you have areas for improvement. These areas will be detailed later.

Give your stakeholders a powerful visual

Both GTMetrix.com and webpagetest.org provide a filmstrip view for you to see what your users are experiencing. You can even get a video of the experience — all for free! What’s your users’ five-second impression?

Every 3–4 seconds you can shave off your time is about a 20% improvement.

Analyze critical paths for first visit and subsequent visits

To understand your critical paths, such as signing up, signing in, searching for information, creating a case, or whatever your critical paths may be, you can use a chart like the following. This will also help you to identify places where the path could be streamlined for critical tasks.

Ways to optimize performance

You can do a lot to optimize our performance very quickly:

  • Optimizing images — low-hanging fruit. If this hasn’t been done yet, this is the one that you should concentrate on immediately as it is an almost instantaneous change and will generally give you the biggest improvement.
  • JavaScript — minify, reduce, defer, inline — low-hanging fruit
  • Minify CSS– low-hanging fruit
  • Use a CDN to provide the same experience to users around the world
  • Reduce JavaScript
  • Leverage browser caching
  • Provide sets of image formats, sizes, and qualities so that device browser can select the image that is best for that device’s display.
  • Use SVG when possible
  • Use <picture> element to tailor images to specific viewports
  • Reduce URL redirects
  • Add Expires headers
  • Streamlining design and reducing number of images

Optimizing images

To give stakeholders an understanding of how images that are not optimized for size and weight, you can use a chart like this. Mark the problem areas and make those the first images you address.

Minify JavaScript and CSS code — low-hanging fruit

GTMetrix.com automatically minifies your JS and CSS code — how nice is that?

Use a CDN to provide the same experience to users around the world

To kill three birds with one stone, the Adobe Experience Manager CDN allows you to load one high-quality image or video, then by using parameters in the URL, you can create the various sizes/qualities of images directly in the CDN. This eliminates going to a separate graphic design tool such as PhotosShop or Illustrator, and create and maintain several versions of images. It will ensure that both desktop and mobile users around the world have a great experience. Note that if text is included in the image, we will need to use the <picture> element.

Adobe Experience Manager (formerly Scene 7) CDN example of URLs for images with different qualities/sizes

Defer parsing of JavaScript

The fewer blocking elements you have on the page before the page is loaded, the more quickly the user can interact with the page. Both GTMetrix.com and webpagetest.org return details on where you can optimize it.

Inline small JavaScript

Inlining the response bodies of external resources in your HTML can reduce blocking of page rendering.

Reduce JavaScript

JavaScript really decreases performance, but there are ways you can reduce its impact:

  • Determine whether a library is necessary. JavaScript support in browsers has improved dramatically so that large portions of libraries are sometimes no longer needed. All modern browsers support the ability to query the DOM (Document Object Model) for elements using CSS selectors, just as you do with jQuery.
  • Browsers have new APIs to easily add/remove class names, iterate over loops, extend objects, and more, thus the need to include large normalization libraries may not be necessary.
  • Consider a smaller DOM framework that offers the same convenience without the weight. For example, Lego’s site uses Shoestring, a minimal offering of jQuery methods that can be excluded if not needed (https://github.com/filamentgroup/shoestring).
  • Make jQuery smaller by building a custom one that does only what is needed: https://github.com/jquery/jquery#how-to-build-your-own-jquery
  • Most recommended by Scott Jehl (Responsible Responsive Design) is dynamic loading, wherein you specify conditions that determine whether to load additional files, and if so, request those files in a non-blocking manner. However, if we need to load multiple script files that depend on each other, this will not execute them in any order. https://github.com/filamentgroup/loadJS. See Dynamic Loading of JavaScript at the end of this document.

Leverage browser caching

Make sure that you are maximizing the utility of your cookies, storing as much information as you can there to improve the user’s experience on subsequent visits.

Provide sets of image formats, sizes, and qualities

Provide srcsets of different image sizes so that the browser can select the image that is best for that device’s display. Srcset has a huge advantage: it asks the browser to decide the most appropriate asset based on any criteria the browser deems relevant, such as:

  • viewport size
  • screen resolution
  • even network speed
  • other environmental conditions like the amount of data remaining on a user’s mobile subscription

Using CSS scaling requires the full image size to be loaded, regardless of the device screen size. For users with low bandwidth connections or on data plans, this makes a huge difference. Look at your Google Analytics (if you don’t have dashboards, now is a good time to build some!) — do you have a large percentage of users on Chrome? If so, you can provide a 35% smaller webp image in your srcset to greatly improve the experience of many of your users.

Rather than making mobile users download the full image, we can provide srcsets like this:

<img srcset="img/main-large.jpg 1440w,   img/main-medium.jpg 720w, img/main-small.jpg 360w" 
src="img/main-small.jpg 360w"  
sizes="(min-width: 50em) 50vw,          (min-width: 35em) 33vw,         100vw" 
src="img/main-medium.jpg" alt="A friendly-looking dog" />

This tells our browsers the native width of the image (1440px) as well as the other available widths. Sizes tells the browser that if its minimum viewport width is 50em, use the middle image. If it is 35em, use the third image and display it at 33% of the viewport (the 33vw just says that it will take up 33% of the viewport). Thus, an ipad might take the middle one (720) while the mobile would take 360. For images spanning the entire viewport width, we would use 100vw, which is the max.

Srcset is supported on all browsers except IE11.

Use SVGs when possible and optimize image formats for your audience

Use SVG if possible, fallback to PNG. Save on file size, vector images will scale no matter the display, change colors without having multiple images. It is supported by all browsers.

Other formats include:

  • WebP — supports lossy and lossless compression, animation, transparency, 24–35% smaller than jpgs and pngs. Supported in Chrome, Opera, Android. Of our desktop and mobile users, 50% are on Chrome (Dec 2016-Jan 2017). We could provide webp images in a srcset for our Chrome users.
  • JPEG XR — supports better compression, lossless compression, deeper color over normal JPG format. Supported by IE, Edge
  • JPEG 2000 — will eventually supercede JPG, lossless compression, higher image fidelity. Supported by Safari
  • Use less facial detail for side views of faces to reduce page load time
  • Icon fonts

Use <picture> element to tailor images to specific viewports

In conjunction with the srcsets, to avoid mobile users needing to load huge images but only seeing a scaled-down version, or when text in an image is too small to be seen on a mobile device, we can use the <picture> element. Use media queries to determine which size image to use.

<picture> 
<source media="(min-width: 60em)" srcset="/images/feature-xl.jpg"
type="image/jpg" />
<source media="(min-width: 40em)" srcset="/images/feature-large.jpg"
type="image/jpg" />
<img src="/images/feature-small.jpg" alt="Get your free trial now!" />
</picture>

Here, it will check the minimum width of the device viewport, then load the appropriate image from the srcset.

If you have a large number of Chrome users, you could also provide different formats, with the 24–35% smaller webp for your Chrome user audience, and a fallback to jpg for older browsers:

<picture> 
<source type="image/png" src="/images/feature-large.png" />
<source type="image/svg+xml" src="/images/feature-large.svg" />
<source type="image/webp" src="/images/feature-large.webp" />
<img src="/images/feature-small.jpg" alt="Get your free API Management Trial now!"
</picture>

Picture is not supported on IE 11 or earlier versions of Android.

Add Expires headers

Expires headers let the browser know whether to serve a cached version of the page.

  • Reduce server load
  • Increase page load time
  • Cost benefit ratio: high value
  • Access needed

Specify a cache validator

Resources that do not specify a cache validator cannot be refreshed efficiently. Specify a Last-Modified or ETag header to enable cache validation.

Specify image dimensions

Ensure your each of your images has a width and height attribute.

Reduce DNS lookups

DNS lookups add delays to the initial requests to a host. Making requests to a large number of different hosts can hurt performance. If your components are split over multiple domains, see if you can consolidate components under fewer domains.

Enable GZIP compression

Enable compression for your JavaScript, CSS, SVG, and other files to reduce their transfer size and your overall page load.

Make fewer HTTP requests and minimize URL redirects

If you can reduce the number of external JavaScript and stylesheets you have, this will reduce your page load time. Redirects also add additional delays to a page load. Determine where you can reduce or eliminate them.

Streamlining design and reducing number of images

Optimizing images is great, but removing unnecessary images and streamlining your overall design is even better and will greatly impact your page load time. Where can you can reduce text in favor of icons? Which images are really necessary for this experience?

Examine your waterfall — what other areas can you optimize?

By combining Google Analytics data on your audience and testing tool information on your waterfall, you can make decisions to further reduce time. For example, if the majority of your audience is using the English language setting on your site, you might decide to optimize for these users and default to English.

Look for codes that aren’t 200 OK. Those indicate other areas where there might be broken links or unnecessary redirects.

Know Your Audience

As you know, performance information is most powerful when combined with analytics. If they don’t already exist, build Google Analytics dashboards to understand more about your audience, such as where the majority of your users are, where the majority of your mobile users are, what your mobile usage is overall, how many users you have, what percentage use what browser, what your overall page load time (remember Google Analytics samples only 1% of your pages by default, so you’ll want to increase this), time until desktop and mobile users can interact with a page (Avg. Document Interactive Time), time until page is fully loaded for desktop and mobile users.

Time until user can interact with page vs time until page is fully loaded

All of these tools show the time until the page is actually fully loaded, which can be quite a bit longer than the time until the user can interact with the page (when they perceive that the page is loaded). You can compare these two times using Google Analytics’ Avg. Document Interactive Time and Page Load Time. You should check this against desktop and mobile.

<doc interactive and page load time chart>

Desktop vs mobile usage

It’s good to know your overall number of users, as well as what percentage of them are on mobile. Everyone expects a mobile experience nowadays, so gone are the days when it could be reasoned not to optimize for this smaller percentage and to design from a mobile-first approach. India and China use mobiles to do everything, even build websites!

Optimize for touch

Although a device might have various input types, such as touch or keyboard, you cannot assume that your user will be using those. Expert Josh Clark (Designing for Touch, Tapworthy) recommend to always optimize your design for touch.

Where are your users located?

Determining where the majority of your users are will give you a good idea of how long it takes them to interact with the page vs for the page to fully load. If there are particular markets that you are targeting which have a slow experience, that is an area that you can optimize for.

What browsers are they using?

In selecting image formats to include in your srcsets, make sure you also understand which browsers the majority of your users are using on desktop and mobile. As afore-mentioned, that will enable you to optimize the experience for the browsers that are supporting more recent web development trends.

Happy optimizing!

Tools Used

Recommended Tool

Adobe Experience Manager CDN to create and manage images:

References