Nsk Google Developer Group webperf tools talk links, snippets and stuff
- Google article with some links to research
- This is Success: Why 1000/100/6/50ms?
- 2018: 120fps and no jank (Surma's tweet on 120 fps)
- Perf Audits for Blink & DevTools, CNet, Wikipedia, Time
- Google PageSpeed and here's a shiny version for your boss
- GTmetrix
- Pingdom
- WebPageTest (WPT)
- Built on top of WPT: SpeedCurve and MachMetrics (disc: me and MM do webperf case studies together)
- Google Analytics
- New Relic
- AppOptics
- Taki (disc: I'm on the team 🙋🏻)
- User timing API
- Layout/Paint profiling
- The whole web at maximum FPS: How WebRender gets rid of jank
- Critical rendering path Udacity course by Ilya Grigorik (GitHub)
// 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');
<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>
<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>
- Damn Fast WordPress: the Book
- Telegram
hom3chuk