performance.md

Web Performance

A list of web performance related stuff.

Tools

• Lighthouse
• Google Page Speed
• ySlow
• WebPageTest
• GTMetrix
• Pingdom Speed Test
• Website Grader
• Think With Google (Test My Site)
• Chrome DevTools
• WICG/longtasks
• Big Rig

Videos

• https://www.youtube.com/user/ChromeDevelopers
• https://www.youtube.com/playlist?list=PLNYkxOF6rcIBz9ACEQRmO9Lw8PW7vn0lr

Articles

• https://developers.google.com/web/fundamentals/performance/
• https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7
• https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
• https://developers.google.com/speed/docs/insights/rules

Books

• https://www.akamai.com/us/en/multimedia/documents/content/e-book/akamai-oreilly-high-performance-images-e-book.pdf

People

• Dean Hume - @DeanoHume
• Ilya Grigorik - @igrigorik
• Jake Archibald - @jaffathecake
• Paul Bakaus - @pbakaus
• Paul Lewis - @aerotwist
• Paul Irish - @paul_irish
• Todd Reifsteck - @toddreifsteck
• Yoav Weiss - @yoavweiss

Conferences & Meetups

• http://conferences.oreilly.com/velocity
• https://ldnwebperf.org/

---

Tips/Ideas

Google Page Speed

• Avoid redirects
• Remove render blocking JavaScript & CSS
• Minify CSS
• Minify JS
• Minify HTML
• Compress images (TinyPNG, Kracken, ImageOptim, etc)
• Enable GZIP/Brotli compression
• Leverage browser caching
• Serve images at the correct size/scale
• Reduce server response time < 200
• Remove query strings from static resources

Yahoos ySlow

• Minimise HTTP redirects
• Ensure no empty src="" attributes
• Avoid CSS expressions
• Remove duplicate scripts (typically jQuery)
• Reduce number of DOM elements
• Reduce DNS lookups
• Ensure no 404s exist

Misc

• Use a CDN
• Don't use CSS @import
• Server Push (HTTP/2)
• Inline SVGs if appropriate
• Reduce HTTP requests
• Load content from as few domains as possible
• Use #ids for javascript selectors where possible
• Use modern font files (WOFF2)
• Faster DNS (outdated)
• Use static HTML pages
• Inline imporant/structural css
• Pass W3C markup validation
• Be smart about third party tracking scripts
• Remove CSS/JS files from pages they're not required
• Avoid native Facebook/Twitter widgets
• Accelerated Mobile Pages (AMP)
• Drop heavy frameworks (bootstrap/foundation)
• Offline Mode
• Background Tasks (via Service Worker)
• Cache storage
• manifest.json
• Preload/Prefetch/Preconnect etc
• High performance animations
• WebP
• Make use of CSS will-change when appropriate.

Server

• Upgrade from PHP5 to PHP7 (Why: Badoo)
• Use in-memory data storage to cache (Memcached/Redis etc)
• Message Queues
• Solve the n+1 problem if it exists
• Query optimisaiton
• Use an email service (Mailgun, SparkPost, SES etc)