You can also use this article by the Filament Group. This is a browser compatible version of
Loading your CSS as…
<link rel="stylesheet" href="./../your-stylesheet-here.css"
media="print" onload="this.onload=null;this.media='all';" />
… loads it asynchronously in the background. Since it has a
media="print" attribute, the browser downloads it in the background to have ready just in case it is needed.
There are articles out there that go into more details about network waterfalls and when to use
rel="preload" if you are interested, but this should cover most use cases.
Also consider adding in a small image lazyloading library like lazysizes, and including the
loading="lazy" attribute on images that will be off screen on load, here’s a plugin for lazysizes to increase cross browser compatibility.
Also check out this checklist for Front-End performance, it’s what I use as a final go to: https://github.com/thedaviddias/Front-End-Performance-Checklist.