• Simon Cox

Creating a Cloudflare Worker to lazy load images

Updated: Mar 19

Workers are available from Cloudflare and Google Chrome has native lazy loading, so I tested both together.


Chrome now natively lazy loads images and I explore how to do this with Cloudflare's Workers

Some time ago Cloud­flare announced that they were mak­ing Work­ers avail­able. More recent­ly, Google has built image Lazy Load­ing into its Chrome brows­er. The new load­ing attribute will speed up your pages in cer­tain cir­cum­stances. This is espe­cial­ly use­ful if you have a lot of images fur­ther down in the page.


Lazy load­ing allows the load­ing of images that are below the users view­port to be loaded lat­er when they scroll fur­ther down the page. As we know a fast page is going to make the vis­i­tor much more hap­py than a slow load­ing page. It is real­ly easy to imple­ment — just add the fol­low­ing code to your image tags:

<img src="path/to/you/image.jpg" alt="my fab image" loading="lazy">

So with these things in place I thought it was time to try a lit­tle exper­i­ment by com­bin­ing the two.


Set­ting up and pub­lish­ing the workers

I use Cloud­flare for this site to help with band­width and speed. Now Cloud­flare have added the abil­i­ty to cre­ate Work­ers on their CDN. This has deli­cious prospects for imple­ment­ing SEO fix­es and test on sites.


I found that Work­ers were not as sim­ple to set up as I hoped. There are tools to help though includ­ing Sloth from Salt Agency to help you write them. I opt­ed to use an inter­face to help me do the work and man­age the mod­i­fi­ca­tions so I used Spark from Strate­giq.


Set­ting up on Cloudflare

First I need­ed my web­site to be on Cloud­flare, which it has been for some time. I’m not going to run through how to do that as Spark have a great Spark FAQ’s page on this.


Note that the FAQs state that Cloud­flare Work­ers are $5 a month, and they were. Cloud­flare have now dropped this charge for the first 100,000 dai­ly requests. Luck­i­ly, my site just pops in under that.


Set­ting up the mod­i­fi­ca­tion on Spark

Ilogged into Spark and choose my site and then went to the Mod­i­fi­ca­tions tab and chose New Modification.


Set­ting up a new Mod­i­fi­ca­tion in Spark
Set­ting up a new Mod­i­fi­ca­tion in Spark

Step 1. Basic information

  • I named my Mod­i­fi­ca­tion as ​‘Lazy­load’ as it seemed appropriate.

  • For the type I chose Ele­ment Attributes.

  • For the URL pat­tern i chose one page on my site I want­ed to test this on.

  • For the Exper­i­ment, I left it at 100% as i want this to be per­ma­nent­ly on. This is a use­ful fea­ture though for some experiments!

Edit­ing the new Mod­i­fi­ca­tion in Spark
Edit­ing the new Mod­i­fi­ca­tion in Spark

Step 2. Mod­i­fi­ca­tion Setting

  • Ele­ment Selec­tor — my Gallery images have the class ‘.gallery­im­age’ and I chose that as the target.

  • Attribute name — loading

  • Posi­tion — this is where it ads the attribute I chose Append

  • Con­tent Tem­plate — a lot more com­pli­cat­ed than it sounds. This is where the attribute con­tent goes. In my case I want the image to load lazi­ly so ​‘lazy’ goes here. The scripts use this field to pop­u­late the attribute. You could have a vari­able here as Chris Green has writ­ten in an excel­lent arti­cle about adding alt text at scale. I want­ed the same attribute val­ue every­where so ​‘lazy’ it was.

I then saved my Lazy­load mod­i­fi­ca­tion and set it to Live.


Set­ting the new Mod­i­fi­ca­tion to Live in Spark
Set­ting the new Mod­i­fi­ca­tion to Live in Spark

Step 3. And publish!

Back in the Sparks Overview page, I was then pre­sent­ed with the new deploy section.


Deploy­ing the new Mod­i­fi­ca­tion to the Cloud­flare Work­er in Spark
Deploy­ing the new Mod­i­fi­ca­tion to the Cloud­flare Work­er in Spark

I hit the Deploy but­ton and named the deploy­ment, good for house­keep­ing lat­er, and I was done!


Con­firm­ing deploy­ment to the Cloud­flare Work­er in Spark
Con­firm­ing deploy­ment to the Cloud­flare Work­er in Spark

I test­ed the page and there, in the source, was the new image attribute! You can see the page test­ed on my Ding Dong Moor scratch built Railcar article.


Check­ing the page source code for the Load­ing = Lazy
Check­ing the page source code for the Load­ing = Lazy

I lat­er changed the URL pat­tern to .* to cov­er the whole site.


Con­clu­sion

As I men­tioned I could have made this change on my site in one tem­plate in a few sec­onds but this exer­cise has shown me a quick way to inject attrib­ut­es across large sites at scale and can be a real­ly use­ful way to quick­ly imple­ment or test some tech­ni­cal solu­tions with­out resort­ing to over­booked devel­op­ment resource.


Once a fix like this is in place you can pull togeth­er a busi­ness case to get the fix in per­ma­nent­ly and while you are wait­ing for the resource slot in the queue, you have already put into place a tac­ti­cal strate­gic solution!


Of course this only works with Chrome at the moment and that needs to be tak­en into con­sid­er­a­tion. Edge will fol­low soon. How­ev­er, it does not slow down any oth­er brows­er and Chrome amounts for most of my traf­fic — so I may get a bit of an advan­tage for a while.


I have not test­ed load­ing times on any of my pages as that is out­side of the scope of this exper­i­ment — but I do expect the ini­tial page load to be faster!


Thanks

I’d like to thank StrategiQ’s Simon Thomp­son for help­ing me with this as I had come a bit unstuck at one point!

289 views