Tracking: First Paint

          
            const observer = new PerformanceObserver((list) => {
              for (const entry of list.getEntries()) {
                // `name` will be either 'first-paint' or 'first-contentful-paint'.
                const metricName = entry.name;
                const time = Math.round(entry.startTime + entry.duration);

                ga('send', 'event', {
                  eventCategory: 'Performance Metrics',
                  eventAction: metricName,
                  eventValue: time,
                  nonInteraction: true,
                });
              }
            });

            // Start observing paint entries.
            observer.observe({entryTypes: ['paint']});
          
        

Tracking: Long Tasks

            
              const observer = new PerformanceObserver((list) => {
                for (const entry of list.getEntries()) {
                  ga('send', 'event', {
                    eventCategory: 'Performance Metrics',
                    eventAction: 'longtask',
                    eventValue: Math.round(entry.startTime + entry.duration),
                    eventLabel: JSON.stringify(entry.attribution),
                  });
                }
              });

              observer.observe({entryTypes: ['longtask']});
            
          

Tracking: Time to Interactive

            
              import ttiPolyfill from './path/to/tti-polyfill.js';

              ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
                ga('send', 'event', {
                  eventCategory: 'Performance Metrics',
                  eventAction: 'TTI',
                  eventValue: tti,
                  nonInteraction: true,
                });
              });
            
          

script async attribute

            
              <script async src="foobar.js" onload="myFunction()"></script>
            
          

script defer attribute

            
              <script defer src="foobar.js" onload="myFunction()"></script>
            
          

Un-blocking rendering

            
              <link href="style.css" rel="stylesheet">
              <link href="print.css" rel="stylesheet" media="print">
              <link href="other.css" rel="stylesheet" media="(min-width: 40em)">
            
          

Use Fewer Fonts

Load Fonts Asynchronously

Progressive load above the fold

Prefetch and Preconnect

            
              <link rel="dns-prefetch" href="//www.example.com">
              <link href='https://cdn.keycdn.com' rel='preconnect' crossorigin>
            
          

Preload

            
              <link rel="preload" href="used-later.js" as="script">
              <!-- ...other HTML... -->
              <script>
                // Later on, after some condition has been met, we run the preloaded
                // JavaScript by inserting a <script> tag into the DOM.
                var usedLaterScript = document.createElement('script');
                usedLaterScript.src = 'used-later.js';
                document.body.appendChild(usedLaterScript)
              </script>
            
          

workboxjs.org