{"id":19844885,"url":"https://github.com/hom3chuk/webdev-meetup-5","last_synced_at":"2025-08-01T11:36:42.159Z","repository":{"id":75039443,"uuid":"114386419","full_name":"hom3chuk/webdev-meetup-5","owner":"hom3chuk","description":"Nsk Google Developer Group webperf tools talk links, snippets and stuff","archived":false,"fork":false,"pushed_at":"2017-12-27T14:02:23.000Z","size":94938,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-11T12:22:29.043Z","etag":null,"topics":["devtools","machmetrics","newrelic","perfmatters","performance","rum","speedcurve","taki","webperf","wpt"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hom3chuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-15T15:46:30.000Z","updated_at":"2019-07-04T17:18:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a95b45a-d0bb-4d04-8e09-3249d1b50d1c","html_url":"https://github.com/hom3chuk/webdev-meetup-5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hom3chuk%2Fwebdev-meetup-5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hom3chuk%2Fwebdev-meetup-5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hom3chuk%2Fwebdev-meetup-5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hom3chuk%2Fwebdev-meetup-5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hom3chuk","download_url":"https://codeload.github.com/hom3chuk/webdev-meetup-5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241223902,"owners_count":19929811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devtools","machmetrics","newrelic","perfmatters","performance","rum","speedcurve","taki","webperf","wpt"],"created_at":"2024-11-12T13:05:53.210Z","updated_at":"2025-02-28T20:15:32.959Z","avatar_url":"https://github.com/hom3chuk.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Nsk Google Developer Group webperf tools talk links, snippets and stuff\n\n# Video\n[Youtube](https://www.youtube.com/watch?v=eudKdRycuWk\u0026feature=youtu.be)\n\n# Slides\n[See slides folder](https://github.com/hom3chuk/webdev-meetup-5/tree/master/slides)\n\n# Links\n## Why?\n- [Google article with some links to research](https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/)\n- [This is Success: Why 1000/100/6/50ms?](https://docs.google.com/document/d/1bYMyE6NdiAupuwl7pWQfB-vOZBPSsXCv57hljLDMV8E/edit)\n- [2018: 120fps and no jank](https://dassur.ma/things/120fps/) ([Surma's tweet on 120 fps](https://twitter.com/DasSurma/status/930862317696413697))\n- [Perf Audits for Blink \u0026 DevTools, CNet, Wikipedia, Time](https://docs.google.com/document/d/1K-mKOqiUiSjgZTEscBLjtjd6E67oiK8H2ztOiq5tigk/edit)\n\n## Tools\n### Synthetic\n- [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)\n- [GTmetrix](https://gtmetrix.com/)\n- [Pingdom](https://tools.pingdom.com/)\n- [WebPageTest](https://www.webpagetest.org/) (WPT)\n  - Built on top of WPT: [SpeedCurve](https://speedcurve.com/) and [MachMetrics](https://www.machmetrics.com/) (disc: me and MM do webperf case studies together)\n\n### RUM (Real User Monitoring/Measurements)\n- [Google Analytics](https://analytics.google.com/analytics/web/#report/content-site-speed-overview/)\n- [New Relic](https://newrelic.com/)\n- [AppOptics](https://www.appoptics.com/)\n- [Taki](https://takiapp.com/) (disc: I'm on the team 🙋🏻)\n\n## Other links\n- [User timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)\n- [Layout/Paint profiling](https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en)\n- [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/)\n- [Critical rendering path Udacity course by Ilya Grigorik](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/) ([GitHub](https://github.com/igrigorik))\n\n# Snippets\n## Enable 100% sampling for RUM in GA\n\u003cpre\u003e\n// This is your generic GA snippet \n(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n\nga('create',\n  'UA-xxxxxx', // Your Universal Analytics ID\n\u003cb\u003e  {'siteSpeedSampleRate': 100} // \u003c- this is the magic 🌝\u003c/b\u003e\n);\nga('send', 'pageview');\n\u003c/pre\u003e\n\n## Insert non-critical CSS and JS on Request Animation Frame\n```\n\u003cnoscript id=\"deferred-resources\"\u003e\n  \u003c!-- Here you place non-critical resources --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/style.css\"\u003e\n  \u003cscript src=\"//cdn.example.com/javaskripte.js\" integrity=\"sha384-HeyTC39\"\u003e\u003c/script\u003e\n  \u003c!-- Google Fonts can go here too --\u003e\n\u003c/noscript\u003e\n\n\u003cscript\u003e\n  // Here we load'em\n  var loadDeferredStyles = function() {\n  var addStylesNode = document.getElementById(\"deferred-resources\");\n  var replacement = document.createElement(\"div\");\n  replacement.innerHTML = addStylesNode.textContent;\n  document.body.appendChild(replacement);\n  addStylesNode.parentElement.removeChild(addStylesNode);\n  };\n\n  var raf = requestAnimationFrame || mozRequestAnimationFrame ||\n    webkitRequestAnimationFrame || msRequestAnimationFrame;\n  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });\n  else window.addEventListener(\"load\", function() { window.setTimeout(loadDeferredStyles, 0)});\n\u003c/script\u003e\n```\n\n## Performance.marks to fun with in FF\u0026Chrome\n```\n  \u003cbody\u003e\n    \u003cscript\u003e requestAnimationFrame(function(){ performance.mark('raf:body'); }); \u003c/script\u003e\n  \n    \u003cscript\u003eperformance.mark('resources:jquery:before');\u003c/script\u003e\n    \u003cscript defer src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\"\n            onload=\"performance.mark('resources:jquery:load')\"\u003e\u003c/script\u003e\n    \u003cscript\u003eperformance.mark('resources:jquery:after');\u003c/script\u003e\n    \u003cscript\u003e requestAnimationFrame(function(){ performance.mark('raf:after-jquery'); }); \u003c/script\u003e\n  \n    \u003cscript\u003eperformance.mark('resources:main.css:before');\u003c/script\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css\"\n          onload=\"performance.mark('resources:main.css:load')\"\u003e\n    \u003cscript\u003eperformance.mark('resources:main.css:after');\u003c/script\u003e\n  \n    \u003cscript\u003e requestAnimationFrame(function(){ performance.mark('raf:after-css'); }); \u003c/script\u003e\n  \n  \u003c/body\u003e\n```\n\n# Reach out\n- [Twitter](https://twitter.com/fast_wordpress)\n- [Email](mailto:hom3chuk+perf@gmail.com)\n- [Damn Fast WordPress: the Book](https://damnfastwordpress.com/the-book/)\n- Telegram `hom3chuk`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhom3chuk%2Fwebdev-meetup-5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhom3chuk%2Fwebdev-meetup-5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhom3chuk%2Fwebdev-meetup-5/lists"}