Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Silverstripe and Core Web Vitals

D4287a1b4aecd2f7300ab0be6d502792?s=47 Tim
September 30, 2021

Silverstripe and Core Web Vitals

StripeCon '21 talk covering Google's Core Web Vitals, and implementing solutions within Silverstripe's Requirements class

D4287a1b4aecd2f7300ab0be6d502792?s=128

Tim

September 30, 2021
Tweet

Transcript

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

  2. • 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
  3. What are ‘core web vitals’ ? Tim Burt github.com/DorsetDigital

  4. “Evaluating page experience for a better web” Tim Burt github.com/DorsetDigital

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

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

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

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

    https://developers.google.com/search/blog/2020/05/evaluating-page-experience
  9. 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.”
  10. 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.”
  11. 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.”
  12. Testing and reporting Tim Burt github.com/DorsetDigital

  13. • Chrome dev tools • Lighthouse • WebPageTest Tim Burt

    github.com/DorsetDigital • Chrome user experience report • Pagespeed Insights • Search Console ‘Lab’ tools ‘Field’ tools
  14. Tim Burt github.com/DorsetDigital Pagespeed Insights

  15. Tim Burt github.com/DorsetDigital Pagespeed Insights

  16. Basic Strategies Tim Burt github.com/DorsetDigital

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

  18. • 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!
  19. Silverstripe Requirements Tim Burt github.com/DorsetDigital

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

  21. Other useful tools Tim Burt github.com/DorsetDigital

  22. 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
  23. Implementing in the real world Tim Burt github.com/DorsetDigital

  24. Images Tim Burt github.com/DorsetDigital Image format and sizing <picture> <source

    type="image/webp" srcset="$Image.Format('webp').URL"> <img alt="$Title" class="img-fluid" src="$Image.URL" width="$Image.Width" height="$Image.Height"> </picture> Use the <picture> tag <div class="hero" style="background-image: url(' <% if $WebPSupport%> $BackgroundImage.ScaleMaxWidth(1920).Format('webp').URL <% else %> $BackgroundImage.ScaleMaxWidth(1920).URL <% end_if %> ')"></div> Use detection for background images
  25. Images Tim Burt github.com/DorsetDigital Lazy loading <picture> <source type="image/webp" srcset="$Image.Format('webp').URL">

    <img alt="$Title" class="img-fluid" src="$Image.URL" loading=”lazy” width="$Image.Width" height="$Image.Height"> </picture> Native support
  26. Images Tim Burt github.com/DorsetDigital Coverage

  27. Images Tim Burt github.com/DorsetDigital Lazy loading <picture> <source type="image/webp" srcset="$Image.Format('webp').URL">

    <img alt="$Title" class="img-fluid" data-src="$Image.URL" src=”” loading=”lazy” width="$Image.Width" height="$Image.Height"> </picture> 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); }
  28. 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
  29. Eliminate redundant code Tim Burt github.com/DorsetDigital My build pipeline

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

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

    inline
  32. 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)
  33. 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)
  34. 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!
  35. Happy optimising! Tim Burt github.com/DorsetDigital