/web-performance-workshop

:hourglass: Web Performance Workshop for JSConf 2016

MIT LicenseMIT

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