Tips for Content Optimization and Webstore Performance

When you check your webstore via Google Lighthouse or Google PageSpeed Insights or any other tool and you are not satisfied with the score you get, there is a number of ways you can improve your webstore performance. In this article we provide some recommendations on how you can optimize your webstore content to improve performance and get a higher score. Keep in mind that these are some of the most important tips on content optimization, but this is not all, and there are multiple other things you can do to speed up your webstore.

Making improvements to your webstore described below can raise your score. But you should keep in mind that it is hard to achieve a high Google Lighthouse score because it tests not only your webstore, but also compares it to all types of websites, many of which don’t offer the same functionality as a webstore, for example simple corporate websites, blogs, etc. You can still use your speed score as a measurement and recommendation to help you make your own webstore better for your customers.

Note that your scores can change from day to day because of different factors, even if you don’t make any changes to your webstore. Your score can also change when you make some changes to your webstore, for example add new products or content, change your webstore theme, enable or disable some features, install apps, etc.

Images

  1. Choose the right image file format

Image files come in different formats. Choosing the appropriate image file format plays a crucial role in image optimization. The following image file formats are the most suitable for use in your webstore:

  • PNG is an uncompressed file format which creates higher quality images. As a rule, the PNG file size is very large, that is why it can have worse impact on load time. PNG file format is mostly used for simple images and logos. PNG images can be compressed without quality loss.

  • JPEG (or JPG) is a compressed file format which can display millions of colors. JPEG file format is perfect for the complex, colorful images. JPEG images have small file sizes, which allows to store more of them at once without slowing down the performance of the web page. Nevertheless, you need to be careful when compressing the JPEG images, because it might result in quality loss.

  • GIF is the best choice for the animated images. GIF file format only uses 256 colors and can be compressed without quality loss. Nevertheless, we recommend to use video formats, like MP4 or WebM, instead of GIF, if it is possible.

  • SVG is a format which stores images as vectors. SVG image can be scaled to different sizes without losing quality. We recommend to use SVG for webstore icons, if you want to replace any default icon used in the Sana webstore UI.

  • WebP is an advanced image format offering superior compression, both lossless and lossy, tailored for web images. With WebP, webmasters and developers can produce smaller yet richer images, enhancing web performance.

  • AVIF is a modern image format that provides superior compression and image quality compared to traditional formats like JPEG and PNG. It supports advanced features such as high dynamic range (HDR), transparency, and wide color gamuts while maintaining smaller file sizes, making it ideal for web use and faster loading times.

You should avoid using the BMP files in your webstore. BMP file is an uncompressed raster image and its file size is very large. That is why, the BMP images can significantly slow down the performance of your webstore.

  1. Compress your images

Another way which can help you to improve your webstore performance is image compression. Image compression is used to reduce file sizes without losing noticeable image quality.

By using compressed images in your webstore, you can decrease the load time of your pages and reduce the total amount of data transferred to the customer. Besides, compressed images will consume less space on the hosting server.

We recommend to check all images you compress, because if an image is compressed too much, it can be distorted.

There are a lot of free services which you can use to compress images, for example:

  1. Resize your images

In addition, you can optimize your images by resizing them. When you resize an image, you change the visual dimensions of the image, you reduce its resolution. Resizing the image file also decreases the file size.

You can use any free tools to resize your images, for example:

For example, your web store displays images at 300px x 200px in some places and you have images with a resolution 4000px x 3000px. In this case, it is not recommended to use images with such a high resolution, since these extra pixels will not do any good, they will only increase the file size of your images and decrease the site speed.

Resizing the images will be the most appropriate solution in this case.

  1. Set the minimum height

We recommend to set the minimum height for the images. All content elements that use images provide a possibility to specify the minimum height. It is also possible to specify the minimum row and column height where you add content. By setting the minimum height for the images, you can improve the Cumulative Layout Shift (CLS) score in Google Lighthouse which measures how much content moves around on the web page after being rendered.

If the images have the minimum height, then it can prevent content from jumping around while the page is loading.

When you set the minimum height for your content, make sure that it looks good on desktop computers, tablets and mobile devices. There are height settings in Sana for different devices.

Animation

