PerformanceOptimisation

Fabio Cicerchia

Who am I

Fabio Cicerchia

3

Senior Full-Stack Developer

fabiocicerchia

Working for

Performance Optimisation - Fabio Cicerchia

Letrsquos talk about

6

Performance is a process not a projectEvery engineer should think about

performance

Performance Optimisation - Fabio Cicerchia

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Who am I

Fabio Cicerchia

3

Senior Full-Stack Developer

fabiocicerchia

Working for

Performance Optimisation - Fabio Cicerchia

Letrsquos talk about

6

Performance is a process not a projectEvery engineer should think about

performance

Performance Optimisation - Fabio Cicerchia

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Fabio Cicerchia

3

Senior Full-Stack Developer

fabiocicerchia

Working for

Performance Optimisation - Fabio Cicerchia

Letrsquos talk about

6

Performance is a process not a projectEvery engineer should think about

performance

Performance Optimisation - Fabio Cicerchia

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Letrsquos talk about

6

Performance is a process not a projectEvery engineer should think about

performance

Performance Optimisation - Fabio Cicerchia

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

6

Performance is a process not a projectEvery engineer should think about

performance

Performance Optimisation - Fabio Cicerchia

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Time is MoneyUnfortunately you canrsquot buy it

so donrsquot waste it

7Performance Optimisation - Fabio Cicerchia

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Performance matters

8Performance Optimisation - Fabio Cicerchia

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Measuring9

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

How1Accurately measure page performance

2Be unobtrusive

3Have a good sampling

4Focus on useful metrics

10Performance Optimisation - Fabio Cicerchia

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Random SamplingHow to randomise

Pick 10 of users at random and always test them

For each user decide at random ifthey should be tested

11Performance Optimisation - Fabio Cicerchiahttptechbluesmooninfo201001statistics-of-performance-measurementhtmlhttpxkcdcom221

Central TendencyMean(10 11 12 11 109) = 30

Affected by outliers

Median(10 11 12 11 109) = 11Central tendency

Mode(10 11 12 11 109) = 11Most recurring value not often used

12Performance Optimisation - Fabio Cicerchia

PercentilesPercentiles are perfect for automatic baselining

Averages can be misleading

Keep an eye on

50th percentile = Median

95th percentile

98th percentile

99th percentile13Performance Optimisation - Fabio Cicerchiahttpapmblogdynatracecom20121114why-averages-suck-and-percentiles-are-great

PercentilesPercentiles are perfect for automatic baselining

Averages can be misleading

Keep an eye on

50th percentile = Median

95th percentile

98th percentile

99th percentile13Performance Optimisation - Fabio Cicerchiahttpapmblogdynatracecom20121114why-averages-suck-and-percentiles-are-great

You cant improvewhat you canrsquot

measuremdash Osho

14Performance Optimisation - Fabio Cicerchia

Metrics

16Performance Optimisation - Fabio Cicerchia

TTFBThe Time To First Byte metric is affected by 3 components

The time the request takes to reach the web server

The time the web server takes to process the request and generate the response

The time the response takes to go back to your browser

17Performance Optimisation - Fabio Cicerchiahttpsmozcomblogimproving-search-rank-by-optimizing-your-time-to-first-byte

Metrics

16Performance Optimisation - Fabio Cicerchia

TTFBThe Time To First Byte metric is affected by 3 components

The time the request takes to reach the web server

The time the web server takes to process the request and generate the response

The time the response takes to go back to your browser

17Performance Optimisation - Fabio Cicerchiahttpsmozcomblogimproving-search-rank-by-optimizing-your-time-to-first-byte

16Performance Optimisation - Fabio Cicerchia

TTFBThe Time To First Byte metric is affected by 3 components

The time the request takes to reach the web server

The time the web server takes to process the request and generate the response

The time the response takes to go back to your browser

17Performance Optimisation - Fabio Cicerchiahttpsmozcomblogimproving-search-rank-by-optimizing-your-time-to-first-byte

TTFBThe Time To First Byte metric is affected by 3 components

The time the request takes to reach the web server

The time the web server takes to process the request and generate the response

The time the response takes to go back to your browser

17Performance Optimisation - Fabio Cicerchiahttpsmozcomblogimproving-search-rank-by-optimizing-your-time-to-first-byte

TTLBAs per TTFB the reasons for a high Time To Last Byte could be

Geographic latency (server is far away from visitor)

Poorly written server-side code

Outdated server hardware

Overloaded servers (clogged bandwidth due to high traffic ndash from humans bots or both)

Poorly organized databases

Poorly written database code 18Performance Optimisation - Fabio Cicerchia

DOM Content LoadedItrsquos fired when the HTML document has been completely loaded and parsed without waiting for stylesheets images and subframes to finish loading

A very different event load should be used only to detect a fully-loaded page

It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate so be cautious

19Performance Optimisation - Fabio Cicerchiahttpsdevelopermozillaorgen-USdocsWebEventsDOMContentLoaded

DOM Content LoadedItrsquos fired when the HTML document has been completely loaded and parsed without waiting for stylesheets images and subframes to finish loading

A very different event load should be used only to detect a fully-loaded page

It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate so be cautious

19Performance Optimisation - Fabio Cicerchiahttpsdevelopermozillaorgen-USdocsWebEventsDOMContentLoaded

Full LoaddocumentaddEventListener(DOMContentLoaded function (event) consolelog(DOM fully loaded and parsed))

function load() consolelog(load event detected)windowonload = load

$(document)ready(function () consolelog(ready))

$(window)load(function () consolelog(loaded))

20

