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:
Implement that necessary classes and DOM modifications in your template/CMS/SSG or whatever you use.
include the JS script in your DOM.
combine your JS files all together (concatenation) and optimize it.
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:
depend on Cloudflare
do not have control over it
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.
may do not work/changes the order or even breaks the page if you modify the DOM a lot.
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.
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.
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
You can then with my little ugly tool verfiy it works: https://code103.hotmann.de/
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).
