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.

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

9. SINGLE REQUEST

10. PAGE REQUEST TREE

11. BROWSER RENDERING ENGINE FLOW

12. PAGE RENDERING TIMELINE
DOM content loaded
DOM load event

13. FRONTEND
OPTIMIZATION RULES

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

18. USING CLOUD SERVICES

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?

34. TOOLS
developers.google.com/speed/pagespeed/insights
tools.pingdom.com
webpagetest.org/
developer.yahoo.com/yslow
gtmetrix.com
sitespeed.io

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