OUTPUT1 ready2 DOM fully loaded and parsed3 load event detected4 loaded

1

2

3

4

Performance Optimisation - Fabio Cicerchia

Speed IndexThe Speed Index is the average timeat which visible parts of the page are displayed

It is expressed in milliseconds and dependent on size of the view port The Speed Index metric measures how quickly the page contents are visually populated (where lower numbers are better)

21Performance Optimisation - Fabio Cicerchiahttpssitesgooglecomawebpagetestorgdocsusing-webpagetestmetricsspeed-index

Speed IndexThe Speed Index is the average timeat which visible parts of the page are displayed

It is expressed in milliseconds and dependent on size of the view port The Speed Index metric measures how quickly the page contents are visually populated (where lower numbers are better)

21Performance Optimisation - Fabio Cicerchiahttpssitesgooglecomawebpagetestorgdocsusing-webpagetestmetricsspeed-index

Some Figures

3rd Party

3rd party calls can make up gt50 of page requests

They are the single greatest potential point of failure for web pages

23Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20110714fourth-party-calls-third-party-content

3rd Party

3rd party calls can make up gt50 of page requests

They are the single greatest potential point of failure for web pages

23Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20110714fourth-party-calls-third-party-content

GZipGZIP compression saves 50 to 80 bandwidth and it will

significantly increase the websitersquos loading speed

Netflix saw a 43 drop in outbound traffic after enabling compression

24Performance Optimisation - Fabio Cicerchiahttpswwwkeycdncomblogwebsite-performance-optimizationhttpscdnifycomblog15-web-performance-stats

Images

On average 64 of a websitersquos page weight is made up of imagesndash HTTP Archive

25Performance Optimisation - Fabio Cicerchiahttphttparchiveorginterestingphp

Redirect

20 pages contains 5 or more redirectsAnd 3 of pages contained 10 or more

26Performance Optimisation - Fabio Cicerchiahttpswwwsoastacomblog23-stats-mobile-web-performance-monitoring

27

Crsquomon itrsquos just a small delayYEAH SURE

Performance Optimisation - Fabio Cicerchia

100ms slower

1 drop in sales (Amazon)

28Performance Optimisation - Fabio Cicerchiahttpwwwcarbon60comblogmilliseconds-are-money-how-much-performance-matters-in-the-cloud

100ms slower

1 drop in sales (Amazon)

28Performance Optimisation - Fabio Cicerchiahttpwwwcarbon60comblogmilliseconds-are-money-how-much-performance-matters-in-the-cloud

500ms slower

25 drop in searches (Google)

29Performance Optimisation - Fabio Cicerchiahttpscdnifycomblog15-web-performance-stats

1 second slower

11 fewer page views a 16 decrease in customer satisfactionand 7 loss in conversions

30Performance Optimisation - Fabio CicerchiahttpwwwaberdeencomAberdeen-Library5136RA-performance-web-applicationaspx

2 seconds slower

During a transaction results in abandonment rates of up to 87This is significantly higher than the average abandonment rate of 70

31Performance Optimisation - Fabio Cicerchiahttpsblogradwarecomapplicationdeliveryapplicationaccelerationoptimization20140155-web-performance-stats-youll-want-to-know

3 seconds slower

53 of visits to mobile sites are abandoned after 3 seconds ndash Googles DoubleClick

32Performance Optimisation - Fabio Cicerchiahttpswpostatscom

4 seconds

Only 2 of the top 100 ecommerce sites loads in fewer than 4 seconds on smartphones

33Performance Optimisation - Fabio Cicerchiahttpsblogradwarecomapplicationdeliveryapplicationaccelerationoptimization20140155-web-performance-stats-youll-want-to-know

10 seconds1 out of 4 pages took more than 10 seconds to load

20 of the top 100 ecommerce sites loads in more than 10 seconds

34Performance Optimisation - Fabio Cicerchiahttpsblogradwarecomapplicationdeliveryapplicationaccelerationoptimization20140155-web-performance-stats-youll-want-to-know

To infinity and beyondAccording to Googles DoubleClick when comparing sites that load in 5 seconds to sites that load in 19 seconds the faster sites had

70 longer average session lengths 35 lower bounce rates and 25 higher ad viewability than their slower counterparts

Googles DoubleClick found that publishers whose mobile sites load in 5 seconds earn up to

2x more mobile ad revenue than sites loading in 19 seconds

35Performance Optimisation - Fabio Cicerchiahttpswpostatscom

Poor Performances = Web Stress

Brain wave analysis from the experiment revealed that participants had to concentrate up to 50 more when using badly performing

websites while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods

36Performance Optimisation - Fabio CicerchiahttpwwwcacomFilesSupportingPiecesfinal_webstress_survey_report_229296pdf

Long story short

You are LOSING Visitors

You are LOSING Sales

You are LOSING Ad-revenue

You are WASTING SEOSEMPPC budget

SPENDING $$$ on bandwidth and servers

38Performance Optimisation - Fabio Cicerchia

So how to do it

40Performance Optimisation - Fabio Cicerchia

too many irons in the fire

41

WPO (Web Performance Optimisation)Optimise the poorly performing networks and servers

Performance Optimisation - Fabio Cicerchiahttpsdevcentralf5comarticleswils-wpo-versus-feo

You are LOSING Visitors

You are LOSING Sales

You are LOSING Ad-revenue

You are WASTING SEOSEMPPC budget

SPENDING $$$ on bandwidth and servers

38Performance Optimisation - Fabio Cicerchia

So how to do it

40Performance Optimisation - Fabio Cicerchia

too many irons in the fire

41

