After yesterday's Lighthouse changes going live you probably want to know how to optimise for the new metrics which are
Largest contentful paint
Total Blocking Time / First Input Delay
Cumulative Layout Shift
Here is a thread with some quick pointers.
#sitespeed #webperf #ux
Largest contentful paint
Total Blocking Time / First Input Delay
Cumulative Layout Shift
Here is a thread with some quick pointers.
#sitespeed #webperf #ux
— 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
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
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.
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.
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.
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.
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.
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.
Plenty of tips there, I'll share more when I have them!
