Performance Optimisation

Performance
Optimisation
Fabio Cicerchia

Fabio Cicerchia
3
Senior Full-Stack Developer
@fabiocicerchia
Working for:
Performance Optimisation - Fabio Cicerchia

6
Performance is a process not a project
Every engineer should think about performance

Time is Money
Unfortunately you can’t buy it,
so don’t waste it
7Performance Optimisation - Fabio Cicerchia

Performance matters

How?
1. Accurately measure page performance
2. Be unobtrusive
3. Have a good sampling
4. Focus on useful metrics

Random Sampling
How to randomise?
Pick 10% of users at random and
always test them
For each user, decide at random if
they should be tested
http://tech.bluesmoon.info/2010/01/statistics-of-performance-measurement.html
http://xkcd.com/221/

Central Tendency
Mean(10, 11, 12, 11, 109) = 30
Affected by outliers
Median(10, 11, 12, 11, 109) = 11
Central tendency
Mode(10, 11, 12, 11, 109) = 11
Most recurring value, not often used

Percentiles
Percentiles are perfect for automatic baselining.
Averages can be misleading.
Keep an eye on:
50th percentile = Median
95th percentile
98th percentile
99th percentile
http://apmblog.dynatrace.com/2012/11/14/why-averages-suck-and-percentiles-are-great/

You can't improve
what you can’t measure
— Osho

TTFB
The 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
https://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte

TTLB
As 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 – from humans, bots,
or both)
Poorly organized databases
Poorly written database code 18Performance Optimisation - Fabio Cicerchia

DOM Content Loaded
It’s 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.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Full Load
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM fully loaded and parsed');
});
function load() {
console.log('load event detected!');
}
window.onload = load;
$(document).ready(function () {
console.log('ready');
});
$(window).load(function () {
console.log('loaded');
});
20
OUTPUT
1. ready
2. DOM fully loaded and parsed
3. load event detected!
4. loaded
1
2
3
4

Speed Index
The Speed Index is the average time
at 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).
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

3rd Party?
3rd party calls can make up >50% of page requests.
They are the single greatest potential point of failure for web pages.
http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/

GZip?
GZIP compression saves 50% to 80% bandwidth and it will significantly increase
the website’s loading speed.
Netflix saw a 43% drop in outbound traffic after enabling compression
https://www.keycdn.com/blog/website-performance-optimization/
https://cdnify.com/blog/15-web-performance-stats/

Images?
On average, 64% of a website’s page weight is made up of images.
– HTTP Archive
http://httparchive.org/interesting.php

Redirect?
20% pages contains 5 or more redirects.
And 3% of pages contained 10 or more.
https://www.soasta.com/blog/23-stats-mobile-web-performance-monitoring/

27
C’mon it’s just a
small delay...
YEAH, SURE!

100ms slower?
1% drop in sales (Amazon)
http://www.carbon60.com/blog/milliseconds-are-money-how-much-performance-matters-in-the-cloud

500ms slower?
25% drop in searches (Google)
https://cdnify.com/blog/15-web-performance-stats/

1 second slower?
11% fewer page views, a 16% decrease in customer satisfaction,
and 7% loss in conversions
http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx

2 seconds slower?
During a transaction results in abandonment rates of up to 87%.
This is significantly higher than the average abandonment rate of 70%.
https://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/

3 seconds slower?
53% of visits to mobile sites are abandoned after 3 seconds
– Google's DoubleClick.
https://wpostats.com/

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

10 seconds?
1 out of 4 pages took more than 10 seconds to load.
20% of the top 100 ecommerce sites loads in more than 10 seconds.

To infinity... and beyond!
According to Google's 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.
Google's 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.
https://wpostats.com/

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.
http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf

You are LOSING Visitors
You are LOSING Sales
You are LOSING Ad-revenue
You are WASTING SEO/SEM/PPC budget
SPENDING $$$ on bandwidth and servers

too many irons in the fire

41
WPO (Web Performance Optimisation)
Optimise the poorly performing networks and servers
https://devcentral.f5.com/articles/wils-wpo-versus-feo

FEO (Front-End Optimisation)
Change the content to decrease the amount of traffic
https://devcentral.f5.com/articles/wils-wpo-versus-feo

WCO (Web Content Optimisation)
Make the page rendering faster
http://www.webperformancetoday.com/2011/06/10/wpo-wco-feo-web-performance-optimization/

DSA (Dynamic Site Acceleration)
Bring network resources closer to the user by prefetching or caching files
https://en.wikipedia.org/wiki/Dynamic_site_acceleration

GZip
You send zipped content over the wire, the browser unpacks it
Modern browsers understand compressed content
Search engine spiders do too

Minify
Minify JavaScript and CSS
Inline styles and scripts should also be minified
The Source Maps are loaded only in Dev Mode
https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Avoid 404s
Useless requests
When an external JavaScript is a 404, the browser will still try to parse it and find
something usable in it
They’ll slow down the UX