WPO (Web Performance Optimisation)Optimise the poorly performing networks and servers

Performance Optimisation - Fabio Cicerchiahttpsdevcentralf5comarticleswils-wpo-versus-feo

So how to do it

40Performance Optimisation - Fabio Cicerchia

too many irons in the fire

41

WPO (Web Performance Optimisation)Optimise the poorly performing networks and servers

Performance Optimisation - Fabio Cicerchiahttpsdevcentralf5comarticleswils-wpo-versus-feo

40Performance Optimisation - Fabio Cicerchia

too many irons in the fire

41

WPO (Web Performance Optimisation)Optimise the poorly performing networks and servers

Performance Optimisation - Fabio Cicerchiahttpsdevcentralf5comarticleswils-wpo-versus-feo

41

WPO (Web Performance Optimisation)Optimise the poorly performing networks and servers

Performance Optimisation - Fabio Cicerchiahttpsdevcentralf5comarticleswils-wpo-versus-feo

42Performance Optimisation - Fabio Cicerchia

FEO (Front-End Optimisation) Change the content to decrease the amount of traffic

httpsdevcentralf5comarticleswils-wpo-versus-feo

43Performance Optimisation - Fabio Cicerchia

WCO (Web Content Optimisation)Make the page rendering faster

httpwwwwebperformancetodaycom20110610wpo-wco-feo-web-performance-optimization

44Performance Optimisation - Fabio Cicerchia

DSA (Dynamic Site Acceleration)Bring network resources closer to the user by prefetching or caching

files

httpsenwikipediaorgwikiDynamic_site_acceleration

45Performance Optimisation - Fabio Cicerchia

Letrsquos do it

Level 0Noob

47

GZipYou send zipped content over the wire the browser unpacks it

Modern browsers understand compressed content

Search engine spiders do too

48Performance Optimisation - Fabio Cicerchia

MinifyMinify JavaScript and CSS

Inline styles and scripts should also be minified

The Source Maps are loaded only in Dev Mode

49Performance Optimisation - Fabio Cicerchiahttpswwwhtml5rockscomentutorialsdevelopertoolssourcemaps

Letrsquos do it

Level 0Noob

47

GZipYou send zipped content over the wire the browser unpacks it

Modern browsers understand compressed content

Search engine spiders do too

48Performance Optimisation - Fabio Cicerchia

MinifyMinify JavaScript and CSS

Inline styles and scripts should also be minified

The Source Maps are loaded only in Dev Mode

49Performance Optimisation - Fabio Cicerchiahttpswwwhtml5rockscomentutorialsdevelopertoolssourcemaps

Level 0Noob

47

GZipYou send zipped content over the wire the browser unpacks it

Modern browsers understand compressed content

Search engine spiders do too

48Performance Optimisation - Fabio Cicerchia

MinifyMinify JavaScript and CSS

Inline styles and scripts should also be minified

The Source Maps are loaded only in Dev Mode

49Performance Optimisation - Fabio Cicerchiahttpswwwhtml5rockscomentutorialsdevelopertoolssourcemaps

GZipYou send zipped content over the wire the browser unpacks it

Modern browsers understand compressed content

Search engine spiders do too

48Performance Optimisation - Fabio Cicerchia

MinifyMinify JavaScript and CSS

Inline styles and scripts should also be minified

The Source Maps are loaded only in Dev Mode

49Performance Optimisation - Fabio Cicerchiahttpswwwhtml5rockscomentutorialsdevelopertoolssourcemaps

MinifyMinify JavaScript and CSS

Inline styles and scripts should also be minified

The Source Maps are loaded only in Dev Mode

49Performance Optimisation - Fabio Cicerchiahttpswwwhtml5rockscomentutorialsdevelopertoolssourcemaps

Avoid 404sUseless requests

When an external JavaScript is a 404 the browser will still try to parse it and find something usable in it

Theyrsquoll slow down the UX

50Performance Optimisation - Fabio Cicerchia

Optimise ImagesLossless optimisation

Correct dimensions

Save for web

Use the right file format GIF for animations JPEG for photograph otherwise PNG

Donrsquot Scale Images in HTML

51Performance Optimisation - Fabio Cicerchiahttpwwwcreativebloqcomnetmag10-ways-optimise-images-better-performance-71515792

Optimise ImagesLossless optimisation

Correct dimensions

Save for web

Use the right file format GIF for animations JPEG for photograph otherwise PNG

Donrsquot Scale Images in HTML

51Performance Optimisation - Fabio Cicerchiahttpwwwcreativebloqcomnetmag10-ways-optimise-images-better-performance-71515792

Choose horizontal over vertical when possible

Combine similar colors

Keep color count low

Donrsquot leave big gaps

Optimise CSS Sprites

52Performance Optimisation - Fabio Cicerchia

Yahoorsquos RulesMinimize HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-Control Header

Gzip Components

Put StyleSheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make AJAX Cacheable

Use GET for AJAX Requests

Reduce the Number of DOM Elements

No 404s

Reduce Cookie Size

Use Cookie-Free Domains for Components

Avoid Filters

Do Not Scale Images in HTML

Make faviconico Small amp Cacheable

Googlersquos RulesAvoid bad requests

Avoid CSS expressions

Combine external CSS

Combine external JavaScript

Defer loading of JavaScript

Enable compression

Leverage browser caching

Leverage proxy caching

Minify CSS

Minify HTML

Minify JavaScript

Minimize request size

Minimize DNS lookups

Minimize redirects

Optimize images

Optimize the order of styles and scripts

Parallelize downloads across hostnames

Put CSS in the document head

Remove unused CSS