By using animations in your webstore, you can attract customer’s attention to important details and also give some hints about some elements of your webstore, for example, whether an element is clickable or not. You can use animations to enhance your customer’s user experience.

These are recommendations for adding animation to your webstore:

  • Although the GIF format is the most popular format used for animations, the GIF file is heavier than other files. That it is why, GIF files can cause loading problems. We recommend to use MP4 or WebM video formats instead of GIF. MP4, for example, is much lighter and has better quality.

  • You should not overload your webstore with animations. A lot of animations in your webstore can slow your webstore’s loading speed and the overall performance.

  • Use animations only where it is necessary. The main purpose of animations is to draw attention, but if you have too many moving elements on the same page, it can confuse your users and, on the contrary, distract their attention. Besides, it can have impact on the page load speed.

  • You should make animations in your webstore responsive. Make sure that animations work good not only on desktop computers, but also on tablets and mobile devices.

We also recommend to check web pages which contain animations in different web browsers.

Videos

You can accompany your informational content with videos and in this way make your webstore more compelling and engaging. Also, videos make your webstore more interactive. This helps draw attention to your webstore. If you use video content wisely in your webstore and the videos are properly optimized, it will help you to increase conversions, customer engagement and satisfaction.

You can add a video to a page using content elements, for example, Paragraph or Code.

You can also add videos to the Sana webstore either on the Settings tab or Hero tab in the row settings in Sana Admin. In this way a video will be used as a background of a row.

 

There are some limitations which you need to consider before using a video as a background of a row in the Sana webstore:

  • A video you add using the row settings is always in the autoplay mode, meaning that it starts playing automatically, when a user opens a page in the Sana webstore. When a video ends, it loops back to the beginning. This may slow down the page loading.

  • If you set a video as a background of a page, it will play only on desktop devices. A background video is not available for mobile devices. If a user opens a page with a background video on mobile device, a background image will be shown instead of a video.

If you feel that a background video might affect your webstore performance considerably, then we recommend to avoid using them in your Sana webstore.

In case you have a lot of videos in your webstore and your customers mostly access the Sana webstore from mobile devices, this can cause the increase of bandwidth usage. That is why we advise you to reconsider using videos in your webstore. You can use Google Tag Manager and Google Analytics to determine how many users access your webstore from mobile devices.

Fonts

By default, Sana Commerce Cloud uses the Pathway Gothic One and Open Sans font families, but it is also possible to use any other system fonts or even the open-source Google Fonts for the Sana webstores. However, if you use the external font, such as Google Fonts, that does not exist on your customers’ computers, then this font must be downloaded before the text can be displayed. This affects the loading time of your webstore.

To avoid this, you can use a system font that is already installed on most computers. Note that the availability of the system font also depends on the operating system.

Code Minification

We recommend to minify JavaScript and HTML before using it in the HTML injections or the Code content element.

Minification is the process of deleting extra characters from the code without changing the way that code works. These characters do not serve any purpose other than make the code more readable. For example, these characters are:

  • Whitespaces

  • Line breaks

  • Comments

  • Block delimiters

Minification reduces the code file size and therefore minification can help improve site speed and accessibility, reduce load times and bandwidth usage on your webstore. By minifying the code, you can provide better user experience.

You can use the following minifiers to improve the code or any other minifiers of your choice:

Minifying your code is usually safe, but still we recommend to review the minified code and test it in order to avoid any issues. You should also pay attention to the minified code, because some of the code minifiers add their website URL to the minified code.

Third-Party Services

One of the possible reasons why you may have low scores is Google Lighthouse or in PageSpeed Insights is because of the third-party applications integrated with your webstore, for example Instagram, Facebook, some chat, etc. They can pull a lot of resources, such as CSS, images, etc. and so it takes time for the web browser to retrieve them. This can slow down website loading and the time when a user can interact with the website.

We recommend to thoroughly analyze each third-party application integrated with your webstore and if they are too resource-consuming, try to find lighter alternatives.

Also, try not to overload your webstore with third-party apps and consider removing unnecessary apps.

When you embed some third-party application on your webstore, we recommend to use the Body end field in the HTML injections for this purpose.

See Also

WCAG & EAA

Tips for Content Creation