We can add more features to our websites and have more tools and technologies at our disposal than ever before. The downside, however, is that our choices can significantly slow down our sites, much to the frustration of customers (in a 2018 survey, 80 percent of users said a slow loading website was more frustrating than one that’s temporarily down). When sites become inaccessible or unresponsive on slow network conditions or low end devices, it can even exclude potential customers altogether.
The business impact of web performance optimization is well documented. Fashion retailer Missguided, for example, reduced median page load time by four seconds and increased revenue by 26 percent. Watch a talk on this below:
A lot of it is about raising awareness, and so we invited seven experts to suggest a few tips that can help improve the performance of your sites.
1. Build for mobile first
Customers are becoming increasingly mobile, and the proportion of mobile-only customers is rising. Conversion rates, however, tend to be lower on mobile. Independent web performance consultant Andy Davies, who worked on the fashion retailer’s site mentioned above, says it’s time to change that, and finally treat mobile as a first class citizen.
To create fast mobile-first experiences, Andy recommends building sites that are usable on low cost Android phones, such as the Alcatel 1x, and then enhance them at runtime to deliver a richer experience to visitors with more powerful devices and larger screens.
You might also like: Designing for the Next Billion Users.
2. Stop using carousels and sliders
Carousels, slideshows, and sliders might sound like a great idea on paper, but Shopify speed optimization expert Alexander Lam, CEO of Rvere, which is behind Shopify app Hyperspeed, warns they have two major flaws that we need to make our clients aware of.
“They don't convert visitors into customers, and they slow your site down,” he warns. “A usability test by the Nielsen Norman Group found that carousels are essentially ignored by visitors. Even more damning, a test done on the Notre Dame University site found that only one percent of visitors clicked on the first slide. The rest of the slides had even less clicks.”
“Getting rid of a carousel can make a page load much faster since the total page size will see a significant reduction,” he advises. “Consider a well-placed hero image with a compelling call to action instead of a carousel. It'll load much faster, and you'll get more visitors clicking on what you want them to click on.”
3. Optimize your images
Images are an essential part of any ecommerce store, and they often make up the biggest part of it. Large images, however, can slow a site down to a crawl since larger pages take longer to load.
If you or your client wants to keep all of the images, Alexander Lam recommends at least compressing them.
“Before uploading any image to the store, run it through a free image compressor like tinyjpg.com or shortpixel.com,” he suggests. “These services will make your image smaller in terms of data size, without sacrificing quality or changing their actual dimensions. Raw images can often get over 70% smaller without any noticeable quality changes.”
Making sure you're using the right file format is also important. PNG images are really useful if you want transparent pixels in your picture, but they usually take up more space than JPEGs.
“If you have a PNG that has no transparent pixels, consider converting it into a JPEG before uploading it,” Alexander advises. “Use Photoshop or a service like PNG2JPG to change your file's format.”