Serve resources from a consistent URL

Serve scaled images

Serve static content from a cookieless domain

Specify a character set early

Specify image dimensions

Use efficient CSS selectors

Back to basics

53Performance Optimisation - Fabio Cicerchiahttpcodegooglecomspeedpage-speeddocsrules_introhtmlhttpdeveloperyahoocomyslowhelpguidelines

Yahoorsquos RulesMinimize HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-Control Header

Gzip Components

Put StyleSheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make AJAX Cacheable

Use GET for AJAX Requests

Reduce the Number of DOM Elements

No 404s

Reduce Cookie Size

Use Cookie-Free Domains for Components

Avoid Filters

Do Not Scale Images in HTML

Make faviconico Small amp Cacheable

Googlersquos RulesAvoid bad requests

Avoid CSS expressions

Combine external CSS

Combine external JavaScript

Defer loading of JavaScript

Enable compression

Leverage browser caching

Leverage proxy caching

Minify CSS

Minify HTML

Minify JavaScript

Minimize request size

Minimize DNS lookups

Minimize redirects

Optimize images

Optimize the order of styles and scripts

Parallelize downloads across hostnames

Put CSS in the document head

Remove unused CSS

Serve resources from a consistent URL

Serve scaled images

Serve static content from a cookieless domain

Specify a character set early

Specify image dimensions

Use efficient CSS selectors

Back to basics

53Performance Optimisation - Fabio Cicerchiahttpcodegooglecomspeedpage-speeddocsrules_introhtmlhttpdeveloperyahoocomyslowhelpguidelines

Level 1Getting Serious

54

FaviconicoThe browser will request it

Better not respond with a 404

Cookies are sent

Cannot be on CDN

Interferes with the download sequence

Make it small (lt= 1K)

Animated favicons are not cool

Set Expires header55Performance Optimisation - Fabio Cicerchia

Minimise iframesPros

Can help with slow third-party content like badges and ads

Security sandbox

You can download scripts in parallel

Cons

They have a cost even if blank

They block page onload

Non-semantic56Performance Optimisation - Fabio Cicerchia

Whats absolutely required in order to render the page initially

The rest can wait (drag and drop animations hidden content images below the fold)

Post-load Components

57Performance Optimisation - Fabio Cicerchia

Items youll need in the future

Unconditional preload (googlecom loads a sprite onload)

Conditional preload (searchyahoocom after you type in the input box)

Anticipated preload ndash preload in advance before launching a redesign

When you start typing the page can safely assume yoursquoll hit the search results page

Preload Components

58Performance Optimisation - Fabio Cicerchia

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

FaviconicoThe browser will request it

Better not respond with a 404

Cookies are sent

Cannot be on CDN

Interferes with the download sequence

Make it small (lt= 1K)

Animated favicons are not cool

Set Expires header55Performance Optimisation - Fabio Cicerchia

Minimise iframesPros

Can help with slow third-party content like badges and ads

Security sandbox

You can download scripts in parallel

Cons

They have a cost even if blank

They block page onload

Non-semantic56Performance Optimisation - Fabio Cicerchia

Whats absolutely required in order to render the page initially

The rest can wait (drag and drop animations hidden content images below the fold)

Post-load Components

57Performance Optimisation - Fabio Cicerchia

Items youll need in the future

Unconditional preload (googlecom loads a sprite onload)

Conditional preload (searchyahoocom after you type in the input box)

Anticipated preload ndash preload in advance before launching a redesign

When you start typing the page can safely assume yoursquoll hit the search results page

Preload Components

58Performance Optimisation - Fabio Cicerchia

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

Minimise iframesPros

Can help with slow third-party content like badges and ads

Security sandbox

You can download scripts in parallel

Cons

They have a cost even if blank

They block page onload

Non-semantic56Performance Optimisation - Fabio Cicerchia

Whats absolutely required in order to render the page initially

The rest can wait (drag and drop animations hidden content images below the fold)

Post-load Components

57Performance Optimisation - Fabio Cicerchia

Items youll need in the future

Unconditional preload (googlecom loads a sprite onload)

Conditional preload (searchyahoocom after you type in the input box)

Anticipated preload ndash preload in advance before launching a redesign

When you start typing the page can safely assume yoursquoll hit the search results page

Preload Components

58Performance Optimisation - Fabio Cicerchia

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

Whats absolutely required in order to render the page initially

The rest can wait (drag and drop animations hidden content images below the fold)

Post-load Components

57Performance Optimisation - Fabio Cicerchia

Items youll need in the future

Unconditional preload (googlecom loads a sprite onload)

Conditional preload (searchyahoocom after you type in the input box)

Anticipated preload ndash preload in advance before launching a redesign

When you start typing the page can safely assume yoursquoll hit the search results page

Preload Components

58Performance Optimisation - Fabio Cicerchia

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

Items youll need in the future

Unconditional preload (googlecom loads a sprite onload)

Conditional preload (searchyahoocom after you type in the input box)

Anticipated preload ndash preload in advance before launching a redesign

When you start typing the page can safely assume yoursquoll hit the search results page

Preload Components

58Performance Optimisation - Fabio Cicerchia

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

Option 1Separate subdomain (staticexampleorg)

Option 2A new domain (eg yimgcom ytimgcom images-amazoncom)

Use Cookie-Free Domains

59Performance Optimisation - Fabio Cicerchia

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

ETagsETag is a token that can be associated with a web resource

ETags are meant to help with cachingThey take precedence for caching

They never expire

Issues with load balanced environmentA component served from server A has a different ETag than the same component

served from B

