front end optimization, 'the cloud' can help you!
DESCRIPTION
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.TRANSCRIPT
FRONT END OPTIMIZATION,'THE CLOUD'
CAN HELP YOU!CLOUDPARTY 2014 - BOLOGNA
Created by / Marco Vito Moscaritolo @mavimo
Marco Vito MoscaritoloWeb Developer
Founder & Dev @
Agavee
Intro
Anatomy of a page request
Frontend optimization rules
Using cloud services
Demo
References
INTRO
PAGE WEIGHT & REQEST NUMBER INCREASE
Page weight grows ~30% year-over-year
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
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.
ANATOMY OF A WEBREQUEST
SINGLE REQUEST
PAGE REQUEST TREE
BROWSER RENDERING ENGINE FLOW
PAGE RENDERING TIMELINE
DOM content loaded DOM load event
FRONTENDOPTIMIZATION RULES
REDUCE DATA TO DOWNLOADCompress content (gzip)Minify JSCompress CSSImage optimization
REDUCE NUMBER OF REQUESTAggregate CSSAggregate JSSprite style imagesUse service to include libraries/fonts
OPTIMIZE REQUESTSUse separate domain for assetsUse a CDNLocal caching
CODE OPTIMIZATIONPostpone Javascript executionReduce number of DOM elementsReduce deep path in CSS selectors
USING CLOUD SERVICES
CONTENT DELIVERY (1)Using public CDN services like:
//google.com/fonts//jsdelivr.com//ajax.googleapis.com//ajax.aspnetcdn.com//netdna.bootstrapcdn.com
CONTENT DELIVERY (2)Host private file in CDNs like:
Cloud Files + AkamaiS3 + CloudFrontGoogle Cloud Storage
IMAGE OPTIMIZATIONReduce bandwidth consumption:
resrc.itcloudinary.com
CONTENT OPTIMIZATIONSome service manipulate your content to optimize client side
processing like Google Page Speed (beta)
TIPS & TRICKS
Set expire headesCompress data BEFORE upload on cloud storageLazy loading images
You need to pay per request, bandwidth consumption and storage.
DEMO
QUESTION?
TOOLSdevelopers.google.com/speed/pagespeed/insightstools.pingdom.comwebpagetest.org/developer.yahoo.com/yslowgtmetrix.comsitespeed.io
REFERENCES1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11.
CSS and the Critical PathWhat’s with putting the CSS in the head?Performance Timing Information: Part 1 – Navigation TimingHigh-Performance Browser Networking - Ilya GrigorikWeb page trendsPage growing trendsHow To Deliver Fast, Engaging Responsive Web Design SitesHow to Improve Your Conversion Rates with a Faster WebsiteHow to Performance improvement case studyGoogle Speed RulesCORS in AWS S3
THE ENDBY MARCO VITO MOSCARITOLO / MAVIMO.ORG