Redesign and Performance led Development. What Matters?
Like all of us recently, I had varying degrees of time to ponder life itself. Amongst this navel-gazing, I shifted focus back to my site. It was dormant for several years now. Not for want of trying as I had created about 10 versions of it locally.
It had been initially running on ExpressionEngine, and the most recent version was Statamic. I loved Statamic, don't get me wrong, but these days I use Craft CMS all day long, so I decided to switch my focus to using that.
In those original versions that never saw the light of day, I had spent countless hours perfecting and trying different setups of frameworks, libraries and designs. They were all useful as I learnt something different each time, but it was holding me back from shipping what I wanted.
Recently I had been experimenting with TailwindCSS for a client and was perfect for the design I had in mind without getting in my way.
Design and Content
I used to write a lot, but this habit got lost along the way with microblogging. So I still do large format articles and now have a Notes section where I want to say something in between the latter and a tweet.
My photography was spread between Flickr, Instagram, and another Fujifilm focused site I had. Now I have a dedicated space for it in photography.
The homepage I'm not happy with and had spent a few days struggling to get a masonry type design going that I was never happy with. It will be redesigned in the future when I have some more content up
Grammarly helped me realize I still write like a teenager and can't spell for shit. It was such an eye-opener that I subscribed for a year!
Performance
Performace is never one thing and always a combination of things. For many reasons, you won't get 100% depending on your metric. You may have managed hosting or, a version of PHP may be too old or even a client budget. All choices I made so that I eliminated as many obstacles in the way of performance as possible.
Here are the details that helped me reach 100%
Complete control over my hosting
I had flip-flopped over hosting for a long time but decided to go back to Digital Ocean, of which I once experimented. My droplet is Ubuntu 18+ and all very easy to setup. The Digital Ocean documentation is great and a excellent way of getting your toes wet if you had never set up a server previously.
Setting up a droplet allowed me to get under the hood of Nginx and tweak using Andrew Welch's nginx-craft I was able to configure PHP the way I wanted and every other tweak I have picked up over the years.
CDN for my assets
I shied away from AWS as, to be honest, was a pita at best of times. I used Digital Ocean Spaces for all my assets. It was a CDN as well as storage, so perfect for me. Effortless setup. DigitalOcean Spaces Volume Plugin was available for Craft CMS along with Imager X Storage Driver for DigitalOcean Spaces.
Blitz and Cloudflare
Blitz is a Craft CMS gamechanger. There was always a final step in the performance that was unreachable through a budgetary means when it came to performance in Craft CMS. Blitz filled this gap and provided the site with static page caching further enhanced by my server tweaks and using Cloudflare as a reverse proxy. The average load speed of my pages is in and around 24ms depending on where you live.
As reluctant as I am to put all my eggs in one basket I acquired the services of Cloudflare as a reverse proxy for Blitz and also switched on the numerous other toggles inside there to make those extra performance tweaks.
Cookieless
I very much wanted the site to be cookieless. Fathom caught my eye a long time ago and just gave me the analytics I was interested in. Fathom reminded me of Mint from all those years ago. I'm not too fond of Disqus and all the weight it comes with, so I have Verbb's Comments Plugin running. Try it out below!
Measurement Metrics
I mostly relied on Lighthouse to give me clues as to what I could improve. Adding a custom column for Cloudflare to my Network Inspector helped also. Ben Croker's new plugins Blitz Recommendations and Elements Panel were also a massive help.
Plugins
I don't have a ton of plugins which is a good mantra for any developer. These are the ones I leaned on along with any I mentioned above.
Asset Rev, Async Queue, Express Forms, Imager X, Instagram Feed, Mailgun, Recipe, redactor, Redactor nofollow link, SEOmatic, Sprout Redirects, Tags, oEmbed and Typogrify.
Has anybody else taken the recent free time to redesign their site? Have your new circumstances changed how you approached it? How did you balance performance and content? What matters most to you?