Most of the time you donrsquot need them60Performance Optimisation - Fabio Cicerchia

httpstechpunchcoukdevelopmentshould-your-site-be-using-etags-or-nothttpsdevelopersgooglecomwebfundamentalsperformanceoptimizing-content-efficiencyhttp-caching

Reduce CookiesEliminate unnecessary cookies

Keep cookie sizes as low as possible to minimize the impact on the user response time

Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected

Set an Expires date appropriately An earlier Expires date or none removes the cookie sooner improving the user response time

61Performance Optimisation - Fabio Cicerchia

Dont wait for onload use DOMContentLoaded

Events bubble up so use delegation (attach listeners to outer elements)

Clean up to prevent IE memory leaks

Careful with onresize

Event Handlers

62Performance Optimisation - Fabio Cicerchia

CSS should be at the top

import blocks parallel downloads

In IE import is the same as putting ltlinkgt at the bottom

ltlinkgt allows alternate styles (eg for accessibility)

Choose ltlinkgt over import

63Performance Optimisation - Fabio Cicerchiahttpwwwstevesouderscomblog20090409dont-use-importhttpalistapartcomarticlealternate

Dont wait for onload use DOMContentLoaded

Events bubble up so use delegation (attach listeners to outer elements)

Clean up to prevent IE memory leaks

Careful with onresize

Event Handlers

62Performance Optimisation - Fabio Cicerchia

CSS should be at the top

import blocks parallel downloads

In IE import is the same as putting ltlinkgt at the bottom

ltlinkgt allows alternate styles (eg for accessibility)

Choose ltlinkgt over import

63Performance Optimisation - Fabio Cicerchiahttpwwwstevesouderscomblog20090409dont-use-importhttpalistapartcomarticlealternate

CSS should be at the top

import blocks parallel downloads

In IE import is the same as putting ltlinkgt at the bottom

ltlinkgt allows alternate styles (eg for accessibility)

Choose ltlinkgt over import

63Performance Optimisation - Fabio Cicerchiahttpwwwstevesouderscomblog20090409dont-use-importhttpalistapartcomarticlealternate

Level 2Advanced

64

Reduce DOM ElementsWorlds fastest page aboutblank

A complex page means more bytes to download it also means slower DOM access in JavaScript

Easy to test just type in Firebugrsquos console

documentgetElementsByTagName()length

65Performance Optimisation - Fabio Cicerchia

PrefetchingDNS prefetching rarr resolve the DNS

Preconnect rarr resolve the DNS + TCP handshake + TLS negotiation (optional)

Prefetch rarr requesting downloading and storing the asset in the cache

Prerender rarr load all of the assets of a certain document

66Performance Optimisation - Fabio Cicerchiahttpscss-trickscomprefetching-preloading-prebrowsing

Reduce DOM ElementsWorlds fastest page aboutblank

A complex page means more bytes to download it also means slower DOM access in JavaScript

Easy to test just type in Firebugrsquos console

documentgetElementsByTagName()length

65Performance Optimisation - Fabio Cicerchia

PrefetchingDNS prefetching rarr resolve the DNS

Preconnect rarr resolve the DNS + TCP handshake + TLS negotiation (optional)

Prefetch rarr requesting downloading and storing the asset in the cache

Prerender rarr load all of the assets of a certain document

66Performance Optimisation - Fabio Cicerchiahttpscss-trickscomprefetching-preloading-prebrowsing

PrefetchingDNS prefetching rarr resolve the DNS

Preconnect rarr resolve the DNS + TCP handshake + TLS negotiation (optional)

Prefetch rarr requesting downloading and storing the asset in the cache

Prerender rarr load all of the assets of a certain document

66Performance Optimisation - Fabio Cicerchiahttpscss-trickscomprefetching-preloading-prebrowsing

ATFThe most important and interesting section should be at the top of the webpage

Make sure to render the Above The Fold content in lt 1s

Defer the non-AFT contents

67Performance Optimisation - Fabio Cicerchiahttpwhereisthefoldcom

Requests Sharding Domain sharding is a technique for splitting resources across multiple domains improving page load time When multiple domains are used browsers are able to download more resources simultaneously resulting in a faster user experience

Note HTTP2 has officially replaced SPDY and made it obsolete

68Performance Optimisation - Fabio Cicerchiahttpswwwmaxcdncomonevisual-glossarydomain-sharding-2httpswwwstevesouderscomblog20130905domain-sharding-revisited

VanillaJS

69Performance Optimisation - Fabio Cicerchiahttpvanilla-jscom

Blocks rendering freezes the browser

Increased memory consumption

Per element not per image

Avoid Filters

70Performance Optimisation - Fabio Cicerchia

Web FontsBlocks text rendering

Fonts are bigger than 14Kb

Use them with care

Remove characters

71Performance Optimisation - Fabio Cicerchia

WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web

WebP lossless images are 26 smaller than PNGs and25-34 smaller than JPEG images

72Performance Optimisation - Fabio Cicerchiahttpsdevelopersgooglecomspeedwebpdocswebp_lossless_alpha_studyhttpsdevelopersgooglecomspeedwebp

Web FontsBlocks text rendering

Fonts are bigger than 14Kb

Use them with care

Remove characters

71Performance Optimisation - Fabio Cicerchia

WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web

WebP lossless images are 26 smaller than PNGs and25-34 smaller than JPEG images

72Performance Optimisation - Fabio Cicerchiahttpsdevelopersgooglecomspeedwebpdocswebp_lossless_alpha_studyhttpsdevelopersgooglecomspeedwebp

WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web

WebP lossless images are 26 smaller than PNGs and25-34 smaller than JPEG images