Optimise Images
Lossless optimisation
Correct dimensions
Save for web
Use the right file format: GIF for animations, JPEG for photograph, otherwise PNG
Don’t Scale Images in HTML
http://www.creativebloq.com/netmag/10-ways-optimise-images-better-performance-71515792

Choose horizontal over vertical when possible
Combine similar colors
Keep color count low
Don’t leave big gaps
Optimise CSS Sprites

Yahoo’s Rules
Minimize 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
Google’s Rules
Avoid 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
Back to basics
http://code.google.com/speed/page-speed/docs/rules_intro.html
http://developer.yahoo.com/yslow/help/#guidelines

Favicon.ico
The 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 (<= 1K)
Animated favicons are not cool
Set Expires header

Minimise iframes
Pros:
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-semantic

What's 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

Items you'll need in the future
Unconditional preload (google.com loads a sprite onload)
Conditional preload (search.yahoo.com after you type in the input box)
Anticipated preload – preload in advance before launching a redesign
When you start typing the page can safely assume you’ll hit the search results
page
Preload Components

Option 1:
Separate subdomain (static.example.org)
Option 2:
A new domain (e.g. yimg.com, ytimg.com, images-amazon.com)
Use Cookie-Free Domains

ETags
ETag is a token that can be associated with a web resource
ETags are meant to help with caching
They take precedence for caching
They never expire
Issues with load balanced environment
A component served from server A has a different ETag than the same component served from B
Most of the time you don’t need them
https://techpunch.co.uk/development/should-your-site-be-using-etags-or-not
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

Reduce Cookies
Eliminate 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

Don't 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

CSS should be at the top
@import blocks parallel downloads
In IE @import is the same as putting <link> at the bottom
<link> allows alternate styles (e.g. for accessibility)
Choose <link> over @import
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
http://alistapart.com/article/alternate

Reduce DOM Elements
World's fastest page? about:blank!
A complex page means more bytes to download, it also means slower DOM access
in JavaScript
Easy to test, just type in Firebug’s console:
document.getElementsByTagName('*').length

Prefetching
DNS prefetching → resolve the DNS
Preconnect → resolve the DNS + TCP handshake + TLS negotiation (optional)
Prefetch → requesting, downloading and storing the asset in the cache
Prerender → load all of the assets of a certain document
https://css-tricks.com/prefetching-preloading-prebrowsing/

ATF
The most important and interesting section should be at the top of the webpage
Make sure to render the Above The Fold content in < 1s
Defer the non-AFT contents
http://whereisthefold.com/

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: HTTP/2 has officially replaced SPDY and made it obsolete.
https://www.maxcdn.com/one/visual-glossary/domain-sharding-2/
https://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/

VanillaJS
http://vanilla-js.com/

Blocks rendering, freezes the browser
Increased memory consumption
Per element, not per image
Avoid Filters

Web Fonts
Blocks text rendering
Fonts are bigger than 14Kb
Use them with care
Remove characters

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 and
25-34% smaller than JPEG images.
https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study
https://developers.google.com/speed/webp/

Animations
Don’t animate from JavaScript for basic stuff
Use requestAnimationFrame
Have a look at GSAP (20x faster than jQuery) and VelocityJS
https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance
https://developer.mozilla.org/en-US/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance
https://greensock.com/js/speed.html
http://velocityjs.org

HTML5 Features
Application Cache Service Workers
Web Storage
Web Workers
Navigation Timing API
Web Sockets
www.mobilehtml5.org
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

CRP
Optimizing the Critical Rendering Path refers to prioritising the display of content
that relates to the current user action.
Perceived Performance is a measure
of how quick a user thinks your site is
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
https://www.smashingmagazine.com/2015/08/understanding-critical-css/
http://blog.teamtreehouse.com/perceived-performance

Latency
Latency is the amount of time it takes to transmit a single piece of data from one
location to another
1. Decrease External HTTP Requests
2. DNS Prefetching
3. Preconnect
4. Use a CDN
5. HTTP/2
6. Caching 77Performance Optimisation - Fabio Cicerchia
https://www.keycdn.com/blog/latency-optimization/

CDN
Get a Content Delivery Network:
Akamai
CDNify (from $10/m)
CloudFlare (free-mium)
MaxCDN (from $9/m)
http://www.cdnplanet.com/cdns/
http://www.cdncalc.com/

CDN (cont’d)

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
https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies
https://www.mnot.net/cache_docs/

Cache (cont’d)
There are only two hard things in Computer Science:
cache invalidation and naming things
— Phil Karlton

SPDY
SPDY is now deprecated
Allows concurrent HTTP requests in one TCP session.
Reduces the bandwidth used by HTTP (header compression & cleaning useless
headers).
Makes SSL the underlying transport protocol, for better security and compatibility
with existing network infrastructure.
https://www.chromium.org/spdy/spdy-whitepaper

HTTP/2
Origins from SPDY by Google
HTTP/2 is protocol designed for
Low latency transport of content over the Web
No change to HTTP semantics
It’s about how data travels through the wire
Key new features in HTTP/2
Multiplexing: multiple streams over a single connection
Header compression: reuse headers from previous requests
Server push: multiple parallel responses for a single request
Prioritisation: some resources have priorities
http://www.slideshare.net/nakov/http2-for-developers

