FRONT END OPTIMIZATION,'THE CLOUD'

CAN HELP YOU!CLOUDPARTY 2014 - BOLOGNA

Created by / Marco Vito Moscaritolo @mavimo

Marco Vito MoscaritoloWeb Developer

Founder & Dev @

@mavimomavimo@gmail.com

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