72Performance Optimisation - Fabio Cicerchiahttpsdevelopersgooglecomspeedwebpdocswebp_lossless_alpha_studyhttpsdevelopersgooglecomspeedwebp

AnimationsDonrsquot animate from JavaScript for basic stuff

Use requestAnimationFrame

Have a look at GSAP (20x faster than jQuery) and VelocityJS

73Performance Optimisation - Fabio Cicerchia

httpsdevelopersgooglecomwebfundamentalsdesign-and-uianimationsanimations-and-performancehttpsdevelopermozillaorgen-USAppsFundamentalsPerformanceCSS_JavaScript_animation_performancehttpsgreensockcomjsspeedhtmlhttpvelocityjsorg

HTML5 FeaturesApplication Cache Service Workers

Web Storage

Web Workers

Navigation Timing API

Web Sockets

74Performance Optimisation - Fabio Cicerchiawwwmobilehtml5orghttpsdevelopermozillaorgen-USdocsWebHTMLUsing_the_application_cache

CRPOptimizing the Critical Rendering Path refers to prioritising the display of content that relates to the current user action

Perceived Performance is a measureof how quick a user thinks your site is

75Performance Optimisation - Fabio Cicerchia

httpsdevelopersgooglecomwebfundamentalsperformancecritical-rendering-pathhttpswwwsmashingmagazinecom201508understanding-critical-csshttpblogteamtreehousecomperceived-performance

Level 3Behind the Scenes

LatencyLatency is the amount of time it takes to transmit a single piece of data from one location to another

1Decrease External HTTP Requests

2DNS Prefetching

3Preconnect

4Use a CDN

5HTTP2

6Caching 77Performance Optimisation - Fabio Cicerchiahttpswwwkeycdncombloglatency-optimization

LatencyLatency is the amount of time it takes to transmit a single piece of data from one location to another

1Decrease External HTTP Requests

2DNS Prefetching

3Preconnect

4Use a CDN

5HTTP2

6Caching 77Performance Optimisation - Fabio Cicerchiahttpswwwkeycdncombloglatency-optimization

CDNGet a Content Delivery Network

Akamai

CDNify (from $10m)

CloudFlare (free-mium)

MaxCDN (from $9m)

78Performance Optimisation - Fabio Cicerchiahttpwwwcdnplanetcomcdnshttpwwwcdncalccom

CDN (contrsquod)

79Performance Optimisation - Fabio Cicerchia

What is dynamic content Almost everything is static for a time The hard part is to reduce the miss rate

What can you cache

DB Results

Functions Output

Generated HTML

Cache

80Performance Optimisation - Fabio Cicerchiahttpswwwdigitaloceancomcommunitytutorialsweb-caching-basics-terminology-http-headers-and-caching-strategieshttpswwwmnotnetcache_docs

What is dynamic content Almost everything is static for a time The hard part is to reduce the miss rate

What can you cache

DB Results

Functions Output

Generated HTML

Cache

80Performance Optimisation - Fabio Cicerchiahttpswwwdigitaloceancomcommunitytutorialsweb-caching-basics-terminology-http-headers-and-caching-strategieshttpswwwmnotnetcache_docs

Cache (contrsquod)

There are only two hard things in Computer Sciencecache invalidation and naming things

mdash Phil Karlton

81Performance Optimisation - Fabio Cicerchia

SPDYSPDY is now deprecated

Allows concurrent HTTP requests in one TCP session

Reduces the bandwidth used by HTTP (header compression amp cleaning useless headers)

Makes SSL the underlying transport protocol for better security and compatibility with existing network infrastructure

82Performance Optimisation - Fabio Cicerchiahttpswwwchromiumorgspdyspdy-whitepaper

SPDYSPDY is now deprecated

Allows concurrent HTTP requests in one TCP session

Reduces the bandwidth used by HTTP (header compression amp cleaning useless headers)

Makes SSL the underlying transport protocol for better security and compatibility with existing network infrastructure

82Performance Optimisation - Fabio Cicerchiahttpswwwchromiumorgspdyspdy-whitepaper

HTTP2Origins from SPDY by Google

HTTP2 is protocol designed forLow latency transport of content over the Web

No change to HTTP semanticsItrsquos about how data travels through the wire

Key new features in HTTP2Multiplexing multiple streams over a single connectionHeader compression reuse headers from previous requestsServer push multiple parallel responses for a single requestPrioritisation some resources have priorities

83Performance Optimisation - Fabio Cicerchiahttpwwwslidesharenetnakovhttp2-for-developers

HTTP2 (contrsquod)

84

HTTP1 workarounds hurt HTTP2 perf

Anti-patterns

Domain Sharding

Images Sprites

Resource In-Lining

Merging CSS amp JS

Performance Optimisation - Fabio Cicerchia

httpsdanielhaxxsehttp2httpcaniusecomfeat=http2httpwwwitbusinessedgecomslideshowsbest-practices-of-http11-becoming-bad-practices-for-http2html

SSLHTTPS requires an initial handshake despite itrsquos size (~5KB) it can be

very slow

Making lots of short requests over HTTPS will be quite a bit slower than HTTP but if you transfer a lot of data in a single request the difference will be insignificant

Solution Improve the Handshake + Keep-Alive

85Performance Optimisation - Fabio Cicerchia

httpswwwmaxcdncomblogssl-performance-mythhttpsunhandledexpressioncom201301255-easy-tips-to-accelerate-sslhttpbloghaproxycom20110916benchmarking_ssl_performance

Level 4Backend Superstar

XHProf

87Performance Optimisation - Fabio Cicerchia

