From our forthcoming ebook SEO Basics for Magento Commerce (Magento 2) by Ecommerce Solution Specialist, Jake Rainbow, this extract focuses on the importance of site speed.

Site Speed

Content Delivery Network (CDN)

What is a CDN?

A Content Delivery Network or Content Distribution Network caches content, such as HTML, CSS, javascript files and images, at the network edge using geographically distributed servers to improve the performance of a website and reduce hosting bandwidth.  

What is a CDN?
What is the SEO benefit of a CDN?

The main benefit of a CDN for SEO revolves around an improvement to the speed performance and security of a site. Google has made it clear that site speed and page speed are a key ranking factor and that the security of a site also makes a difference. A CDN helps here by:

  • Delivering content faster than a connection directly to an origin server.
  • Image compression services that reduce image load time and serve images in modern formats.
  • Allowing a site to quickly scale and deal with high traffic, minimising downtime and slower performance.
  • Acting like a bubble around an origin server by, in most cases, providing a WAF on the edge network.
Does Magento come with a CDN?

Magento Commerce (Cloud) comes with Fastly “to provide fast caching capabilities and a Content Delivery Network (CDN) for static assets”. The combination of Magento Commerce Cloud and Fastly CDN / Fastly IO / Fastly WAF provides the above SEO benefits.

What options are there for self-hosted Magento sites? 

The cloud offering by Magento is an excellent choice for hosting a Magento Commerce (Magento 2) powered website. However, if you choose to self-host then this doesn’t preclude you from using other CDN services with a Magento application. The following are potential options:

FireBear do a rundown of “The Best CDN Services And Extensions For Magento” that is worth a read.

Lazy Loading Images

What is lazy loading?

Lazy loading images is the technique of deferring the load of ‘offscreen’ images on pageview until, or just before, they are needed. You can find out more here.

Lazy loading example from
Why lazy load images?

Images can add a significant portion of data to be downloaded as part of the payload when accessing a webpage. Slow loading pages are not only frustrating for users and bad for conversion rate but also a ranking factor for search engines. By delaying the load of off-screen images the initial page speed can be quicker and therefore more likely to be user and bot friendly.

How do you lazy load images in Magento?

Although Magento has image optimisations natively, and even more options on Magento Cloud with Fastly IO, it doesn’t have lazy loading in its roster of tools.

One of the quickest ways to get lazy loading on Magento Commerce would be to install a module such as ‘Magento 2 Lazy Load Products and Images’ from WeltPixel.

Demo of lazy loading images in action at WeltPixel

The pro version of this module includes:

  • Lazy loading of product images on listing page, product page and search listing page.
  • Control over the animation speed.
  • Setting the images to load before the viewport comes into view.
  • Uploading a custom placeholder.
  • Ability to add a class to custom images to lazy loading CMS images.

Other modules such as ‘Lazy Load for Magento 2’ by Amasty are also available.