Web Performance Workshop

Getting started

Launch the local server by running gulp and open http://localhost:8080

> npm install
> gulp

[21:41:55] Using gulpfile ~\Documents\GitHub\web-performance-workshop\gulpfile.js
[21:41:55] Starting 'connect'...
[21:41:55] Finished 'connect' after 16 ms
[21:41:55] Starting 'default'...
[21:41:55] Finished 'default' after 7.11 μs
[21:41:55] Server started http://localhost:8080

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
• Trained to thrill
• Offline wikipedia
• Content Delivery Network (CDN)
• Code optimizations