SF Profiler

88Performance Optimisation - Fabio Cicerchia

Level 5Mobile Ninja

SummarySlow Network rarr Reduce Reqs + Reduce Bytes

Weak CPU = Slow JS rarr Async + Defer

Focus on ATF

Different Connection Model rarr Reduce domain sharding Reduce 304s

Cache rarr localStorage

90Performance Optimisation - Fabio CicerchiahttpbrowserbenchorgJetStreamhttpqueueacmorgdetailcfmid=2510122

XHProf

87Performance Optimisation - Fabio Cicerchia

SF Profiler

88Performance Optimisation - Fabio Cicerchia

Level 5Mobile Ninja

SummarySlow Network rarr Reduce Reqs + Reduce Bytes

Weak CPU = Slow JS rarr Async + Defer

Focus on ATF

Different Connection Model rarr Reduce domain sharding Reduce 304s

Cache rarr localStorage

90Performance Optimisation - Fabio CicerchiahttpbrowserbenchorgJetStreamhttpqueueacmorgdetailcfmid=2510122

SF Profiler

88Performance Optimisation - Fabio Cicerchia

Level 5Mobile Ninja

SummarySlow Network rarr Reduce Reqs + Reduce Bytes

Weak CPU = Slow JS rarr Async + Defer

Focus on ATF

Different Connection Model rarr Reduce domain sharding Reduce 304s

Cache rarr localStorage

90Performance Optimisation - Fabio CicerchiahttpbrowserbenchorgJetStreamhttpqueueacmorgdetailcfmid=2510122

Level 5Mobile Ninja

SummarySlow Network rarr Reduce Reqs + Reduce Bytes

Weak CPU = Slow JS rarr Async + Defer

Focus on ATF

Different Connection Model rarr Reduce domain sharding Reduce 304s

Cache rarr localStorage

90Performance Optimisation - Fabio CicerchiahttpbrowserbenchorgJetStreamhttpqueueacmorgdetailcfmid=2510122

SummarySlow Network rarr Reduce Reqs + Reduce Bytes

Weak CPU = Slow JS rarr Async + Defer

Focus on ATF

Different Connection Model rarr Reduce domain sharding Reduce 304s

Cache rarr localStorage

90Performance Optimisation - Fabio CicerchiahttpbrowserbenchorgJetStreamhttpqueueacmorgdetailcfmid=2510122

Level 6Guru

91

PRPLPRPL is a pattern for structuring and serving Progressive Web Apps with an emphasis on the performance of app delivery and launch It stands for

Push critical resources for the initial URL routeRender initial routePre-cache remaining routesLazy-load and create remaining routes on demand

92Performance Optimisation - Fabio Cicerchiahttpsdevelopersgooglecomwebfundamentalsperformanceprpl-pattern

PRPLPRPL is a pattern for structuring and serving Progressive Web Apps with an emphasis on the performance of app delivery and launch It stands for

Push critical resources for the initial URL routeRender initial routePre-cache remaining routesLazy-load and create remaining routes on demand

92Performance Optimisation - Fabio Cicerchiahttpsdevelopersgooglecomwebfundamentalsperformanceprpl-pattern

AMPAMP is a way to build web pages for static content that render fast

mdash Google

Accelerated Mobile Pages in Google Index

600 million AMP Pages

700000 Domains

100+ Languages93Performance Optimisation - Fabio Cicerchia

AMP (contrsquod)

We found that AMP pages load four times faster and use eight times less data than traditional

mobile optimized pages mdash Jon Parise (Product Engineer Pinterest)

94Performance Optimisation - Fabio Cicerchiahttpsengineeringpinterestcomblogbuilding-faster-mobile-web-experience-amp

AMP (contrsquod)

We found that AMP pages load four times faster and use eight times less data than traditional

mobile optimized pages mdash Jon Parise (Product Engineer Pinterest)

94Performance Optimisation - Fabio Cicerchiahttpsengineeringpinterestcomblogbuilding-faster-mobile-web-experience-amp

AMP (contrsquod)

95Performance Optimisation - Fabio Cicerchiahttpswwwampprojectorgdocsget_startedcreate

AMP (contrsquod)

96

Gotchas

No 3rd party Javascript

External resources must define static dimensions

All CSS must be inline (50k max)

Only GPU-Accelerated animations

Prioritize Resource Loading

Performance Optimisation - Fabio Cicerchiahttpswwwlireocomwordcamp-columbus-2016-using-google-accelerated-mobile-pages-with-wordpress

ESIEdge Side Includes is a language specification for assembling fragments of web pages inside other web pages

Exampleltesiinclude src=httpexamplecom1html alt=httpbakexamplecom2html onerror=continuegt

97Performance Optimisation - Fabio Cicerchiahttpwwww3orgTResi-langhttpswwwsmashingmagazinecom201502using-edge-side-includes-in-varnish

Reverse ProxyA Reverse Proxy is a type of proxy server that retrieves resources on behalf of a client from one or more servers These resources are then returned to the client as if they originated from the proxy server itself

Common choices

Varnish

Squid

HAProxy

Nginx98Performance Optimisation - Fabio Cicerchia

httpsenwikipediaorgwikiReverse_proxyhttpstackoverflowcomquestions224664difference-between-proxy-server-and-reverse-proxy-server

DatabasesOracle rarr httpsoracle-basecomarticles10gperformance-tuning-enhancements-10g

PostgreSQL rarr httpswikipostgresqlorgwikiPerformance_Optimization

SQL Server rarr httpswwwmssqltipscomsql-server-tip-category9performance-tuning

