Performance Optimisation
-
Upload
fabio-cicerchia -
Category
Internet
-
view
827 -
download
0
Transcript of Performance Optimisation
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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 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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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 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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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)
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
104Performance Optimisation - Fabio Cicerchia
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
Books
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
Premature optimization is the root of all evilmdash Donald Knuth
114Performance Optimisation - Fabio Cicerchia
BONUS
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
BONUS
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
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
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
Bonus 3
118Performance Optimisation - Fabio Cicerchia
Thank you
Questions
121Performance Optimisation - Fabio Cicerchia
httpbitdoskjobs
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
Thank you
Questions
121Performance Optimisation - Fabio Cicerchia
httpbitdoskjobs
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
Questions
121Performance Optimisation - Fabio Cicerchia
httpbitdoskjobs
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-
121Performance Optimisation - Fabio Cicerchia
httpbitdoskjobs
- Performance Optimisation
- Who am I
- Fabio Cicerchia
- Letrsquos talk about
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Measuring
- How
- Random Sampling
- Central Tendency
- Percentiles
- Slide 14
- Metrics
- Slide 16
- TTFB
- TTLB
- DOM Content Loaded
- Full Load
- Speed Index
- Some Figures
- 3rd Party
- GZip
- Images
- Redirect
- Slide 27
- 100ms slower
- 500ms slower
- 1 second slower
- 2 seconds slower
- 3 seconds slower
- 4 seconds
- 10 seconds
- To infinity and beyond
- Poor Performances = Web Stress
- Long story short
- Slide 38
- So how to do it
- Slide 40
- Slide 41
- Slide 42
- Slide 43
- Slide 44
- Slide 45
- Letrsquos do it
- Level 0
- GZip
- Minify
- Avoid 404s
- Optimise Images
- Optimise CSS Sprites
- Back to basics
- Level 1
- Faviconico
- Minimise iframes
- Post-load Components
- Preload Components
- Use Cookie-Free Domains
- ETags
- Reduce Cookies
- Event Handlers
- Choose ltlinkgt over import
- Level 2
- Reduce DOM Elements
- Prefetching
- ATF
- Requests Sharding
- VanillaJS
- Avoid Filters
- Web Fonts
- WebP
- Animations
- HTML5 Features
- CRP
- Level 3
- Latency
- CDN
- CDN (contrsquod)
- Cache
- Cache (contrsquod)
- SPDY
- HTTP2
- HTTP2 (contrsquod)
- SSL
- Level 4
- XHProf
- SF Profiler
- Level 5
- Summary
- Level 6
- PRPL
- AMP
- AMP (contrsquod)
- AMP (contrsquod) (2)
- AMP (contrsquod) (3)
- ESI
- Reverse Proxy
- Databases
- Databases (contrsquod)
- Tools
- Slide 102
- Slide 103
- Slide 104
- Understand the Waterfall
- Extra
- Extra (contrsquod)
- Books
- Slide 109
- Are you lazy
- Slide 111
- Which ones are the most importantcommon
- Slide 113
- Slide 114
- BONUS
- Bonus 1
- Bonus 2
- Bonus 3
- Thank you
- Questions
- Slide 121
-