Site speed slow on mobile

@traceyw I did a little research on the newer lazy load options

  1. [Live Demo](Title)
  2. Lozad.js | lozad.js

This only works if you can omit the image src attribute which can only be done with custom code loading image assets.

A better solution is just use native lazy loading available in Chrome, Firefox, MS Edge (current), and soon Safari. Just add the custom loading="lazy" attribute to images. Works great with Webflow.

4 Likes

@webdev
I have just been reading about this. Nice that Browsers are becoming more analogous.

@webdev how do I add loading=“lazy” to images?

@traceyw- It is just a custom attribute added to an image. See image attachment.


If you need an image to load first add “eager” instead of “lazy” which you would use on all subsequent images (especially below the fold).

@webdev I’m looking for a similar solution. Would this work on a background image? Where would you add the attribute?

@davidjayukay - Does not work on background images since they are defined in CSS.

Webflow uses max-width media queries which means the page on mobile has to be repainted. That’s why Webflow websites always score noticeably lower for mobile page speed.