Shane

— Optimising Largest Contentful Paint Reduce response times from the server - CDN's can help here Reduce render blocking JS and CSS - try to only load the minimum on a per page basis. Minify, inline and defer are your friend. Check usage using code coverage tool in Dev Tools

— Optimising Largest Contentful Paint - cont. Imagery - Make sure they are well optimised and compressed. Also keep an eye on those sizes. Look into image CDN's and lazyloading Preloading - You can use preload the most important elements on your page

— Optimising Largest Contentful Paint - cont. Compression - Aim for Brotli. But use Gzip as a minimum. Look into pre-rendering your assets into static pages. Plenty of tools for this especially in the React / Angular / Vue space.

— Optimising First Input Delay Minify and compress your JS, its 2020 you should have been doing this for years by now! Defer anything that is unused. If it's not needed at all on a page, remove it. Look into code splitting.

— Optimising First Input Delay Use dev tools performance tab to identify JS tasks that are taking too long to run. These will need reducing down. Code splitting can help. Look into using web workers to run some JS tasks in the background.

— Optimising Cumulative Layout Shift Make sure any element like images, video or frames elements have their dimensions applied to the HTML tags. This reserves the space and removes movement when the element loads in. Fonts - Make sure you are using font display on webfonts.

— Optimising Cumulative Layout Shift Make sure your content loads in logical, top-down order. If you're injecting content to the top of the page using JS this will have a major effect on the layout shift.