I continue with posts on optimizing the speed of an online store (or site) with slightly more concrete examples of improvements. The content is probably more intended for developers than for online store owners, but I believe that the latter can also learn something.
Why write about speed optimization again? Because I see that the situation in this area is catastrophic, probably more than most online store or site owners think. Most do not measure how many visitors they lose when the page takes 10 seconds to load on a mobile device. Those who have noticed the damage often want to change the entire platform instead of fixing the current situation. Unfortunately, they remain in a vicious circle, as most online store creators work on pre-made templates, which are not ideally optimized for speed in most cases. Honestly, it would also be very difficult to achieve this, as they must be suitable for various types of websites.
If you don't know the state of your website, you can check it at the link: Google PageSpeed Insights.
Ensure that the speed of the online store on a mobile device is at least under 3 seconds of loading or a score of 50+/100.
Below, I will present some examples of how I approached recent speed optimization cases with the most common points.
Check the error log on the website
Very often, errors occur in the background of the website's operation, which may not show on the front end of the store but still affect the operation. Errors do not complete certain operations, resulting in these being executed more often than necessary. It can also happen that everything gets stuck in a loop and significantly burdens the operation process.
In addition to errors in the logs, also check the execution of processes on the server via the terminal. For more detailed analyses, tools like New Relic are available. Don't forget to check for errors in the browser console (F12 and click on the "Console" tab).
We strongly recommend that after fixing all errors, you thoroughly test the store's operation, as new functionalities may appear and change the store's operation. For example, if the store has a chat module that did not work before due to an error, a chat window may suddenly appear on the page after the error is fixed, which can cause dissatisfaction for the online merchant because they did not notice it immediately.
Upgrade the web platform and environment (PHP, etc.)
Once you have fixed all errors and checked the operation, it is appropriate to start updating the system and upgrading the server environment. At least with Magento and OpenMage, it is such that new system versions are usually better optimized and faster. They also support newer environments, such as PHP 8.x.
The difference in operating speed between PHP 5.6 and PHP 8.3 is huge, as tests and comparative analyses show that PHP 8.3 can be two to three times faster than PHP 5.6, meaning that applications running on PHP 8.3 perform operations and tasks significantly faster and more efficiently.
After the upgrade, check for errors again, as all additional modules and themes may not be adapted to newer versions if they have not been updated for a long time.
Image display optimization
In most cases, images take up the most space or consume the most bandwidth when loading a website. For their optimization, I focus on three main areas: loading images at different resolutions, lazy loading of images outside the viewport, and displaying images in modern formats (WebP).
Loading images at different resolutions
If you are not careful at the beginning and do not have built-in automatic image resizing on the website when uploading new images, first check how large the header images and other images on the page are. In most cases, the images are too large, they can occupy up to one megabyte, while they could be ten times smaller if properly loaded in the appropriate format.
For example, I recently reviewed a website I received for repair, and in its menu, there were several images that together exceeded 16 MB, even though they were not visible on a mobile device. As a result, the page loaded for more than 20 seconds. Interestingly, this store was created by one of the largest website creators in Slovenia, which means that it is always necessary to be careful when setting up a new project. If you have the resources, I highly recommend avoiding multipurpose pre-made templates and instead creating a custom template. If you are already using pre-made templates, it is advisable to test them before starting work on them. Don't always just look at the store's appearance, but also focus on its operation. It is usually true that little money brings little music, but not always!
Check the images by opening the developer tools in the browser (right-click and Inspect or by clicking the F12 button). Then click on the "Network" tab, where you can sort the resources on the page by size. If you notice that more images are loaded for the mobile version that are wider than the selected mobile width, it means that too large images are being loaded.
Based on the example, we see that the image could be narrower and significantly smaller in size. Additionally, it is worth considering whether such an image even makes sense on a mobile device, as the text is not readable. It is probably better if the image is hidden or replaced with a more elongated image with larger text.
If you want to use different images for different screen sizes, use the HTML format.
<picture>
<source media="(min-width: 460px)" srcset="mobile_slika.wepb">
<img src="desktop_slika.webp">
</picture>
Usually, I suggest to clients to separate text from the image, so they upload only one image that is automatically cropped correctly on the page. The text above the image then adjusts according to the screen width, so everything is always displayed optimally, saving merchants a lot of time. Consequently, merchants can execute marketing campaigns and other marketing activities faster.
Lazy loading of images outside the viewport
Lazy loading of images outside the viewport is an excellent practice that allows faster page loading, especially for websites with a lot of image content. Instead of loading all images at once for visitors, images in the viewport load immediately, while others load only when they come into view. This saves loading time and improves the user experience.
To implement lazy loading of images outside the viewport, you can use the HTML attribute loading="lazy" or embed a JavaScript plugin for LazyLoad loading, such as vanilla-lazyload.
<img loading="lazy" src="image.webp" alt="..." />More information on this method can be found on the Mozilla Developer website.
Additionally, it is good to preload images that are immediately visible on the page so that they load preferentially and fill the space. This reduces page shifts during loading and ensures that larger images load earlier.
You can perform image preloading as follows:
<link rel="preload" as="image" href="important.png">If you have different images for different resolutions, you can preload them based on the resolution to prevent unnecessary image loading for a specific device.
<link rel="preload" href="mobile_slika.webp" as="image" media="(max-width: 460px)">
<link rel="preload" href="desktop_slika.webp" as="image" media="(min-width: 461px)">This will ensure better image loading efficiency and improve the speed and user experience of your website.
Displaying images in modern formats (WebP)
Displaying images in the WebP format on a website is an excellent way to improve loading speed and reduce bandwidth usage. WebP images are usually smaller than other formats, such as JPG and PNG, while maintaining high quality. Implementing support for loading images in the WebP format requires additional configuration on the platform, as some platforms only support classic formats, such as GIF, PNG, and JPG, by default.
If you already have all images uploaded in other formats, it is best to convert the images to the WebP format. For example, for the Magento platform, you can create a module that automatically converts images to the WebP format if they are not already in this format. This module can review existing HTML content and convert images from JPG and PNG formats to the WebP format on the server and replace image URLs.
When creating a theme, it is advisable to use as many vector elements as possible, which can be loaded in the SVG format through the template. All other images should be uploaded through the site's administration and changed as needed with built-in size optimization, loading method, and format. This allows flexibility and efficient management of image content on the website.
Minimizing HTML/JS/CSS
Of course, in addition to images, we must also pay attention to the remaining elements of the online store to ensure they load as optimally as possible. Probably the biggest downside of pre-made templates is that they usually load several different libraries, which, in my experience, can largely be completely unnecessary. Some developers prefer to add additional libraries for faster work instead of creating a simple functionality themselves. The more libraries there are on the page, the more time they take up.
If you are not going to remove unnecessary libraries on your page, it is good to at least optimize the code that loads on the page. You can do this by combining the common code of files. For example, combine CSS and JS files together. Then minimize everything along with the HTML code. Minimizing can remove unnecessary comments, spaces, etc., so the files are smaller. At the same time, because there are fewer of them, fewer requests are needed on the server to load these contents.
Perhaps an example that will be easier to understand: if we look at the most popular library for CSS styling, Bootstrap, it takes up as much space as my entire CSS for the online store.
Loading external scripts with a delay
Once we have optimized all the displayed content, there remains one aspect that we cannot fully control, and that is external scripts that load from external sources. I have no direct influence on this. This part is sometimes the hardest to optimize, as it requires careful consideration of how to act so as not to slow down the store's operation or change functionality.
This is especially important because it has already happened that a single such script significantly slowed down an otherwise fast page loading.
The first solution is to execute the loading of unnecessary scripts only after the page has fully loaded, so as not to affect the initial loading of the website. This can be done for scripts related to pop-up messages for newsletter sign-ups and similar.
<script>
window.addEventListener('DOMContentLoaded', function() {
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
ml('account', xxxx);
});
</script>
However, there are scripts whose execution cannot be postponed, as it would affect their operation. These include, for example, Google Data Layer, Facebook Pixel, and similar. They must load immediately to record all user interactions with the page. These scripts usually have a significant impact on page speed. If you want to check how they affect page speed, you can test them with and without them. For these cases, more work is needed, but there are solutions if we are creative.
For example, for the mentioned cases, we can implement first-party tracking. This means including a local script on the page that collects visitor data and then sends it to external systems. This way, we do not burden the page loading with external scripts, as we execute the script directly from our page.
Cache and its warming
Once we have completed most of the optimization on the website or online store, we have one last important step left: cache management.
Cache acts as a temporary data storage that allows faster access to frequently used information. It is intended to improve system performance and reduce loading time by reducing the need to retrieve or recalculate the same data.
This system stores generated HTML pages, data queries, and other content to avoid recreating these contents with each request. Caching significantly speeds up page loading, as entire pages are served directly from the cache, improving performance and user experience. There are different types of caching. For example, in the Magento system, the basic cache is different from the additional Full Page Cache (FPC). The basic cache stores individual page elements, such as queries and data, while the FPC stores entire HTML pages. This allows immediate serving of entire pages without the need to reassemble from individual parts, leading to faster page loading and reduced server load.
When we enable caching, it is important to warm up all pages before the first visit. This means pre-generating cached pages so that the first visitor does not have to wait for cache creation. The page is warmed up using so-called "cache warmers," which are scripts usually executed via cron jobs and visit all links on the page to trigger cache generation.
Although this process is time-consuming, it is crucial for ensuring optimal website or store performance, allowing for maximum sales or inquiries. I have worked on quite complex platforms, such as Magento 2 and Openmage, and managed to create a template with a perfect score for mobile devices (100/100). This shows that anything is possible if we try. Although the score is not always perfect, it is good to be at least positive (50+).
I hope you found this overview interesting and useful. I think I covered the main things that help speed up website loading, although I cannot cover everything in one article. It is important to understand both front-end improvements and server-side improvements. This includes using tools like Redis, Varnish, and OpCache, etc., which help store data and speed up website performance. At the same time, attention must be paid to server speed and proper configuration to ensure fast page loading.
If you want to see how optimization works in practice, you can check the demo versions of online stores Magento 2 and OpenMage (Magento 1.9).
