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?
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.
- Minify CSS– low-hanging fruit
- Use a CDN to provide the same experience to users around the world
- 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
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.
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
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.
Inlining the response bodies of external resources in your HTML can reduce blocking of page rendering.
- 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
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.
<source media="(min-width: 60em)" srcset="/images/feature-xl.jpg"
<source media="(min-width: 40em)" srcset="/images/feature-large.jpg"
<img src="/images/feature-small.jpg" alt="Get your free trial now!" />
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:
<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 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
Make fewer HTTP requests and minimize URL redirects
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.
Adobe Experience Manager CDN to create and manage images:
- Capabilities: Chttp://www.adobe.com/marketing-cloud/enterprise-content-management/digital-experience-capabilities.html
- Digital Asset Management: http://www.adobe.com/marketing-cloud/enterprise-content-management/digital-asset-management.html
- Responsive Web Design. Ethan Marcotte.
- Responsive Design: Patterns & Principles. Ethan Marcotte
- Responsible Responsive Design. Scott Jehl.
- Designing for Touch. Josh Clark.
- (PDFS of these books are available from the CX/UX team if you’d like them.)
- Responsive images and performance:
- https://aycl.uie.com/virtual_seminars/watch/lets_talk_about_responsive_images_and_performance. Jenn Lukas.
- Google uses site speed in ranking: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
- Google PageSpeed Index: https://developers.google.com/speed/docs/insights/about
- Speed Index: Shttps://www.sitepoint.com/speed-index-measuring-page-load-time-different-way/
- How Yahoo’s YSlow page speed is computed FAQs: http://yslow.org/faq/
- Google Analytics: https://support.google.com/analytics/
- Browser Support for elements: http://caniuse.com/#