● What are ‘core web vitals’? ● Testing and reporting ● Basic strategies ● Silverstripe requirements ● Other useful tools ● Implementing in the real-world Tim Burt github.com/DorsetDigital
“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience
“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience
“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience
“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience
“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience
LCP – Largest Contentful Paint Tim Burt github.com/DorsetDigital https://web.dev/vitals/ “The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.”
FID – First Input Delay Tim Burt github.com/DorsetDigital https://web.dev/vitals/ “FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.”
CLS – Cumulative Layout Shift Tim Burt github.com/DorsetDigital https://web.dev/vitals/ “CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.”
● Eliminate redundant code ● Deliver images in the right format and specify dimensions ● Lazy-load whenever possible ● Prioritise visible content Tim Burt github.com/DorsetDigital Here are the headlines!
Supporting Safari & IE if ('loading' in HTMLImageElement.prototype) { //Populate the src attribute with the content of data-src and let the browser do its thing const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library to manage the loading logic const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js'; document.body.appendChild(script); }
Eliminate redundant code Tim Burt github.com/DorsetDigital ● Be careful about including default framework / library builds ● Break up resources into page and function-specific blocks ● Defer when you can
Don’t take my word for it! Tim Burt github.com/DorsetDigital ● No two sites are the same ● There is no ‘silver bullet’ solution ● Adjust, test, repeat ● Revisit once your client has been let loose!