An open API service indexing awesome lists of open source software.

https://github.com/hom3chuk/webdev-meetup-5

Nsk Google Developer Group webperf tools talk links, snippets and stuff
https://github.com/hom3chuk/webdev-meetup-5

devtools machmetrics newrelic perfmatters performance rum speedcurve taki webperf wpt

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README

        

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

# Video
[Youtube](https://www.youtube.com/watch?v=eudKdRycuWk&feature=youtu.be)

# Slides
[See slides folder](https://github.com/hom3chuk/webdev-meetup-5/tree/master/slides)

# Links
## Why?
- [Google article with some links to research](https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/)
- [This is Success: Why 1000/100/6/50ms?](https://docs.google.com/document/d/1bYMyE6NdiAupuwl7pWQfB-vOZBPSsXCv57hljLDMV8E/edit)
- [2018: 120fps and no jank](https://dassur.ma/things/120fps/) ([Surma's tweet on 120 fps](https://twitter.com/DasSurma/status/930862317696413697))
- [Perf Audits for Blink & DevTools, CNet, Wikipedia, Time](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/edit)

## Tools
### Synthetic
- [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/) and here's a [shiny version for your boss](https://testmysite.withgoogle.com/intl/en-gb)
- [GTmetrix](https://gtmetrix.com/)
- [Pingdom](https://tools.pingdom.com/)
- [WebPageTest](https://www.webpagetest.org/) (WPT)
- Built on top of WPT: [SpeedCurve](https://speedcurve.com/) and [MachMetrics](https://www.machmetrics.com/) (disc: me and MM do webperf case studies together)

### RUM (Real User Monitoring/Measurements)
- [Google Analytics](https://analytics.google.com/analytics/web/#report/content-site-speed-overview/)
- [New Relic](https://newrelic.com/)
- [AppOptics](https://www.appoptics.com/)
- [Taki](https://takiapp.com/) (disc: I'm on the team ๐Ÿ™‹๐Ÿป)

## Other links
- [User timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)
- [Layout/Paint profiling](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en)
- [The whole web at maximum FPS: How WebRender gets rid of jank](https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/)
- [Critical rendering path Udacity course by Ilya Grigorik](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) ([GitHub](https://github.com/igrigorik))

# 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
```




// 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)});

```

## Performance.marks to fun with in FF&Chrome
```

requestAnimationFrame(function(){ performance.mark('raf:body'); });

performance.mark('resources:jquery:before');

performance.mark('resources:jquery:after');
requestAnimationFrame(function(){ performance.mark('raf:after-jquery'); });

performance.mark('resources:main.css:before');

performance.mark('resources:main.css:after');

requestAnimationFrame(function(){ performance.mark('raf:after-css'); });


```

# Reach out
- [Twitter](https://twitter.com/fast_wordpress)
- [Email](mailto:[email protected])
- [Damn Fast WordPress: the Book](https://damnfastwordpress.com/the-book/)
- Telegram `hom3chuk`