Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web performance tools @ WebPerf.camp 2016

Web performance tools @ WebPerf.camp 2016

Sergey Chernyshev

July 10, 2016
Tweet

More Decks by Sergey Chernyshev

Other Decks in Technology

Transcript

  1. WEB PERF CAMP
    PROJECT
    DATE CLIENT
    JULY 10, 2016
    WEB PERFORMANCE TOOLS
    SERGEY CHERNYSHEV

    View Slide

  2. APM & LOAD TESTING
    SCALE VS SPEED

    View Slide

  3. WPO Tools
    Performance Analysis

    Rules & Best Practices

    Synthetic

    RUM

    Browser profilers

    Optimization

    Build tools

    Image optimization

    AMD, -fill

    Delivery, CDNs, FEO

    View Slide

  4. WPO ANALYSIS
    AND MONITORING
    FINDING PROBLEMS

    View Slide

  5. RULES & BEST PRACTICES
    YSLOW, PAGESPEED INSIGHTS, SHOWSLOW, GTMETRICS

    View Slide

  6. RULES &
    BEST
    PRACTICES
    GOOGLE
    PAGE SPEED
    INSIGHTS SERVICE

    View Slide

  7. SYNTHETIC TESTING
    WEBPAGETEST.ORG

    View Slide

  8. TRACK
    METRICS
    OVER TIME
    SHOWSLOW

    View Slide

  9. RUM
    REAL USER MEASUREMENT
    BOOMERANG JS

    View Slide

  10. BROWSER PROFILING
    CHROME DEV TOOLS

    View Slide

  11. OPTIMIZATION
    SPEEDING THINGS UP

    View Slide

  12. BUILD PROCESS
    GRUNT, GULP & CO
    Combine, minify JS & CSS
    Manage URLs (CDNs, cache)
    Modular JS, OOCSS
    Optimize images
    grunt-contrib-compass
    grunt-contrib-requirejs

    View Slide

  13. BUILD PROCESS
    EMBED QUALITY TESTING
    grunt-perfbudget

    View Slide

  14. IMAGE
    OPTIMIZATION
    JPEGMINI, COMPRESSOR.IO & CO

    View Slide

  15. PAGE LOADING
    IMAGES, SCRIPTS, ETC
    -fill
    Require.JS
    Lazy loaders

    View Slide

  16. GZIP, CACHE, CDN & FEO
    MOD_PAGESPEED, VARNISH, CDN

    View Slide

  17. @SERGEYCHE
    SERGEYCHERNYSHEV.COM
    [email protected]

    View Slide