41 lines (32 loc) · 1.3 KB

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