Tweet
Tweet

Slide 1

Slide 1 text

- Core Web Vitals - Silverstripe Requirements Tim Burt github.com/DorsetDigital

Slide 2

Slide 2 text

● 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

Slide 3

Slide 3 text

What are ‘core web vitals’ ? Tim Burt github.com/DorsetDigital

Slide 4

Slide 4 text

“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Slide 5

Slide 5 text

“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Slide 6

Slide 6 text

“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Slide 7

Slide 7 text

“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Slide 8

Slide 8 text

“Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Slide 9

Slide 9 text

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.”

Slide 10

Slide 10 text

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.”

Slide 11

Slide 11 text

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.”

Slide 12

Slide 12 text

Testing and reporting Tim Burt github.com/DorsetDigital

Slide 13

Slide 13 text

● Chrome dev tools ● Lighthouse ● WebPageTest Tim Burt github.com/DorsetDigital ● Chrome user experience report ● Pagespeed Insights ● Search Console ‘Lab’ tools ‘Field’ tools

Slide 14

Slide 14 text

Tim Burt github.com/DorsetDigital Pagespeed Insights

Slide 15

Slide 15 text

Tim Burt github.com/DorsetDigital Pagespeed Insights

Slide 16

Slide 16 text

Basic Strategies Tim Burt github.com/DorsetDigital

Slide 17

Slide 17 text

Tim Burt github.com/DorsetDigital Pagespeed Insights to the rescue!

Slide 18

Slide 18 text

● 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!

Slide 19

Slide 19 text

Silverstripe Requirements Tim Burt github.com/DorsetDigital

Slide 20

Slide 20 text

SilverStripe\View\Requirements Tim Burt github.com/DorsetDigital https://api.silverstripe.org/4/SilverStripe/View/Requirements.html css() javascript() javascriptTemplate()

Slide 21

Slide 21 text

Other useful tools Tim Burt github.com/DorsetDigital

Slide 22

Slide 22 text

Community modules Tim Burt github.com/DorsetDigital Enhanced Requirements module https://github.com/DorsetDigital/silverstripe-enhanced-requirements WebP capability detection https://github.com/BiffBangPow/silverstripe-webp-detection Image formatter module https://github.com/tractorcow/silverstripe-image-formatter

Slide 23

Slide 23 text

Implementing in the real world Tim Burt github.com/DorsetDigital

Slide 24

Slide 24 text

Images Tim Burt github.com/DorsetDigital Image format and sizing $Title Use the tag
Use detection for background images

Slide 25

Slide 25 text

Images Tim Burt github.com/DorsetDigital Lazy loading $Title Native support

Slide 26

Slide 26 text

Images Tim Burt github.com/DorsetDigital Coverage

Slide 27

Slide 27 text

Images Tim Burt github.com/DorsetDigital Lazy loading $Title 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); }

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Eliminate redundant code Tim Burt github.com/DorsetDigital My build pipeline

Slide 30

Slide 30 text

Eliminate redundant code Tim Burt github.com/DorsetDigital My build pipeline

Slide 31

Slide 31 text

Prioritise visible content Tim Burt github.com/DorsetDigital Consider moving core CSS inline

Slide 32

Slide 32 text

Prioritise visible content Tim Burt github.com/DorsetDigital Consider moving core functionality inline Requirements::css('themes/main/client/dist/css/core.css', '', ['inline' => true]); Requirements::javascript('themes/main/client/dist/javascript/core.js', ['inline' => true]); (Uses enhanced requirements module)

Slide 33

Slide 33 text

Preload and Push! Tim Burt github.com/DorsetDigital Give the browser a hand protected function init() { parent::init(); $preload = HTML::createTag('link', [ 'rel' => 'preconnect', 'href' => 'https://use.typekit.net' ]); $preload .= HTML::createTag('link', [ 'rel' => 'preconnect', 'href' => 'https://p.typekit.net', 'crossorigin' => 'anonymous' ]); Requirements::insertHeadTags($preload); Requirements::css('https://use.typekit.net/eor1njj.css', '', ['preload' => true]); Requirements::javascript('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', ['type' => false]); Requirements::javascript('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js', ['type' => false]); Requirements::css('themes/main/client/dist/css/common.css', '', ['push' => true]); Requirements::javascript('themes/main/client/dist/javascript/lazyload_config.js', ['inline' => true, 'type' => false]); Requirements::javascript('themes/main/client/dist/javascript/core.js', ['inline' => true]); Requirements::javascript('themes/main/client/dist/javascript/common.js', ['type' => false, 'async' => true, 'defer' => true]); Requirements::css('themes/main/client/dist/css/core.css', '', ['inline' => true]); } (Uses enhanced requirements module)

Slide 34

Slide 34 text

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!

Slide 35

Slide 35 text

Happy optimising! Tim Burt github.com/DorsetDigital