I’ve been rebuilding this website with Jekyll and found myself using a few different resources as part of the process:
- Pygments - adds syntax to code blocks during the build, which are stylised using specific CSS.
- Lightbox - Loads images in a responsive overlay. Used for enlarging thumbnail sized previews of pictures.
- Label Code - A script I wrote for this site that labels the language used in a code block and adds a link to hide/show them.
- Links External - A script I wrote for this site that adds target=_blank to external links, so that they are styled and handled correctly by the browser.
- Art.js - A script I wrote for this site that you can read about here. It renders the tile patterns that you can see at on the homepage and elsewhere.
As these resources aren’t absolutely crucial to rendering the page or interacting with it, I chose to load them after the rest of the site. At first I was using async or defer on the script tags, then I decided to add a self-invoking function to the end of the body that added the relevent elements to the DOM. This improved load times and Lighthouse scores but I realised I could do more. There are some pages where the scripts or styles simply aren’t needed at all. I knew there would be conditions for loading the scripts, but these aren’t always possible to check for in the Jekyll build process. By adding a prerequisite function to the window load event, I can use the compiled DOM to check if each page needs a resource.
The script below is 965 bytes minified, but it’ll stop ≤23.6kB from being loaded unnecessarily across up to 5 requests. For larger or more complicated sites the gains could be even greater so I’ll definitely be applying this pattern to websites I make in the future.