5/5/2021 - #culture-web #development #ecommerce #magento
by: Joffrey Henocque

Since 2020 Google has made it clear that a site’s SEO will take into account both page load time as well as its ability to load interactive content in priority and in a way that’s intuitive for the user.
These metrics are called "Core Web Vitals" and from May 2021 will be taken into account for the ranking of search results. This is of importance to e-merchants around the world as well as the various growth players in the Web and e-commerce fields.
At a time when websites take an average of 22 seconds to load completely on mobile, and when average page weights consist of 38% of images, it’s clear that one of the challenges facing e-commerce is how to significantly reduce the weight of the images on their pages.
So, what are the positive impacts of image optimization?
How can you reduce the weight of the images of your site on Magento 2?

Controlling the weight of the media

The weight of images on sites around the world is constantly increasing: +4% in 2020 compared to 2019 on mobile (+5% on Magento sites).
This is a response to the need to adapt to ever larger screen formats, and above all to attract the attention of the Internet user, who will be more engaged by visual content.

It’s therefore a good idea to favor lightweight image formats adapted to the Web.
Magento 2 accepts JPEG, PNG and more recently the WEBP format, which reduces file sizes while preserving transparency and animations.

To find out if you meet the SXO criteria, we recommend installing the "Web Vitals" plug-in on your Chrome browser.
It quickly compiles data from the three Core Web Vitals metrics:

  • Largest Contentful Paint (LCP) : time required for the browser to display the largest visible element in the display window from the moment the user tries to access the URL
  • First Input Delay (FID) : delay between the moment a user first interacts with your page (when they click on a link, press a button, or other) and when the browser responds to that interaction
  • Cumulative Layout Shift (CLS) : number of times the layout is shifted during the loading phase (score between 0 and a positive number, of which 0 would be the best score).

The size and types of your images aren’t solely responsible for this data, but contribute greatly to it (since they generally represent more than a third of the total weight of a page).
At the same time, there are tools which allow you to draw up a complete assessment of your strengths and weaknesses in terms of performance in a number of areas.

Lighthouse (or Google Pagespeed) is one of the best known.
It allows you to run a page audit and reports on your page according to 5 criteria:

  • Performance : loading time and weight
  • Accessibility : determines whether the page is understandable and readable by people with visual or motor disabilities.
  • Best practices : quality of the code and how up-to-date it is.
  • SEO : presence of content optimized for ranking in search engines.
  • PWA : presence of prerequisites for the operation of your site in Progressive Web App.

Lighthouse also highlights more specific points which need attention:

  • Optimizeable.css or .js files
  • number of requests too high
  • missing elements or attributes (web languages)
  • etc.

GTMetrix is a more popular solution with the developer community because it generates a deep and detailed audit.

More specifically, Magento also has a range of native tools which allow you to change the size and weight of your images:

  • Via the Resize Product Images option, which automatically condenses the weight and size of an image during upload. 
  • The Page Builder tool, included to Magento Open Source since the 10th of August 2021, also allows you to manage more widely the images you add to your pages and to define suitable versions for Desktop and Mobile.
  • Another trick specific to Magento 2 is: Media Gallery Image Optimization

Accessible in versions 2.4.X, this option can be fully managed from the back office. It reduces the weight of the images by replacing the image added by the administrator with an optimized copy of this image directly in its place in the front office.
This feature is normally enabled by default. If this isn’t already the case, make sure you activate it and also remember to set the minimum and maximum image sizes accepted during the upload.

The 5 benefits of image optimization

  • SEO / SXO

So, mindful of the latest Google algorithm guidelines, you carefully monitor the weight and type of image you add to your site. You generate different images for the user depending on their medium and navigation. You run audits of your pages to identify large content and resources to optimize. You do what’s necessary, relaunch new audits and see that they enhance your efforts.

OK, you're partly meeting Google's standards of best practice. But, the gain isn’t only measured by obtaining a few extra places in the search results.

  • What else?

Decreased bounce rate
According to SEO Trench, if a page takes more than 3 seconds to load, people will identify your site as slow and most will leave the site. According to Scaleflex, the probability that the user leaves the page increases by 90% when approaching the 5 seconds load time. Reducing the weight of images is therefore a key intervention to keep the user on your site.

Increase in conversion rate
A predictive model from Google highlights that the quantity of visual content and the weight (in bits) of this content influences the conversion rate in 93% of cases.
In other words, the slower the page loads, the lower the conversion rate.

Better engagement rate
Users who are satisfied with their browsing will be likely to view more content on your site and, most importantly, return to it later.

Increase in turnover
Additional traffic and an increase in the conversion rate therefore means an increase in turnover.


This results in a virtuous circle: your online store brings your customers together, and generates more engaged traffic, which is then likely to make it climb a few places in the search results.


Cloudimage: Image Accelerator and CDN

Cloudimage is a service developed by Scaleflex that focuses on the acceleration of image display.Download your site's media to cache it in their cloud server.

  • Automate the transformation of your images (cropping, resizing, adding watermark, etc.).
  • Deliver your images in the appropriate size to the user's screen.
  • Compress your images into up-to-date and web-friendly formats (WebP, JPEG) to reduce weight and speed up loadin.
  • Accelerate the delivery of your images via a multi-CDN architecture anywhere in the world.


Cloudimage allows you to measure the impact of their solution on your site.
This quick audit will also allow them to quantify your needs.
This generates a report that highlights the key points to optimize:

estimation-temps-chargement-site

At the same time, Cloudimage allows you to simulate the loading time of your images via CDN distribution around the world:



average-loging-time

To meet these growing performance challenges on Magento 2, Scaleflex has also developed a plugin

"Cloudimage Content Transformation & Acceleration" is a JS library that implements Cloudimage in the front-end code of your site and that allows you to manage the responsive display of your images according to each breaking point of your web pages.  
Thus, each image will be loaded into the correct dimension with a reduced weight depending on the screen size of the user.

When it comes to optimizing images, and there are plenty of tools to assist. We can help optimize the performance of your Magento online store, in particular via one of our flagship extensions Advanced JS Bundling Magento 2, which we  review carefully in this article.

Finally, our Certified Magento developers can conduct a full performance audit of your online store.
Get in touch with our team of Magento experts to discuss your overall performance issues.

Write your comment

Ready
for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

Contact
+339 50 66 21 38


Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg
France
SEE MAP
FR - EN