Skip to content

Nsk Google Developer Group webperf tools talk links, snippets and stuff

Notifications You must be signed in to change notification settings

hom3chuk/webdev-meetup-5

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 

Repository files navigation

Nsk Google Developer Group webperf tools talk links, snippets and stuff

Video

Youtube

Slides

See slides folder

Links

Why?

Tools

Synthetic

RUM (Real User Monitoring/Measurements)

Other links

Snippets

Enable 100% sampling for RUM in GA

// This is your generic GA snippet 
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create',
  'UA-xxxxxx', // Your Universal Analytics ID
  {'siteSpeedSampleRate': 100} // <- this is the magic 🌝
);
ga('send', 'pageview');

Insert non-critical CSS and JS on Request Animation Frame

<noscript id="deferred-resources">
  <!-- Here you place non-critical resources -->
  <link rel="stylesheet" href="/style.css">
  <script src="//cdn.example.com/javaskripte.js" integrity="sha384-HeyTC39"></script>
  <!-- Google Fonts can go here too -->
</noscript>

<script>
  // Here we load'em
  var loadDeferredStyles = function() {
  var addStylesNode = document.getElementById("deferred-resources");
  var replacement = document.createElement("div");
  replacement.innerHTML = addStylesNode.textContent;
  document.body.appendChild(replacement);
  addStylesNode.parentElement.removeChild(addStylesNode);
  };

  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener("load", function() { window.setTimeout(loadDeferredStyles, 0)});
</script>

Performance.marks to fun with in FF&Chrome

  <body>
    <script> requestAnimationFrame(function(){ performance.mark('raf:body'); }); </script>
  
    <script>performance.mark('resources:jquery:before');</script>
    <script defer src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            onload="performance.mark('resources:jquery:load')"></script>
    <script>performance.mark('resources:jquery:after');</script>
    <script> requestAnimationFrame(function(){ performance.mark('raf:after-jquery'); }); </script>
  
    <script>performance.mark('resources:main.css:before');</script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
          onload="performance.mark('resources:main.css:load')">
    <script>performance.mark('resources:main.css:after');</script>
  
    <script> requestAnimationFrame(function(){ performance.mark('raf:after-css'); }); </script>
  
  </body>

Reach out

Releases

No releases published

Packages

No packages published