The website functions but the evolution will never stop.
I ran three tests (of two types) regarding the site:
- Official Lighthouse, results: 100 / 97 / 85 / 100
- webpagetest.org Lightouse , results: 67 / 97 / 93 / 100
- webhint.io scanner, results: 66 hints
Obviously I’ll aim to achieve all 100 score for Lighthouse and 0 hints for the webhint scanner in the future. The following roadmap materialized in my mind:
- I’ll change the underlying framework. Although I upgraded to Bootstrap 4.3.1 + JQuery 3.3.1, the latter contains a medium security vulnerability. My website is static, so it’s not really an issue, but a newer / better framework could help with better scores, and those achievements should translate to real world enhancements. In the post a week ago I mentioned two material links and the ZURB Foundations. Turns out that some material themes are for React,which I won’t use (just like Vue or similar frameworks), since I try to be minimalistic and this is a static website after all. I’m pretty sure now that I’ll go with the Material Design Lite framework (
MDL). The only feature I don’t see a clear equivalent in
MDLis the carousel. I’ll either get rid of the carousel, develop my own based on the old 2018 summer version of
android.com(see GitHub issue), or somehow pull in the feature from mdl-ext.
- When changing frameworks I’ll try to work with the
SCSSversion, so I can get rid of any unused fluff at an early stage. Possibly same approach with the
- I’ll definitely need to do some image optimizations. That will possibly involve generating WebP images. Or some heavy optimization. Possibly generating mobile version of the large carousel images?
- I’ll remove unused CSS by an end of build by a gulp step or possibly with a Jekyll Ruby gem.
- As far as performance goes
MDLboth uses some fonts from
fonts.googleapis.com. For a quicker first paint event it’s advisable to use font-display CSS descriptor of the
@font-faceCSS rule. However these Google fonts are pulled in by a CSS
@importdirective and Google generates the
font-facerules. Unfortunately, they don’t place any
font-displaydescriptor there though, see more about this problem from CSS-Tricks. Right now I just scraped the CSS rules from the file served by Google, but that has some hashes so may not work forever (?). For a better solution I’ll try to use one of the service worker solutions, which are kinda hacky, but we’ll see.
- Finally I’m considering the use of a 3rd party blog post CMS / API service, like Siteleaf, but only if I find some satisfactory and free service. Note to self: see list at headlesscms.org