So after reducing the Flash of Unstyled Text caused by the text re-rendering when the custom fonts load, I was still getting some flashing on the “heros” (the post banners with the abstract space images).
The first attempt I originally did was to ensure that the image element was pre-sized with the dimensions of the images, that way the renderer could have the same rect size prior to it loading. This helped the layout not shift, but didnt prevent the image from flashing on load. I tried to mitigate this a bit by setting the element background to be black, so that only the white elements in the hero flashed. This was also a bit of an improvement, but it still would flash visibly.
Then I remembered coming across the website catalog for McMaster-Carr which was going around tech circles a while ago for having some tight optimizations. This helped me recall that I could simply just prefetch the images on the recent posts when you load the home page.
Using Prefetch is much lower priority than Preload and in both optional for the browser to execute and will not impact the current page’s asset loading or rendering cycle.
It’s just a link type like this
<link rel="prefetch" as="image" href="/generated/heroes/example-post.png">Since I am using hugo, I build the recent posts lists dynamically already, so I added a prefetch to the images found in the posts alongside of it.
{{ $posts := where .Site.RegularPages "Section" "posts" }}
{{ range first 5 $posts.ByDate.Reverse }}
{{ $slug := .Title | urlize }}
<link rel="prefetch" as="image"
href="{{ printf "generated/heroes/%s.png" $slug | relURL }}">
{{ end }}This technique only makes a difference if you happen to land on my front page hank.bond/.
Where we do use Preload instead is in the base html mixin for site pages to load the base fonts that make up above-the-fold page copy. This helps make sure that no matter which page you are linked to the fonts are loaded high priority upfront and not only after loading the style sheet.