Inject HTML code to add lazy loading on server

Hello Cloudflare community,
I would to add the following script in my header: GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.. It’s a lazy load script. Though in order to be using it I need to add the lazyload class to all the img tags.

I have looked at the following app: Cloudflare Apps, but I think it doesn’t add the javascript that would add the lazyload class on Cloudflare servers but rather it would just render the code client side.

What is your recommandation to add the js server side to make sure the script works and images are lazy loaded.

Hi, first Cloudflare does have products that add LazyLoad to your website. I think Mirage (for mobile) can add this functionality or RocketLoader. But as you mentioned these are JS based implementations, which will need to run on client side and therefore create render blocking which overall will give you a little speed-boost but due to the render blocking it’s not much. And this also mean they fully run on every call, since client sided implemented.

The second thing is, that this script/repo aFarkas/lazysizes is not a Cloudflare product, nor is it related to Cloudflare in general. So asking for support of an external library/script does not make much sense, since the people that knows how to implement it best are the devs who developed it.

Anyway here a little input from me, as I would do it like this:

  1. Implement that necessary classes and DOM modifications in your template/CMS/SSG or whatever you use.
  2. include the JS script in your DOM.
  3. combine your JS files all together (concatenation) and optimize it.
  4. trigger the execution of your LazyLoad script with a passive event listener from the event of your choice, so it will create as less render blocking as possible

That should be it. But in general, I would not recommend adding removing things with these Cloudflare Apps, since you:

  1. depend on Cloudflare
  2. do not have control over it
  3. add it on the fly. Even if it does not delay a request by much it delays it, since it must do this on every call, that does not hit the cache, so for dynamically requests all the time and on every request.
  4. may do not work/changes the order or even breaks the page if you modify the DOM a lot.
  5. it forces you to add another external JS request, which does not allow you to concatenate it with othert JS requests.

Since you have not provided more info about what your site is based on etc etc, I can’t help you any further.

Have a nice day.

We’re using a third party app that prevent us of adding any library.

As you said, I have activated Mirage and Google Still recommends me to add lazy load.

So I’m trying to bypass to add it.

I do understand what you’re saying about the fact that it’s not a Cloudflare product. Though I am wondering about how could I inject some js to add the css classes before the html is sent to the client!

Thanks a lot for your help. Hope the context I provided you makes it more easier.

Please try to activate RocketLoader and see if it adds the desired functionality. Also, optimizing your images/pictures could help a lot if the pictures are big or in a not optimal format (WebP) with Cloudflare Polish.

This basically means, you will have to stick with add-on products to conceal the problem. I am not a fan of this, but lets see what we can do here.

You also load nearly all images twice, which obviously creates unnecessary load:

Also the ammount of requests are insane high:

so yes, LazyLoad should impact the performance of you site a lot.

Both have been activated and I was not able to find the speed gains I was looking for.

The only thing I see I could add would be argo tiered cache but the html rendered were mixed and I had many issues with it.

This is due to the fact, that RocketLoader gets invoked after your pictures, see:

But I don’t know why this happens, at the first call it even gets invoked after the SVGs. Anyway thats the whole problem with JS based clientsided implementation, but I think Cloudflares devs can improve it, so it invokes earlier.

@M4rt1n , oh wow okay, that’s interesting to know! Do you think it would be possible for me to add something in the header so that the rocketloaders gets invoked at first?

Is there any possible you see?

By the way would it be possible to talk directly on slack or wherever? I’m looking for people who are really good with Cloudflare

Of course there is, you can preload it using early hints and the link header. Depending on what webserver you use you have to implement it differently. I have wrote some little hints here: Early Hints | Need More Data Before Switching Over - #12 by M4rt1n

You can then with my little ugly tool verfiy it works:
Please test several times, since Cloudflare is not always triggering Early Hints … #seeHere

But in general like I always say, doing things natively is IMHO the only proper way to do it. It will work forever, you do not depend on anyone and you have control over your website.

ATM no much time left for new projects, since I am super busy, so it actually depends on the project and how much must be done and what you expect from me. But feel free to drop me a Mail at martin[at]hotmann[dot]de. If you do so, pls let me first know who you are and from where you got my contact info (community forum here).

Have a great day.

You can do this with Cloudflare Workers. It offers a HTML rewrite feature that can add lazy load attributes to img elements.

An example can be found here: How to Lazy Load Images with an Edge Worker. The example is only for images, but it might be adaptable for iframes too.

1 Like

Thanks a lot @M4rt1n @raymon ! Will try both your solutions!

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.