We recently discussed how eCommerce retailers have no choice but to optimize page load times if they want to make sure customers don’t give up and leave before completing a purchase. Part one covered the issues you might find on the back end of your website that are slowing down page load times and some ways to address them.
Today, we’re looking at some frontend UI/UX issues that could be slowing you down.
Fat Web Pages
According to the HTTP Archive, the benchmark for page size as of May 2016 is 2.46 MB. Everything from JavaScript and CSS files to images and pop-ups can contribute to this size and slow down page load time. So how can you reduce the size of your web pages?
Optimize Images
Images tend to comprise 50-60% of the weight of most web pages:
- Resize images - Don’t allow your browser to resize your images, use height and width tags to help size images and use an image compression tool like GZIP compression
- Check out YSlow for help determining how many bytes you can save by resizing your images. YSlow will also analyze web pages and provide suggestions on how to improve page performance.
- Hero images and carousels can really bog down a page. Make sure to compress these and have the objects load in optimal order.
- Progressive JPEGs - Consider using progressive JPEGs, which render in layers of increasingly high resolutions. Progressive JPEGs can improve both actual and perceived page speed.
- Adjust the CTA - Placing the call-to-action (CTA) at the bottom of banners has become common UX practice, but if the banner loads the CTA last, users may miss it. Optimize the images and buttons to render progressively, and if the CTA button is of the utmost importance, consider moving it to the top of the banner where it will render first in the order of things.
Reduce Complexity
Images aren’t the only elements swelling on web pages. Page complexity, and thus the resources it takes to load a page, is also increasing. Here are some examples of these resource intensive elements:
- Pop-ups – Delay pop-ups for a few seconds to allow the page to load and your shoppers to view the page before they appear.
- Stylesheets – Poorly executed stylesheets, JavaScript, and third-party scripts can block parts of the page from rendering properly. For a better user experience, ensure that these resources are optimized and correctly implemented, and identify and defer non-essential scripts to load after the primary content renders.
- Custom fonts – Watch that the font you chose doesn’t require huge amounts of CSS, heavy JavaScript, or is hosted externally.
- Responsive design – While responsive design is a must for your site, if poorly implemented, TTI will suffer.
- External resources – Limit the external resources you rely on like plug-ins and embedded media. Accessing files from an external site makes your site reliant on the speed of other sites.
- Flash - Consider reducing, or even eliminating, the use of Flash. This is particularly relevant as more of eCommerce is predicted to come from mobile.