$30 off During Our Annual Pro Sale. View Details »

Silverstripe and Core Web Vitals

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

Tim

September 30, 2021
Tweet

Other Decks in Technology

Transcript

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

    View Slide


  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Testing and reporting
    Tim Burt
    github.com/DorsetDigital

    View Slide


  13. Chrome dev tools

    Lighthouse

    WebPageTest
    Tim Burt
    github.com/DorsetDigital

    Chrome user experience report

    Pagespeed Insights

    Search Console
    ‘Lab’ tools
    ‘Field’ tools

    View Slide

  14. Tim Burt
    github.com/DorsetDigital
    Pagespeed Insights

    View Slide

  15. Tim Burt
    github.com/DorsetDigital
    Pagespeed Insights

    View Slide

  16. Basic Strategies
    Tim Burt
    github.com/DorsetDigital

    View Slide

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

    View Slide


  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!

    View Slide

  19. Silverstripe Requirements
    Tim Burt
    github.com/DorsetDigital

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  24. Images
    Tim Burt
    github.com/DorsetDigital
    Image format and sizing




    Use the tag

    Use detection for background images

    View Slide

  25. Images
    Tim Burt
    github.com/DorsetDigital
    Lazy loading




    Native support

    View Slide

  26. Images
    Tim Burt
    github.com/DorsetDigital
    Coverage

    View Slide

  27. Images
    Tim Burt
    github.com/DorsetDigital
    Lazy loading


    loading=”lazy” width="$Image.Width" height="$Image.Height">

    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);
    }

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  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)

    View Slide

  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!

    View Slide

  35. Happy optimising!
    Tim Burt
    github.com/DorsetDigital

    View Slide