Your team has worked hard to compose creative, compelling marketing materials and are successfully driving traffic in droves to your website. You throw your hands up in anticipation as you login to your analytics platform as you see…nothing. Well that’s not entirely true, you see lots of bounces, a high abandonment rate, and little click-through. It’s worse than nothing, it’s a lot of wasted potential.
No matter how effective your methods are for attracting visitors, your website needs to be up to the task to handle them. A slow loading website not only hurts your initial impression on visitors, but impacts their perception of any or all subsequent visits.
Andrew starts by outlining the basics behind website performance, and what this actually means on a technical level. He explains that the bigger a resource is (graphics, assets, etc.), the more data browsers need to download, which means longer load times for visitors.
By controlling how quickly a website responds to web requests, developers have the power to directly affect the load time for your site’s audience. Not only that, but they also have the opportunity to make or break the visitor’s experience, and likelihood that a visitor will return your site.
Here, Andrew showed how drastically different an optimized page loads compared to an unoptimized page, using webpagetest.org.
He explained how the “speed index” is a measure of how critical content is completed as the page loads. Developers can prioritize how assets load on a page. Make sure to load your critical content early, saving secondary content for later once the audience is engaged. This is referred to this as the “critical path”, or the content that directly relates to the user’s current action.
The biggest opportunity (or challenge) to optimize your website is imagery and graphic files. Andrew lays out the two big players in file types: bitmap and vector images.
Bitmap files (.jpeg, .png, .gif, etc.) have been around forever and are usually the most familiar file type to users. However, they don’t optimize well and can be quite large.
Vector images are a newer file type (.svg being the most common) and well supported by most browsers. They are optimized for the web, and are particularly good at being resized or reduced without losing clarity of the image.
Even if you’ve found the best file you have, you still need to optimize it for the web.
Andrew’s 3 Tips for Optimizing Bitmap Files:
- Always request full-quality source assets to start
- Determine the actual size of the image after recrops, before optimizing
- Aggressively optimize images to 60% of their original file size and then work your way down based on need.
Third Party Resources
While optimizing imagery is well within your control, Andrew wants to draw your attention to something you may have little control over, the drag of third party resources on your site’s loading time.
Editor’s Note: Thank you to Andrew for pointing out that AddThis uses code designed not to interfere with load times.
To figure out whether a third party resource is dragging your site down too far, Andrew runs everything through a performance budget.
- Determine page load and performance goals
- Measure performance impact of new content/features
- Repeat for each new feature
Aside from optimizing and compressing assets, caching is another tool Andrew illustrates to save customer’s valuable time.
Browser Cache: temporary storage of web resources used to reduce response time
Browsers save images from site’s your visited so that when you return, the site is much quicker to load. It recalls images and assets already loaded, so they can be quickly served without having to start from scratch. Developers can specify what content is cached, so return visitors have the quickest load time.
Remember to focus back on critical content, and cache valuable parts of the core experience.
Finally, Andrew proposes that at the end of the day, some Jedi mind-tricks can be used to help a website seem like it’s loading faster than it actually is. Specifically, users won’t feel something they don’t notice, so keep them engaged by serving quick loading critical content like low-quality image placeholders. Then, replace those graphics with high-quality assets once they’ve loaded.
Also, take advantage of the user’s idle time. Wait for them to interact with the page, and load critical content in the background.
If all that fails, you can always acknowledge the wait for the user. A quick message or progress bar can keep the audience engaged while your site works behind the scenes.