Front End Optimization, 'The Cloud' can help you!

1,274 views

Published on

Come possiamo rendere la user interaction delle nostre web application ottimale? Perfezionando tutto quello che riguarda l'interazione che il client ha con le risorse disponibili in remoto. Vedremo quali sono i principali aspetti da prendere in considerazione, le ottimizzazioni attuabili e come queste possono essere messe in atto sfruttando ciò che i principali cloud providers ci mettono a disposizione, ma sopratutto i principali limiti di queste soluzioni ed i workaround che possiamo mettere in atto per ovviarvi.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,274
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Front End Optimization, 'The Cloud' can help you!

  1. 1. FRONT END OPTIMIZATION, 'THE CLOUD' CAN HELP YOU! CLOUDPARTY 2014 - BOLOGNA Created by Marco Vito Moscaritolo / @mavimo
  2. 2. Marco Vito Moscaritolo Web Developer @mavimo mavimo@gmail.com Founder & Dev @ Agavee
  3. 3. Intro Anatomy of a page request Frontend optimization rules Using cloud services Demo References
  4. 4. INTRO
  5. 5. PAGE WEIGHT & REQEST NUMBER INCREASE Page weight grows ~30% year-over-year
  6. 6. WHAT USERS THINK? t < 0.1s Instant 0.1s < t < 0.3s Small perceptible delay 0.3s < t < 1s Machine is working 1s < t < 10s Linkely mental context switch t > 10s Task is abbandoned
  7. 7. WHAT I NEED TO WORK ON PERFORMANCE? % conversions for every second reduced in specified range: from 15 seconds to 7 seconds from seconds 7 to 5 from seconds 4 to 2 Reduce from 10s to 3s increase conversion rate.
  8. 8. ANATOMY OF A WEB REQUEST
  9. 9. SINGLE REQUEST
  10. 10. PAGE REQUEST TREE
  11. 11. BROWSER RENDERING ENGINE FLOW
  12. 12. PAGE RENDERING TIMELINE DOM content loaded DOM load event
  13. 13. FRONTEND OPTIMIZATION RULES
  14. 14. REDUCE DATA TO DOWNLOAD Compress content (gzip) Minify JS Compress CSS Image optimization
  15. 15. REDUCE NUMBER OF REQUEST Aggregate CSS Aggregate JS Sprite style images Use service to include libraries/fonts
  16. 16. OPTIMIZE REQUESTS Use separate domain for assets Use a CDN Local caching
  17. 17. CODE OPTIMIZATION Postpone Javascript execution Reduce number of DOM elements Reduce deep path in CSS selectors
  18. 18. USING CLOUD SERVICES
  19. 19. CONTENT DELIVERY (1) Using public CDN services like: //google.com/fonts //jsdelivr.com //ajax.googleapis.com //ajax.aspnetcdn.com //netdna.bootstrapcdn.com
  20. 20. CONTENT DELIVERY (2) Host private file in CDNs like: Cloud Files + Akamai S3 + CloudFront Google Cloud Storage
  21. 21. IMAGE OPTIMIZATION Reduce bandwidth consumption: resrc.it cloudinary.com
  22. 22. CONTENT OPTIMIZATION Some service manipulate your content to optimize client side processing like Google Page Speed (beta)
  23. 23. TIPS & TRICKS Set expire heades Compress data BEFORE upload on cloud storage Lazy loading images You need to pay per request, bandwidth consumption and storage.
  24. 24. DEMO
  25. 25. QUESTION?
  26. 26. TOOLS developers.google.com/speed/pagespeed/insights tools.pingdom.com webpagetest.org/ developer.yahoo.com/yslow gtmetrix.com sitespeed.io
  27. 27. REFERENCES 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. CSS and the Critical Path What’s with putting the CSS in the head? Performance Timing Information: Part 1 – Navigation Timing High-Performance Browser Networking - Ilya Grigorik Web page trends Page growing trends How To Deliver Fast, Engaging Responsive Web Design Sites How to Improve Your Conversion Rates with a Faster Website How to Performance improvement case study Google Speed Rules CORS in AWS S3
  28. 28. THE END BY MARCO VITO MOSCARITOLO / MAVIMO.ORG

×