Nobody likes to use a website that takes forever to load. In fact, slow page load times are one of the top reasons people leave websites and abandon eCommerce purchases; studies show that 25% of users will leave a website if it takes more than 4 seconds to load. As internet use continues to shift to mobile devices, ensuring that your website loads quickly will be essential, especially since this affects not just user experience, but also search engine optimization (SEO).
At Diagram, we recently worked on redesigning the product pages on a client’s website, and one of the challenges we faced was improving page performance. These pages usually took 5-6 seconds to load, and we were looking to cut that time down to provide a better experience for the site’s users. Here are some of the insights we gained from the process:
-
Load the Most Important Data First
One of the first things we realized during this redesign is that the vast majority of the people who view these pages don’t need to see a page’s entire content right away. The first thing they would see is the page’s header text, a slideshow of product images at the top of the page, and a section that contains product videos and photos. They wouldn’t be able to see content further down the page until they started scrolling.
By prioritizing what people would see first and loading that content right away, we were able to make the most important information display first, and any additional loading time for items further down the page would usually go unnoticed. Prior to this change, the site had been loading everything on the page at the same time, and for pages with a large number of images, this could take as long as 6-10 seconds. By implementing this prioritization, we were able to cut page load times down to 2 seconds.
-
Cache, Cache, Cache
We’ve written before about the importance of using caching to improve page performance, and this project was a great example of this tactic. For these product pages, we used an asynchronous process to pre-load the data that can take longer to retrieve from the server. This allowed us to put some of the data behind a user interaction (such as a modal window) where it wouldn’t be displayed until it was clicked on, but once that interaction happened, it was ready to load instantly.
Note: in order to use this type of asynchronous data retrieval, you’ll need to make sure that data source you’re pulling the data from can support the increased number of requests without becoming a bottleneck. Unlike before, you're going to be doing these requests in parallel!
-
Keep the User In Mind
While all of this work to improve a page’s loading time can seem impressive, it’s all for naught if it’s not being done with the users’ best interests in mind. One thing to remember throughout the entire process is that the decisions to make these changes should be backed by metrics demonstrating how they can provide more value for the user.
Even if you cut a page’s load time in half, if metrics show that users are still leaving the page before they accomplish what you want them to do, then it’s a failure. Make sure the purpose of a page is clear and that a user is able to find the information they want or complete their tasks. Any improvements in page performance should be done in pursuit of those same goals.
Building Performative Websites
By following these tips, we’ve been able to create websites that load quickly while still providing the best possible experience for their users. Do you have any questions about how to implement these techniques to improve your website’s performance? Do you want to know more about how to create a good user experience? Please contact us!
