PerfMatters

https://perfmattersconf.com/

Sponsors

• appdepar
• appdynamics
• catchpoint
• cloudinary
• fastly
• imagecon
• speedcurve
• white coat captioning

Pinterest

• 1M+ request per second
• dedicated performance team

Regression protection

• perf environment to run automation integration tests (100 times)
• calculate 90th percentile of Pinner Wait Time (PWT)
• binary search (git bisect) to detect which commit introduced the regression

React

• create a <LazyLoader /> component
• with http2 bundling is still optimal
• img sprite for fold images would help
• <link as="script">

Perf Timings

slides

• RUM (Real User Metrics)
• Long Tasks > 50ms

Tools

• Boomerang
• Bucky

Kimberly Munoz (Slack)

semantic HTML for focus management (tab)

• focus on the DOM order instead of using JS
• use <button> & <select> instead of building your custom with <div>
• use modular CSS like CFPB modular framework
• use html tags like nav, main, head, and aside
• w3c wai-aria-practices

MarcySutton (Deque Systems)

• Deque tools for accessibility
• Axe Core OSS tool
• jsdom npm package for accessibility unit testing
• eslint-plugin-jsx-a11y
• egghead accessibility course

Jem @jemyoung (Netflix)

• buffer with generator + while(true) for paralellizing http requests but start serving them as soon as the first request is complete.

@linclark @codecartoons (Mozilla)

Parallelize as much as possible to be quicker

• webworkers
• shared array buffers
• WebAssembly + React

PWA - slides

• cost of loading
• The Web App Manifest
• The Offline Cookbook
• The PRPL Pattern
• eliminate unused code
• traced svg (sharp) from Gatsby
• lazyload img -> use mini versions of img so it looks blurry as a placeholder
• uglify.js to remove unused code
• webpack tree shaking
• webpack bundle analyzer
• npm sw-precache and sw-toolbox

Simon Hearne

sitespect for ABTest

timinig-Allow-Origin is required for Resource Timing

third-party-cpu-abuser 3rd party vendor uses a lot of CPU

webpagetest querystring data=true returns json

third-party-impact

RequestMap

Akamai mPulse

https://report-uri.com/

CSP report-only

catchpoint.com to analyze third party

CSP strict dynamic

cryptojacking

github mikewest

perfplanet service workers

google-webfonts-helper

proxy third party thorough your CDN