Make your website load faster

The Editor offers you a range of out-of-the-box tools to improve how fast your published website loads. Enabling these will also have a positive effect on your website's Google PageSpeed Insights score.

Access the speed optimization tools in the Editor > Settings > Website load speed

0__overview-3.jpg

 

Screenshot_2020-10-30_at_09.00.36.png

 

  When are these settings activated?

Please note that the speed optimization settings only apply on your published website. It's not possible to preview them on the Editor itself or in Preview mode.

 

Minimization of render blocking requests

Optimize the output of styles to have as few render blocking requests as possible. For example, this setting makes the default browser font load and thereby ensures that the page is readable before your selected font(s) load. This helps improve the initial load speed of your pages.

This setting additionally defers the loading of Map modules on your website. This improves your page's initial load speed as off-screen maps won't be loaded until the visitor is about to view them.

 

Potential drawbacks

Using this minimization technique may sometimes result in elements performing a small "jump" if the styles don't finish loading before the visitor views them. 

 

Lazy loading of images

Lazy loading ensures that images present on your website don't load until they are visible on the visitor's screen which helps save bandwidth and improves page loading time as well as the overall user experience. Eager loading is the loading technique by default; with eager loading, all related elements on the page are loaded whether they are visible on the screen or not, which might increase the overall loading time.

lazy_loading.gif


Lazy loading images impacts the way images load on the following modules and pages: 


Website

  • Gallery
  • Image
  • Image list
  • Instagram feed
  • Price list (if you've added images)


Blog

  • Blog catalog
  • Blog post page (if you've added images)


E-commerce

  • Product catalog
  • Product page
  • Product checkout pages

 

 

Prefetch internal pages

Improve your page load speed by 20-30% by utilizing the prefetching technology that predicts which link(s) a visitor is likely to click on next and downloads the page assets (HTML) in advance.

Read all about prefetching here.

 

 

Deferred loading of unused CSS

Delay the loading of styles (CSS) for certain elements on your website in order to speed up the initial load. As some style sheets may be particularly heavy, deferring their loading means that the visitor's network will see a lighter load and can render the website faster.

Deferred loading applies to the style sheets for the following modules:


Website

  • Gallery
  • Image list
  • Instagram feed


E-commerce

  • Product catalog
  • Shop filter

 

With deferred loading enabled, these elements' styles won't load until the visitor is scrolling down and about to view them.

Example of deferred loading of CSS on a page with a Gallery module:

ezgif.com-gif-maker__1_.gif

 

Potential drawbacks

The deferred loading technique may sometimes result in elements performing a small "jump" if the style sheets don't finish loading before the visitor views them.

Was this article helpful?
0 out of 0 found this helpful