This morning I added a little widget in the footer. It says:
Performance scores:
Pagespeed: A (97%)
YSlow: B (87%)Website Carbon says this site is cleaner than 86% of web pages tested.
This website would Fit on a Floppy.
These scores aren't good enough, and I will work to improve them, but I do consider them to be a "feature" of the website. So let's talk briefly about performance, size and carbon.
I want this site to be fast. This is good for the end user. It's good for SEO rankings. It's good for my server resources.
Performance is very much tied to the size of the site, but there are additional concerns, such as lazy-loading, caching, use of CDN's, server performance, optimising queries and also optimising JS and CSS (because they don't just have to be downloaded, that have to be "read" (we say "parsed") and understood ("executed") by the browser that is loading it.
I've attempted to minimise size (see below), but probably need to do some work in other areas. I have a task open to enable Statamic's page caching, which will speed things up. And I'll probably do some tests with a CDN at some point (this is the main point of marking down on the YSlow score).
I've not done a huge amount of optimising JS and CSS because, to be honest, there isn't that much of it.
For a clean load of the homepage in an incognito window on my fast fibre broadband I'm currently getting:
These can all be improved - this is slow for the type of site - and I'll be looking into how and measuring the difference. Watch this space.
For reference the (HTTP Archive)[https://httparchive.org/reports/loading-speed?start=2016_09_01&end=latest&view=list] report shows that the median average DOMContentLoaded event in 2020 happened at 2.8s, and the median average Load event happened at 6.5s. So I'm definitely bringing the avergae down!
Closely tied to performance is the size of the site. My site doesn't have a huge amount of images (by design - literally!) and that helps a LOT with keeping the size down. But I've also done my best to minimise other assets.
I don't use large JS libraries: I've adopted AlpineJS as a small, lightweight library for adding interaction such as the mobile nav menu.
On the homepage I'm showing off a bit by using my own little chatbot library, which is written in plain JS without any additional libraries.
And to my shame I'm currently using Google fonts. But I might re-think that.
And that's about it.
The images are lazy-loaded by browsers that support the new loading="lazy" attribute. So that help, and again, there is work to do here, optimising images more and making use of responsive images.
These numbers are compressed/uncompressed:
For reference, the State of the Web study shows that the median average transfer size for web pages in 2020 was 2,007KB!
I am proud that my homepage would Fit on a Floppy disk - several times over in fact!
The effect of the internet on the planet can not be under-stated. It consumes huge amounts of power. More than the entire United Kingdom each year! And this energy is used not just in running servers, but on running the equipment that shuffles data around.
So both size and speed are relevant metrics to target to help decrease the carbon "footprint" of your website.
My site gets very few views,so my impact here is small, but I am doing my bit by optimising my site. Sadly, in it's current location, it's not using a clean, green hosting provider. This should be fixed when I can find an appropriate place to put it that doesn't cost too much.
But it's small size means that, accorting to the Website Carbon calculator it's cleaner than 86% of websites tested.
It's my goal to have a small, fast, simple, uncomplicated site. There are improvements to make, but hopefully this article and the stats shown demonstrate my desite to achieve this, how I'm going about doing it, and give you some ideas for improving these metrics for your own site.