hom3chuk / voronezh-talk

Voronezh webperf tools talk links, snippets and stuff

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Voronezh webperf tools talk stuff.

Links

Why?

Google article with some links to research

Tools

Synthetic

RUM (Real User Monitoring/Measurements)

Slides

Other links

Critical rendering path Udacity course by Ilya Grigorik (GitHub)

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>

Reach out

About

Voronezh webperf tools talk links, snippets and stuff