HTTP/2 (cont’d)
84
HTTP/1 workarounds hurt HTTP/2 perf.
Anti-patterns
Domain Sharding
Images Sprites
Resource In-Lining
Merging CSS & JS
https://daniel.haxx.se/http2/
http://caniuse.com/#feat=http2
http://www.itbusinessedge.com/slideshows/best-practices-of-http1.1-becoming-bad-practices-for-http2.html

SSL
HTTPS requires an initial handshake despite it’s 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.
https://www.maxcdn.com/blog/ssl-performance-myth/
https://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/
http://blog.haproxy.com/2011/09/16/benchmarking_ssl_performance/

XHProf

SF Profiler

Summary
Slow Network → Reduce Reqs + Reduce Bytes
Weak CPU = Slow JS → Async + Defer
Focus on ATF
Different Connection Model → Reduce domain sharding, Reduce 304s
Cache → localStorage
http://browserbench.org/JetStream/
http://queue.acm.org/detail.cfm?id=2510122

PRPL
PRPL 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 route.
Render, initial route.
Pre-cache, remaining routes.
Lazy-load, and create remaining routes on demand.
https://developers.google.com/web/fundamentals/performance/prpl-pattern/

AMP
AMP is a way to build web pages for static content that render fast
— Google
Accelerated Mobile Pages in Google Index:
600 million AMP Pages
700,000 Domains
100+ Languages

AMP (cont’d)
We found that AMP pages load four times faster, and use
eight times less data than traditional mobile optimized pages
— Jon Parise (Product Engineer, Pinterest)
https://engineering.pinterest.com/blog/building-faster-mobile-web-experience-amp

AMP (cont’d)
https://www.ampproject.org/docs/get_started/create

AMP (cont’d)
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
https://www.lireo.com/wordcamp-columbus-2016-using-google-accelerated-mobile-pages-with-wordpress/

ESI
Edge Side Includes is a language specification for assembling fragments of web
pages inside other web pages.
Example:
<esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/>
http://www.w3.org/TR/esi-lang
https://www.smashingmagazine.com/2015/02/using-edge-side-includes-in-varnish/

Reverse Proxy
A 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
Nginx
https://en.wikipedia.org/wiki/Reverse_proxy
http://stackoverflow.com/questions/224664/difference-between-proxy-server-and-reverse-proxy-server

Databases
Oracle → https://oracle-base.com/articles/10g/performance-tuning-enhancements-10g
PostgreSQL → https://wiki.postgresql.org/wiki/Performance_Optimization
SQL Server → https://www.mssqltips.com/sql-server-tip-category/9/performance-tuning/
MongoDB → http://www.mikitamanko.com/blog/2013/12/06/mongodb-performance-bottlenecks-optimization-strategies-for-mongodb/
Redis → http://shokunin.co/blog/2014/11/11/operational_redis.html
Memcached → http://cachelot.io/blog/2015/04/20/Speed-up-your-application-by-fine-tuning-Memcached.html
Cassandra → https://tobert.github.io/pages/als-cassandra-21-tuning-guide.html
OrientDB → http://orientdb.com/docs/2.1/Performance-Tuning.html

Databases (cont’d)
http://lmgtfy.com/?q=database+optimisation

Understand the Waterfall
http://www.webperformancetoday.com/2014/03/18/waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains/

Extra
Show Slow www.showslow.com
Webpagetest www.webpagetest.org
Yslow http://yslow.org/
PageSpeed https://developers.google.com/speed/pagespeed/
GTMetrix http://gtmetrix.com/
RedBot http://redbot.org/
Pingdom https://tools.pingdom.com/
SPOF-O-Matic https://chrome.google.com/webstore/search/spof-o-matic

Extra (cont’d)
Blackfire https://blackfire.io/
Yottaa http://www.yottaa.com/
Blitz https://www.blitz.io/
Load Impact https://loadimpact.com/
WonderNetwork https://wondernetwork.com/loadtesting
Loader https://loader.io/
BlazeMeter https://www.blazemeter.com/
WebTuna http://www.webtuna.com/

109BTW, ask me later a 50% discount on these books ;)

Which ones are the most important/common?
These 5 ones:
Reduce Page Size (<500Kb)
Enable (GZip) Compression
Reduce the number of roundtrips (<40 per page)
HTTP Cache Headers (cache long & prosper)
Structure the page (to improve render & download)
CSS First
Javascript last 112Performance Optimisation - Fabio Cicerchia

Even if you apply just those 5 rules…
Your page download times will drop by ~50%

Premature optimization is the root of all
evil
— Donald Knuth

https://github.com/davidsonfellipe/awesome-wpo
116
Bonus #1

http://lmgtfy.com/?q=web+performance+optimisation
117
Bonus #2

Bonus #3

http://bit.do/skjobs

Performance Optimisation

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (11)

Dernier

Dernier (20)

Performance Optimisation