Silverstripe and Core Web Vitals

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

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