Front End Optimization, 'The Cloud' can help you!
2 likes1,397 views
The document discusses front-end optimization techniques and how cloud services can enhance website performance. It outlines the importance of reducing page weight, minimizing requests, and utilizing content delivery networks (CDNs) to improve load times and conversion rates. Various tools and tips for optimizing web requests and improving client-side processing are also highlighted.
Front End Optimization, 'The Cloud' can help you!
- 1. FRONT END OPTIMIZATION, 'THE CLOUD' CAN HELP YOU! CLOUDPARTY 2014 - BOLOGNA Created by Marco Vito Moscaritolo / @mavimo
- 2. Marco Vito Moscaritolo Web Developer @mavimo mavimo@gmail.com Founder & Dev @ Agavee
- 3. Intro Anatomy of a page request Frontend optimization rules Using cloud services Demo References
- 4. INTRO
- 5. PAGE WEIGHT & REQEST NUMBER INCREASE Page weight grows ~30% year-over-year
- 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. 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. ANATOMY OF A WEB REQUEST
- 11. BROWSER RENDERING ENGINE FLOW
- 12. PAGE RENDERING TIMELINE DOM content loaded DOM load event
- 14. REDUCE DATA TO DOWNLOAD Compress content (gzip) Minify JS Compress CSS Image optimization
- 15. REDUCE NUMBER OF REQUEST Aggregate CSS Aggregate JS Sprite style images Use service to include libraries/fonts
- 16. OPTIMIZE REQUESTS Use separate domain for assets Use a CDN Local caching
- 17. CODE OPTIMIZATION Postpone Javascript execution Reduce number of DOM elements Reduce deep path in CSS selectors
- 19. CONTENT DELIVERY (1) Using public CDN services like: //google.com/fonts //jsdelivr.com //ajax.googleapis.com //ajax.aspnetcdn.com //netdna.bootstrapcdn.com
- 20. CONTENT DELIVERY (2) Host private file in CDNs like: Cloud Files + Akamai S3 + CloudFront Google Cloud Storage
- 21. IMAGE OPTIMIZATION Reduce bandwidth consumption: resrc.it cloudinary.com
- 22. CONTENT OPTIMIZATION Some service manipulate your content to optimize client side processing like Google Page Speed (beta)
- 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. DEMO
- 33. QUESTION?
- 35. 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
- 36. THE END BY MARCO VITO MOSCARITOLO / MAVIMO.ORG