MongoDB rarr httpwwwmikitamankocomblog20131206mongodb-performance-bottlenecks-optimization-strategies-for-mongodb

Redis rarr httpshokunincoblog20141111operational_redishtml

Memcached rarr httpcachelotioblog20150420Speed-up-your-application-by-fine-tuning-Memcachedhtml

Cassandra rarr httpstobertgithubiopagesals-cassandra-21-tuning-guidehtml

OrientDB rarr httporientdbcomdocs21Performance-Tuninghtml

Neo4j rarr httpsneo4jcomblogneo4j-2-2-query-tuning

CouchDB rarr httpguidecouchdborgdraftperformancehtml

99Performance Optimisation - Fabio Cicerchia

Databases (contrsquod)

httplmgtfycomq=database+optimisation

100Performance Optimisation - Fabio Cicerchia

Tools

102Performance Optimisation - Fabio Cicerchia

103Performance Optimisation - Fabio Cicerchia

104Performance Optimisation - Fabio Cicerchia

Understand the Waterfall

105Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20140318waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains

102Performance Optimisation - Fabio Cicerchia

103Performance Optimisation - Fabio Cicerchia

104Performance Optimisation - Fabio Cicerchia

Understand the Waterfall

105Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20140318waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains

103Performance Optimisation - Fabio Cicerchia

104Performance Optimisation - Fabio Cicerchia

Understand the Waterfall

105Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20140318waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains

104Performance Optimisation - Fabio Cicerchia

Understand the Waterfall

105Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20140318waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains

Understand the Waterfall

105Performance Optimisation - Fabio Cicerchiahttpwwwwebperformancetodaycom20140318waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains

ExtraShow Slow wwwshowslowcom

Webpagetest wwwwebpagetestorg

Yslow httpysloworg

PageSpeed httpsdevelopersgooglecomspeedpagespeed

GTMetrix httpgtmetrixcom

RedBot httpredbotorg

Pingdom httpstoolspingdomcom

SPOF-O-Matic httpschromegooglecomwebstoresearchspof-o-matic

XHProf httpgithubcomfacebookxhprof

HTTPWatch httpswwwhttpwatchcom

106Performance Optimisation - Fabio Cicerchia

Extra (contrsquod)Blackfire httpsblackfireio

Yottaa httpwwwyottaacom

Blitz httpswwwblitzio

Load Impact httpsloadimpactcom

WonderNetwork httpswondernetworkcomloadtesting

Loader httpsloaderio

BlazeMeter httpswwwblazemetercom

WebTuna httpwwwwebtunacom

Fiddler httpwwwtelerikcomfiddler

107Performance Optimisation - Fabio Cicerchia

Books

109BTW ask me later a 50 discount on these books )Performance Optimisation - Fabio Cicerchia

109BTW ask me later a 50 discount on these books )Performance Optimisation - Fabio Cicerchia

Are you lazy

111Performance Optimisation - Fabio Cicerchia

Which ones are the most importantcommonThese 5 ones

Reduce Page Size (lt500Kb)

Enable (GZip) Compression

Reduce the number of roundtrips (lt40 per page)

HTTP Cache Headers (cache long amp prosper)

Structure the page (to improve render amp download)CSS First

Javascript last 112Performance Optimisation - Fabio Cicerchia

Even if you apply just those 5 ruleshellip

Your page download times will drop by ~50

113Performance Optimisation - Fabio Cicerchia

Premature optimization is the root of all evilmdash Donald Knuth

114Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

111Performance Optimisation - Fabio Cicerchia

Which ones are the most importantcommonThese 5 ones

Reduce Page Size (lt500Kb)

Enable (GZip) Compression

Reduce the number of roundtrips (lt40 per page)

HTTP Cache Headers (cache long amp prosper)

Structure the page (to improve render amp download)CSS First

Javascript last 112Performance Optimisation - Fabio Cicerchia

Even if you apply just those 5 ruleshellip

Your page download times will drop by ~50

113Performance Optimisation - Fabio Cicerchia

Premature optimization is the root of all evilmdash Donald Knuth

114Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

Which ones are the most importantcommonThese 5 ones

Reduce Page Size (lt500Kb)

Enable (GZip) Compression

Reduce the number of roundtrips (lt40 per page)

HTTP Cache Headers (cache long amp prosper)

Structure the page (to improve render amp download)CSS First

Javascript last 112Performance Optimisation - Fabio Cicerchia

Even if you apply just those 5 ruleshellip

Your page download times will drop by ~50

113Performance Optimisation - Fabio Cicerchia

Premature optimization is the root of all evilmdash Donald Knuth

114Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

Even if you apply just those 5 ruleshellip

Your page download times will drop by ~50

113Performance Optimisation - Fabio Cicerchia

Premature optimization is the root of all evilmdash Donald Knuth

114Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

Premature optimization is the root of all evilmdash Donald Knuth

114Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

BONUS

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

httpsgithubcomdavidsonfellipeawesome-wpo

116

Bonus 1

Performance Optimisation - Fabio Cicerchia

httplmgtfycomq=web+performance+optimisation

117

Bonus 2

Performance Optimisation - Fabio Cicerchia

Bonus 3

118Performance Optimisation - Fabio Cicerchia

Thank you

Questions

121Performance Optimisation - Fabio Cicerchia

httpbitdoskjobs

Thank you

Questions

121Performance Optimisation - Fabio Cicerchia

httpbitdoskjobs

Questions

121Performance Optimisation - Fabio Cicerchia

httpbitdoskjobs

121Performance Optimisation - Fabio Cicerchia

httpbitdoskjobs