When it comes to website performance issues, some of the biggest culprits are the images. A full-width layered slider looks good and may drive some sales but if it’s 4 MB large, the effect it has on the load time will increase the bounce rate and negate any profits.
Image optimization is not only a top recommendation from Google but an easy way to shave off seconds from your site’s load speed. If you noticed that your website is taking too long to load or you’re seeing an increased bounce or abandonment rate, a good start is to make sure that the images you are using are not dragging down the entire site. Follow the tips and tricks below to make your PrestaShop store run fast while staying pretty.
Choose the right format and optimize for Web.
One of the most common mistakes that often slows down websites to a crawl, is uploading images without checking their size and format beforehand.
- Never use images for print on your website. Images and graphics created for flyers or print ads are usually very large and besides slowing your site down, they can completely crash it by using up the entirety of your server’s resources.
- Save for Web. Most image editors have an option to Save for Web so make sure you or your designer will use it whenever banners or slides are created for your website. This simple process can reduce the size of images by up to 80% while maintaining high quality.
- Use JPG for large images and PNG for icons and transparent images. Never use BMP images.
- Optimize the images already on your website. There are several tools available online (for example tinyjpg.com) which can help with this process. If the average size of your images is in the hundreds of kilobytes, it’s a good idea to optimize and re-upload them.
Choose the right dimensions.
If you are using banners and sliders on your website, make sure that the images you upload are never greater than the image container. For example, if the size of a banner is 960 x 540 pixels on the highest resolution, those are the dimensions you need to use when uploading images. If you upload a larger image, it will appear compressed down to the correct size but in the background, the full size image is loaded and resources are wasted.
In case you have products on the homepage of your PrestaShop store, make sure to regenerate the Home Default product images to the dimensions used by the largest product boxes. Again, larger images will appear compressed but the original size will first be loaded, again wasting resources.
Reduce the number of slides.
Large, imposing slides offer a visual “Wow” factor while also allowing multiple images and messages to be displayed in the same space. They’re great but if you have too many, this can cause longer load times, as while only one slide is displayed at a time, all of them are loaded in the background. 3 or 4 should be enough but if you have more, you can alternate between them on a daily or weekly basis.
Optimize for mobile.
While page speed is very important on desktop, it is critical on smaller smartphones since mobile internet is generally slower and long wait times lead visitors to abandon your store and look for other options. If you have a slider on your site, you should seriously consider disabling it on mobile, since in most cases the text and large images are barely noticeable on the small screen, they take up precious space and they require a long time to load even on 4G networks. If you don’t want to lose the slider and banners you should at least look for modules, which allow you to upload distinct images for different resolutions.
Page speed optimization has an incredible effect on improving customer experience and consequently increasing sales. Competition is fierce out there and a few easy changes can make a huge difference.