Living On The Edge
25 Aug 2019When I meet a web professional who does not use CloudFlare it's like meeting a time traveler from the past. CloudFlare offers a lot more than traditional DNS hosting:
- An SSL certificate
- Hiding your server's IP address from attackers
- Denial of Service attack prevention
- A Content Delivery Network that caches website files close to visitors
- Built-in page optimisation tools
- A Web Application Firewall to keep hackers away from your server
The protection and Web Application Firewall has proven itself invaluable for the websites I manage.
As you know, speed is of critical importance to a website, both for user experience and for Google ranking. So I identified the tasks that were potentially slow on web servers and moved them into Cloudflare Workers where they could be performed at an unimaginable scale. I'm talking rooms full of computers like this:
I will describe one example here - image scaling/resizing.
Resizing an image seems like a mundane task, but it is very processor intensive. To maintain quality, each pixel needs to be compared to those around it and a suitable algorithm used to determine what to insert or remove. It also requires a lot of RAM to load the image and build the resized version. For banners or backgrounds that can put a lot of stress on any computer if they are requested by a lot of visitors in a short period of time.
I built a CloudFlare Worker that takes care of this by doing that work on external computers instead of the web server. I then attached that Worker to a subdomain that is dedicated to storing images (and attachments) for each site. For TimelineCMS sites that means timelinecms-library.domain.com and for WordPress sites wp-uploads.domain.com. For simplicity I made it so that all I had to do is add parameters to an image to trigger the Worker. Adding "width=x" and/or "height=y" to the image's URL will trigger the Worker.
Here is an example. You can experiment with this if you would like. This picture is sitting in an area that the image resizing CloudFlare Worker is monitoring.
https://timelinecms-library.gmacinternet.com.au/uploads/amiga.jpg
Now try these links that have width and/or height added to them:
https://timelinecms-library.gmacinternet.com.au/uploads/amiga.jpg?width=300
https://timelinecms-library.gmacinternet.com.au/uploads/amiga.jpg?height=300
https://timelinecms-library.gmacinternet.com.au/uploads/amiga.jpg?width=300&height=300
Feel free to change the width and height values and watch what happens.
Image resizing does not get much simpler!
Plus it is FAST.
The image resize is done on request and then saved for the next time it is needed.
Yes, it also works for WordPress - no plugin or code changes required.
There are on-line tools that can do the same thing. I have used Cloudinary a lot before which imo is one of the best. The big difference between a CloudFlare Worker and an external tool/website is that the domain for the image does not change. This is far better for SEO since Google thinks the image is part of your website and not part of somebody else's if the domain name is the same.
Image Resizing is just one example of the CloudFlare Workers I have built (or have in progress) to speed up my TimelineCMS and WordPress websites. Note that Workers can not be shared between CloudFlare accounts so I can not make them available to a site unless the DNS is hosted inside my environment. Also note that there is a cost. I have included that in the amount that my customers already pay so the only change they notice is a faster website.
There is a lot of buzz in the web industry about "serverless" computing. This is an example of that in action - taking CPU and RAM intensive tasks and getting massive server farms to do them instead of stressing your web server. But this is really just scratching the surface. Web development has changed a lot. If your web developer isn't doing this kind of work then you are missing out.
