Web performance tools @ WebPerf.camp 2016

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
    SERGEY.CHERNYSHEV@GMAIL.COM
    

    View Slide