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: 4 months ago
JSON representation
Nsk Google Developer Group webperf tools talk links, snippets and stuff
- Host: GitHub
- URL: https://github.com/hom3chuk/webdev-meetup-5
- Owner: hom3chuk
- Created: 2017-12-15T15:46:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T14:02:23.000Z (over 7 years ago)
- Last Synced: 2025-01-11T12:22:29.043Z (5 months ago)
- Topics: devtools, machmetrics, newrelic, perfmatters, performance, rum, speedcurve, taki, webperf, wpt
- Language: CSS
- Size: 90.5 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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`