Web Performance Workshop

Web Performance Workshop for JSConf 2016. Link to workshop here. Slides here.

Agenda

Minimize the amount of bytes being sent to the client

• Step 1: Optimize images

  • Resize and compress
  • Responsive images / Imager.js

• Step 2: Optimize static assets

  • Minify CSS and JS
  • Compress CSS and JS
  • Cache CSS and JS
  • Remove unused styles
  • Reduce critical resources

• Step 3: Unblock rendering

  • Critical Rendering Path
  • Debugging the timeline
  • Use media queries on link tags
  • Inline JS
  • Inline CSS

• Step 4: Fonts

  • Rendering
  • Font formats
  • @font-face
  • Initial recommendations
  • Google fonts
  • Webfontloader
  • Shorten the Critical Rendering Path length

• Step 5: Async/Defer JavaScript

• Other

  • Service workers
  • Content Delivery Network (CDN)
  • Code optimizations