SlideShare ist ein Scribd-Unternehmen logo
1 von 105
Downloaden Sie, um offline zu lesen
Techniques, tips and tools for improve
and measure web performance.
Web Performance
MercadoLibre
Santiago Aimetta
Nicolas Brizuela
Why performance?
Reducing time to response, impact
directly in your revenues.
Impact directly in the bounce rate,
conversions rate and is very important for
user experience.
Some numbers of Meli Search
● 75MM searches/day (870 searches/second)
● Peak traffic 102k rpm (1.700 searches/second)
● Avg response time: 320ms
Amazon test 2008
● + 100ms >> -1% sales
Bing test 2009
● + 2000ms >> -4.3% revenues/user
MercadoLibre 2013
● + 3000ms >> + 3% in Bounce rate
-1% in Revenues
Web performance   mercadolibre - ECI 2013
Performance golden rules
● 80-90% of the end-user response time is spent on the
frontend.
We start there
● Greater potential
● Simple
● Proven to work
Responsibilities
Web performance   mercadolibre - ECI 2013
Time to First Byte
What is this?
Is the amount of time between the client
makes an HTTP request and the browser
starts receiving the first byte.
How much time is spent making the
request until receive the first byte of the
response.
1. DNS LOOKUP
2. INITIAL CONNECTION
3. WAITING
4. RECEIVING DATA
5. CLOSING CONNECTION
1. DNS LOOKUP
2. INITIAL CONNECTION
3. WAITING
4. RECEIVING DATA
5. CLOSING CONNECTION
1. DNS LOOKUP
2. INITIAL CONNECTION
3. WAITING
4. RECEIVING DATA
5. CLOSING CONNECTION
1. DNS LOOKUP
2. INITIAL CONNECTION
3. WAITING
4. RECEIVING DATA
5. CLOSING CONNECTION
1. DNS LOOKUP
2. INITIAL CONNECTION
3. WAITING
4. RECEIVING DATA
5. CLOSING CONNECTION
<< Time to first Byte = TTFB
Expected values
● Static content
○ Such as Html, Js, Css and images
○ Should be under 100 miliseconds
● Dinamic content
○ Includes all the server side processing plus the
network infrastructure work
○ Should be beetween 200 and 500 miliseconds
Possible problems
● To many connections to the server
● Disk IO
Hardware check..
● Disk IO
● RAM usage
● Swap usage
● Network bottlenecks
Configuration check..
● Webserver config (Apache,Jboss,..) / Php config
● Database settings
● Network settings
● Api / webservices latency
How to improve it?
Hardware
● CDN- Content delivery network (Akamai,
CloudFront, BitGravity)
● Multiple servers with load balancing ( f5 , nginx )
● NAS - Filers ( T-com, IBM, HP)
● Web caches ( Varnish, Polipo, Squid, TrafficServer )
Software
● Parallel processing
● Database tuning
● Sql tuning
● API / Webservices response caching
● NoSql (MongoDB, Bigtable, Redis)
● Chunking - Early buffer flush
Tools
Analyzers
● Google Page Speed
● WebPageTest
● Firebug
Custom measuring
● Navigation timing api
var timing = window.performance.timing;
var ttfb = timing.responseStart -timing.connectEnd;
CDN (Content Delivery Network)
● Group of servers distributed in multiple datacenters
across the internet
● The CDN serves the content using the servers that
are closer to the client
● The network latency is reduced by the proximity
between client and server.
Web performance   mercadolibre - ECI 2013
● The resources can be cached
● Multiple servers prevent bottlenecks
● Useful for static resources like Html, Css, fonts , Js,
videos , images, documents, etc
GZIP (HTTP compression)
● Type of http compression like deflate
● This saves bandwidth and increases speed.
● Web client (i.e Browser) sends an Accept-Encoding :
gzip, deflate header
● Web server responds Content-Encoding : gzip if the
data is compressed
Web performance   mercadolibre - ECI 2013
● Reduce the 70%-90% of the response size
● Use in Html, Css, Js, Xml, Json
● Dont use in Pdf and images, they are already
compressed
● Better compression tips:
○ Sorted key values : Css, html attributes
○ use one type of quotes, " or '
○ Css and Js minification
Cache
Benefits
● Saves requests to resources that changes
infrequently.
● HTTP caching saves the resources in the
browser or the proxy.
● Should be cached: CSS, JS, Static HTML, Images,
Flash, Pdf, media files.
How it works?
How it works?
Response Headers
● Strong ones:
○ These headers express the resource lifetime.
○ The value is a date or a timestamp.
○ A resource is downloaded again when the
expiration date is reached.
○ Expires and Cache Control.
Response Headers
● Weak ones:
○ Specifies characteristics to identify if the
resource change
○ The browser sends conditional GETs to check
○ Last-Modified, Etag
Cache Control
● Strong header
● Cache-Control:public
● Cache-Control:private
● i.e: Cache-Control:public, max-age=3600
Expires
● Sets an expiration date in the future.
● if Cache-control and expires are set for the same.
resource Cache-control takes precedence.
● i.e: Expires: Mon, 8 Jul 2013 21:31:12 GMT.
Last modified
● Is a time based header.
● The application specifies the last modified header
i.e: Last-Modified: Tue, 09 jul 2013 17:45:57 GMT.
● The next time the browser sends a conditional GET
asking if the resource has changed
i.e If-Modified-Since: Tue, 09 jul 2013 17:45:57 GMT.
● If the resource hasn't changed the server return an
empty response with the 304 code (Not Modified)
Etag
● Use an md5 hash to identify if the resource change.
ETag: "15f0fff99ed5aae4edffdd6496d7131f".
● In the next request the header If-None-Match is sent
with the ETag value
i.e: If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"
● If the ETag match, the server responds 304
Tools
● Most of browser tools has a network analyzer
● The example below were made with Chrome dev tool
Tips
● For static content: use Cache-Control.
● Cache-Control is easy to check.
● Avoid conditional Gets.
● Use the app version or a fingerprint in the url.
Tips
● For private content: use Cache-Control :
private to avoid proxy caching.
● Prevent caching: use Cache-Control:no-cache,
no-store.
● Urls with query string.
Keep alive (reuse connections)
● Client and server keep the connection open,
unless the client indicates otherwise (via
Connection: close header).
● Http connections are expensive.
● Saves TCP handshake ( 150 ms average ).
● Persistent connections send multiple request and
response interactions over single connection.
● If the connection is not persistent you can specify a
time out.
Persisten connection
Advantages
● CPU & memory savings, less tcp connections and
fewer TCP control blocks.
● Allows request and response pipelining.
● Reduce network load, less packets sent.
● Supported by modern browsers.
Parallel downloads
The biggest impact on end-user response
times is the number of components in the
page
How it works?
● Images can be downloaded in parallel
● JS and CSS..other story
● Loading steps
○ downloading (can be parallel )
○ parsing
○ executing
● Rules
○ Scripts prevents other scripts to be downloaded
and parsed
○ Stylessheets prevent scripts to be downloaded
and parsed
○ Modern browsers start looking ahead in the
document and pre-loading stylesheets and scripts
The HTTP/1.1 RFC
A single-user client SHOULD NOT
maintain more than 2 connections with
any server or proxy.
The HTTP/1.1 RFC
A single-user client SHOULD NOT
maintain more than 2 connections with
any server or proxy.
IE 6 and 7: 2
IE 8: 6
IE 9: 6
IE 10: 8
Firefox 2: 2
Firefox 3: 6
Firefox 4 to 17: 6
Opera 9.63: 4
Opera 10: 8
Opera 11 and 12: 6
Chrome 1 and 2: 6
Chrome 3: 4
Chrome 4 to 28: 6
Safari 3 and 4: 4
How browsers handle it?
● Browsers don't have to follow
this guideline.
● Parallel connections.
Nice trick!
● The number of parallel connections applies to a
server.
● Use multiple domain names
○ i.e resources1.domain.com, resources2.
domain.com
○ Expands per server connection limit.
○ If the domains are CNAMEs of the same ip,
works too!
Nice trick!
Trade off
● DNS lookup ~ 150 ms
● Browser cpu per parallel download
● Bandwidth
Reduce client request time by reducing the
request size
Small request
Objective
● Minimize the request overhead
● Cut down on client request time by reducing the
number of bytes uploaded as request header data
● Average request size is 1500 bytes.
How
● Keeping cookies and request headers as small as
possible ensures that an HTTP request can fit into a
single packet.
● Small urls.
● Small cookies.
● Remove unused header.
For static content
Cookieless domain
Static content
● Objective:
○ If you set a cookie in particular domain, all
subsequent HTTP requests for that domain must
include the cookie.
○ Static content, such as images, JS and CSS files,
don't need to be accompanied by cookies.
○ Avoid caching user info.
Static content
● How:
○ Create a domain for static content
○ Use caching headers
○ CDNs avoid cookies
Use browser idle time
Prefetching
Objective
● Use the browser idle time to download or
prefetch documents that the user might visit in
the near future.
Which content prefetch?
● Images commonly used.
● The next page of the search results.
● Prefetch common DNS.
● Image:
● Full page
● DNS
● Be aware of
○ Bandwidth, website statistics
Where and why
Javascript load & execution
Where to load?
Where and why?
● In the head: RUM, analytics
● before </body>: scripts needed by page load
● After page load: scripts needed soon after
page load
● On demand: In reaction to users
With and without blocking
Javascript loading
Motivation
● Scripts blocks downloads and render.
Several ways avoid it
● XHR Eval
● XHR Injection
● Script in Iframe
● Script DOM Element
● Script Defer
Avoid blocking - Simple approach
Avoid blocking - adding a callback
Avoid blocking - adding a callback
Avoid blocking - cross browser
Avoid blocking - onload event
● Blocks onload event until the script have been
downloaded and executed
○ script defer
○ script async
○ script dom element
● Fix
○ If you want to ensure that the JavaScript doesn't
start to download or execute until after the load
event, you can insert it using the window.onload
event handler:
Avoid blocking - onload event
Sometimes the image weight its 40-50% of
the complete page weight
Image Optimization
Lossless optimizations
● Are those that take an image and produce another
image, which renders exactly the same and it's
smaller in file size than the original
● The lossless file size savings come from:
○ Using better compression algorithms to store the
pixel information.
○ Removing unneeded metadata that goes with the
image file.
GIF
● The best way to optimize a GIF image is to convert it
to PNG8.
● It can store up to 256 colors, just like GIF.
● PNG8 supports alpha transparency.
● Software:
○ Photoshop
○ OptiPNG
● Animated GIF
○ Don't convert to PNG
○ Software:
■ GIFSicle
JPEG
● Edit image metadata
○ Software: JPEGTran, EXIFTool
● Optimizing compression
○ Software: JPEGTran
● Cropping
○ Rotation to 90, 180, 270 degrees
PNG
● Icons, illustrations and photos with high contrast.
● Support transparency (alpha channel).
● Optimizations
○ Strip PNG chunks
○ Better pixel compression
● Software
○ TinyPNG
○ OptiPNG
○ PNGOptimizer
● Stoyan test over 1000 sites
○ Convert GIFs to PNG ( -23% )
○ PNG optimization tools ( -17% )
○ Run JPEGTran on all JPEGs ( -13% )
○ Optimize animations with GIFSicle ( -4% )
JPEG Progressive
Perceived speed is more important that actual speed
JPEG Progressive
● Two types of images, baseline and progressive
● Baseline jpeg: is a full-resolution top-to-bottom scan
of the image
JPEG Progressive
● Progressive jpeg: is a series of scans of increasing
quality, loads from low quality to high in several
"passes"
JPEG Progressive
● The progressive jpeg’s first pass is low-resolution, but
it contains as much information, or more, as the small
image
● Software:
○ jpegtran
○ jpegcrop
● Images of file size 10K and over have a better chance
of being smaller when using the progressive JPEG
format
WebP
A new image format for the Web
WebP
● What is?
○ is a new image format that provides lossless and
lossy compression for images on the web
● 26% smaller than PNG
● 25-34% smaller than JPEG
● Supports transparency ( alpha channel )
WebP
● Software
○ CwebP
○ DwebP
○ libwebp
● Support
○ Chrome 9+
○ Opera 12+
○ Android 4+
○ Opera mobile 11+
○ Chrome for android 27+
Muchas gracias!!!
Web performance   mercadolibre - ECI 2013
Links
● http://www.rackaid.com/resources/time-to-
first-byte/
● http://jackwhitey.hubpages.com/hub/cdn
● https://developers.google.
com/speed/articles/gzip
● https://devcenter.heroku.
com/articles/increasing-application-
performance-with-http-cache-headers#http-
cache-headers
● https://developers.google.
com/speed/docs/best-practices/caching
Links
● http://www.nczonline.
net/blog/2009/06/23/loading-javascript-
without-blocking/
● http://www.stevesouders.
com/blog/2009/04/27/loading-scripts-without-
blocking/
● http://www.stevesouders.
com/blog/2008/12/27/coupling-async-scripts/
● http://calendar.perfplanet.com/2010/the-
truth-about-non-blocking-javascript/
Links
● http://www.igvita.com/2011/10/04/optimizing-
http-keep-alive-and-pipelining/
● http://tools.ietf.org/id/draft-thomson-hybi-
http-timeout-01.html#rfc.section.2
● http://www.dcs.bbk.ac.
uk/~ptw/teaching/http/slide15.html
● http://www.dcs.bbk.ac.
uk/~ptw/teaching/http/slide16.html
● http://abdussamad.com/archives/169-
Apache-optimization:-KeepAlive-On-or-Off.
html
Links
● http://davidwalsh.name/javascript-domready
● http://api.jquery.com/ready/
● http://alexsexton.com/blog/2010/01/dont-let-
document-ready-slow-you-down/
● https://developers.google.
com/speed/docs/best-practices/request
● http://www.nczonline.
net/blog/2009/05/05/http-cookies-explained/
Links
● http://www.catswhocode.
com/blog/mastering-html5-prefetching
● http://davidwalsh.name/dns-prefetching
● http://davidwalsh.name/html5-prefetch
● http://statichtml.com/2011/link-prefetching-
broken-in-chrome.html
● http://www.bookofspeed.com/chapter5.html
● http://calendar.perfplanet.
com/2012/progressive-jpegs-a-new-best-
practice/
Links
● http://caniuse.com/webp
● https://developers.google.com/speed/webp/?
hl=es-ES
● http://news.cnet.com/8301-1023_3-
57585114-93/google-cuts-network-usage-
by-terabytes-by-switching-to-webp/
● https://developers.google.com/speed/spdy/
● http://www.chromium.org/spdy
● http://googlecode.blogspot.com.
ar/2012/01/making-web-speedier-and-safer-
with-spdy.html
Links
● http://dev.chromium.org/spdy/spdy-best-
practices
● http://www.slideshare.net/nzakas/enough-
withthejavascriptalready
● http://ejohn.org/blog/browser-page-load-
performance/
● http://www.stevesouders.
com/blog/2008/03/20/roundup-on-parallel-
connections/
● http://www.yuiblog.
com/blog/2007/04/11/performance-research-

Weitere ähnliche Inhalte

Was ist angesagt?

High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlJoomla!Days Netherlands
 
Speed Up WordPress Websites - Part 1 - WordPress Cairo Meetup
Speed Up WordPress Websites - Part 1 - WordPress Cairo MeetupSpeed Up WordPress Websites - Part 1 - WordPress Cairo Meetup
Speed Up WordPress Websites - Part 1 - WordPress Cairo MeetupAhmed Mohammed Nagdy
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side OptimizationPatrick Huesler
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPChau Thanh
 
Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performaceTuyển Đoàn
 
Cache hcm-topdev
Cache hcm-topdevCache hcm-topdev
Cache hcm-topdevThanh Chau
 
AJAX for Scalability
AJAX for ScalabilityAJAX for Scalability
AJAX for ScalabilityTuenti
 
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_Nguyen Duc Phu
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodbPrem Sanil
 
WordPress Need For Speed
WordPress Need For SpeedWordPress Need For Speed
WordPress Need For Speedpdeschen
 
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishEl Mahdi Benzekri
 
kranonit S06E01 Игорь Цинько: High load
kranonit S06E01 Игорь Цинько: High loadkranonit S06E01 Игорь Цинько: High load
kranonit S06E01 Игорь Цинько: High loadKrivoy Rog IT Community
 

Was ist angesagt? (17)

Ui perf
Ui perfUi perf
Ui perf
 
High Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nlHigh Performance - Joomla!Days NL 2009 #jd09nl
High Performance - Joomla!Days NL 2009 #jd09nl
 
Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009Caching for Cash, part 4 DPC 2009
Caching for Cash, part 4 DPC 2009
 
Frontend Caching - The "new" frontier
Frontend Caching - The "new" frontierFrontend Caching - The "new" frontier
Frontend Caching - The "new" frontier
 
Speed Up WordPress Websites - Part 1 - WordPress Cairo Meetup
Speed Up WordPress Websites - Part 1 - WordPress Cairo MeetupSpeed Up WordPress Websites - Part 1 - WordPress Cairo Meetup
Speed Up WordPress Websites - Part 1 - WordPress Cairo Meetup
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 
WordCamp RVA
WordCamp RVAWordCamp RVA
WordCamp RVA
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHP
 
Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performace
 
Cache hcm-topdev
Cache hcm-topdevCache hcm-topdev
Cache hcm-topdev
 
AJAX for Scalability
AJAX for ScalabilityAJAX for Scalability
AJAX for Scalability
 
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
 
Cloud Hosted mongodb
Cloud Hosted mongodbCloud Hosted mongodb
Cloud Hosted mongodb
 
WordPress Need For Speed
WordPress Need For SpeedWordPress Need For Speed
WordPress Need For Speed
 
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and Varnish
 
5 critical-optimizations.v2
5 critical-optimizations.v25 critical-optimizations.v2
5 critical-optimizations.v2
 
kranonit S06E01 Игорь Цинько: High load
kranonit S06E01 Игорь Цинько: High loadkranonit S06E01 Игорь Цинько: High load
kranonit S06E01 Игорь Цинько: High load
 

Ähnlich wie Web performance mercadolibre - ECI 2013

20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performanceAndrew Siemer
 
SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0Mike Belshe
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinJonathan Hochman
 
Drupal 7 performance and optimization
Drupal 7 performance and optimizationDrupal 7 performance and optimization
Drupal 7 performance and optimizationShafqat Hussain
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Ontico
 
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceSpark::red
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testingRoman Ananev
 
Supercharge Application Delivery to Satisfy Users
Supercharge Application Delivery to Satisfy UsersSupercharge Application Delivery to Satisfy Users
Supercharge Application Delivery to Satisfy UsersNGINX, Inc.
 
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Amazon Web Services
 
AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)Amazon Web Services
 
NGINX for Application Delivery & Acceleration
NGINX for Application Delivery & AccelerationNGINX for Application Delivery & Acceleration
NGINX for Application Delivery & AccelerationNGINX, Inc.
 
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013  High Performance Web Applications with TurboGearsPyGrunn2013  High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGearsAlessandro Molina
 
What is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWhat is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWPSFO Meetup Group
 
Magento Meetup New Delhi- Magento2 Speed Optimization
Magento Meetup New Delhi- Magento2 Speed OptimizationMagento Meetup New Delhi- Magento2 Speed Optimization
Magento Meetup New Delhi- Magento2 Speed OptimizationWebkul Software Pvt. Ltd.
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontendtkramar
 
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...Amazon Web Services
 
Tool it Up! - Session #2 - NetPanel
Tool it Up! - Session #2 - NetPanelTool it Up! - Session #2 - NetPanel
Tool it Up! - Session #2 - NetPaneltoolitup
 
Spreadshirt Techcamp 2018 - Hold until Told
Spreadshirt Techcamp 2018 - Hold until ToldSpreadshirt Techcamp 2018 - Hold until Told
Spreadshirt Techcamp 2018 - Hold until ToldMartin Breest
 
SANDcamp 2014 - A Perfect Launch, Every Time
SANDcamp 2014 - A Perfect Launch, Every TimeSANDcamp 2014 - A Perfect Launch, Every Time
SANDcamp 2014 - A Perfect Launch, Every TimeJon Peck
 

Ähnlich wie Web performance mercadolibre - ECI 2013 (20)

20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0SPDY and What to Consider for HTTP/2.0
SPDY and What to Consider for HTTP/2.0
 
Breaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites WinBreaking the Speed Limit: Faster Websites Win
Breaking the Speed Limit: Faster Websites Win
 
Drupal 7 performance and optimization
Drupal 7 performance and optimizationDrupal 7 performance and optimization
Drupal 7 performance and optimization
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)
 
Configuring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web PerormanceConfiguring Apache Servers for Better Web Perormance
Configuring Apache Servers for Better Web Perormance
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testing
 
Supercharge Application Delivery to Satisfy Users
Supercharge Application Delivery to Satisfy UsersSupercharge Application Delivery to Satisfy Users
Supercharge Application Delivery to Satisfy Users
 
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
Dynamic Content Acceleration: Lightning Fast Web Apps with Amazon CloudFront ...
 
AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)AWS Summit London 2014 | Dynamic Content Acceleration (300)
AWS Summit London 2014 | Dynamic Content Acceleration (300)
 
NGINX for Application Delivery & Acceleration
NGINX for Application Delivery & AccelerationNGINX for Application Delivery & Acceleration
NGINX for Application Delivery & Acceleration
 
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013  High Performance Web Applications with TurboGearsPyGrunn2013  High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGears
 
What is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress HostingWhat is Nginx and Why You Should to Use it with Wordpress Hosting
What is Nginx and Why You Should to Use it with Wordpress Hosting
 
Magento Meetup New Delhi- Magento2 Speed Optimization
Magento Meetup New Delhi- Magento2 Speed OptimizationMagento Meetup New Delhi- Magento2 Speed Optimization
Magento Meetup New Delhi- Magento2 Speed Optimization
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
Dynamic Content Acceleration: Amazon CloudFront and Amazon Route 53 (ARC309) ...
 
Tool it Up! - Session #2 - NetPanel
Tool it Up! - Session #2 - NetPanelTool it Up! - Session #2 - NetPanel
Tool it Up! - Session #2 - NetPanel
 
Spreadshirt Techcamp 2018 - Hold until Told
Spreadshirt Techcamp 2018 - Hold until ToldSpreadshirt Techcamp 2018 - Hold until Told
Spreadshirt Techcamp 2018 - Hold until Told
 
SANDcamp 2014 - A Perfect Launch, Every Time
SANDcamp 2014 - A Perfect Launch, Every TimeSANDcamp 2014 - A Perfect Launch, Every Time
SANDcamp 2014 - A Perfect Launch, Every Time
 

Kürzlich hochgeladen

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Kürzlich hochgeladen (20)

NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Web performance mercadolibre - ECI 2013

  • 1. Techniques, tips and tools for improve and measure web performance. Web Performance MercadoLibre Santiago Aimetta Nicolas Brizuela
  • 2. Why performance? Reducing time to response, impact directly in your revenues. Impact directly in the bounce rate, conversions rate and is very important for user experience.
  • 3. Some numbers of Meli Search ● 75MM searches/day (870 searches/second) ● Peak traffic 102k rpm (1.700 searches/second) ● Avg response time: 320ms
  • 4. Amazon test 2008 ● + 100ms >> -1% sales Bing test 2009 ● + 2000ms >> -4.3% revenues/user MercadoLibre 2013 ● + 3000ms >> + 3% in Bounce rate -1% in Revenues
  • 6. Performance golden rules ● 80-90% of the end-user response time is spent on the frontend. We start there ● Greater potential ● Simple ● Proven to work
  • 10. What is this? Is the amount of time between the client makes an HTTP request and the browser starts receiving the first byte. How much time is spent making the request until receive the first byte of the response.
  • 11. 1. DNS LOOKUP 2. INITIAL CONNECTION 3. WAITING 4. RECEIVING DATA 5. CLOSING CONNECTION
  • 12. 1. DNS LOOKUP 2. INITIAL CONNECTION 3. WAITING 4. RECEIVING DATA 5. CLOSING CONNECTION
  • 13. 1. DNS LOOKUP 2. INITIAL CONNECTION 3. WAITING 4. RECEIVING DATA 5. CLOSING CONNECTION
  • 14. 1. DNS LOOKUP 2. INITIAL CONNECTION 3. WAITING 4. RECEIVING DATA 5. CLOSING CONNECTION
  • 15. 1. DNS LOOKUP 2. INITIAL CONNECTION 3. WAITING 4. RECEIVING DATA 5. CLOSING CONNECTION << Time to first Byte = TTFB
  • 17. ● Static content ○ Such as Html, Js, Css and images ○ Should be under 100 miliseconds ● Dinamic content ○ Includes all the server side processing plus the network infrastructure work ○ Should be beetween 200 and 500 miliseconds
  • 18. Possible problems ● To many connections to the server ● Disk IO
  • 19. Hardware check.. ● Disk IO ● RAM usage ● Swap usage ● Network bottlenecks
  • 20. Configuration check.. ● Webserver config (Apache,Jboss,..) / Php config ● Database settings ● Network settings ● Api / webservices latency
  • 22. Hardware ● CDN- Content delivery network (Akamai, CloudFront, BitGravity) ● Multiple servers with load balancing ( f5 , nginx ) ● NAS - Filers ( T-com, IBM, HP) ● Web caches ( Varnish, Polipo, Squid, TrafficServer )
  • 23. Software ● Parallel processing ● Database tuning ● Sql tuning ● API / Webservices response caching ● NoSql (MongoDB, Bigtable, Redis) ● Chunking - Early buffer flush
  • 24. Tools
  • 25. Analyzers ● Google Page Speed ● WebPageTest ● Firebug
  • 26. Custom measuring ● Navigation timing api var timing = window.performance.timing; var ttfb = timing.responseStart -timing.connectEnd;
  • 28. ● Group of servers distributed in multiple datacenters across the internet ● The CDN serves the content using the servers that are closer to the client ● The network latency is reduced by the proximity between client and server.
  • 30. ● The resources can be cached ● Multiple servers prevent bottlenecks ● Useful for static resources like Html, Css, fonts , Js, videos , images, documents, etc
  • 32. ● Type of http compression like deflate ● This saves bandwidth and increases speed. ● Web client (i.e Browser) sends an Accept-Encoding : gzip, deflate header ● Web server responds Content-Encoding : gzip if the data is compressed
  • 34. ● Reduce the 70%-90% of the response size ● Use in Html, Css, Js, Xml, Json ● Dont use in Pdf and images, they are already compressed ● Better compression tips: ○ Sorted key values : Css, html attributes ○ use one type of quotes, " or ' ○ Css and Js minification
  • 35. Cache
  • 36. Benefits ● Saves requests to resources that changes infrequently. ● HTTP caching saves the resources in the browser or the proxy. ● Should be cached: CSS, JS, Static HTML, Images, Flash, Pdf, media files.
  • 39. Response Headers ● Strong ones: ○ These headers express the resource lifetime. ○ The value is a date or a timestamp. ○ A resource is downloaded again when the expiration date is reached. ○ Expires and Cache Control.
  • 40. Response Headers ● Weak ones: ○ Specifies characteristics to identify if the resource change ○ The browser sends conditional GETs to check ○ Last-Modified, Etag
  • 41. Cache Control ● Strong header ● Cache-Control:public ● Cache-Control:private ● i.e: Cache-Control:public, max-age=3600
  • 42. Expires ● Sets an expiration date in the future. ● if Cache-control and expires are set for the same. resource Cache-control takes precedence. ● i.e: Expires: Mon, 8 Jul 2013 21:31:12 GMT.
  • 43. Last modified ● Is a time based header. ● The application specifies the last modified header i.e: Last-Modified: Tue, 09 jul 2013 17:45:57 GMT. ● The next time the browser sends a conditional GET asking if the resource has changed i.e If-Modified-Since: Tue, 09 jul 2013 17:45:57 GMT. ● If the resource hasn't changed the server return an empty response with the 304 code (Not Modified)
  • 44. Etag ● Use an md5 hash to identify if the resource change. ETag: "15f0fff99ed5aae4edffdd6496d7131f". ● In the next request the header If-None-Match is sent with the ETag value i.e: If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f" ● If the ETag match, the server responds 304
  • 45. Tools ● Most of browser tools has a network analyzer ● The example below were made with Chrome dev tool
  • 46. Tips ● For static content: use Cache-Control. ● Cache-Control is easy to check. ● Avoid conditional Gets. ● Use the app version or a fingerprint in the url.
  • 47. Tips ● For private content: use Cache-Control : private to avoid proxy caching. ● Prevent caching: use Cache-Control:no-cache, no-store. ● Urls with query string.
  • 48. Keep alive (reuse connections)
  • 49. ● Client and server keep the connection open, unless the client indicates otherwise (via Connection: close header). ● Http connections are expensive. ● Saves TCP handshake ( 150 ms average ).
  • 50. ● Persistent connections send multiple request and response interactions over single connection. ● If the connection is not persistent you can specify a time out.
  • 52. Advantages ● CPU & memory savings, less tcp connections and fewer TCP control blocks. ● Allows request and response pipelining. ● Reduce network load, less packets sent. ● Supported by modern browsers.
  • 53. Parallel downloads The biggest impact on end-user response times is the number of components in the page
  • 54. How it works? ● Images can be downloaded in parallel ● JS and CSS..other story
  • 55. ● Loading steps ○ downloading (can be parallel ) ○ parsing ○ executing ● Rules ○ Scripts prevents other scripts to be downloaded and parsed ○ Stylessheets prevent scripts to be downloaded and parsed ○ Modern browsers start looking ahead in the document and pre-loading stylesheets and scripts
  • 56. The HTTP/1.1 RFC A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.
  • 57. The HTTP/1.1 RFC A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.
  • 58. IE 6 and 7: 2 IE 8: 6 IE 9: 6 IE 10: 8 Firefox 2: 2 Firefox 3: 6 Firefox 4 to 17: 6 Opera 9.63: 4 Opera 10: 8 Opera 11 and 12: 6 Chrome 1 and 2: 6 Chrome 3: 4 Chrome 4 to 28: 6 Safari 3 and 4: 4 How browsers handle it? ● Browsers don't have to follow this guideline. ● Parallel connections.
  • 59. Nice trick! ● The number of parallel connections applies to a server. ● Use multiple domain names ○ i.e resources1.domain.com, resources2. domain.com ○ Expands per server connection limit. ○ If the domains are CNAMEs of the same ip, works too!
  • 61. Trade off ● DNS lookup ~ 150 ms ● Browser cpu per parallel download ● Bandwidth
  • 62. Reduce client request time by reducing the request size Small request
  • 63. Objective ● Minimize the request overhead ● Cut down on client request time by reducing the number of bytes uploaded as request header data ● Average request size is 1500 bytes.
  • 64. How ● Keeping cookies and request headers as small as possible ensures that an HTTP request can fit into a single packet. ● Small urls. ● Small cookies. ● Remove unused header.
  • 66. Static content ● Objective: ○ If you set a cookie in particular domain, all subsequent HTTP requests for that domain must include the cookie. ○ Static content, such as images, JS and CSS files, don't need to be accompanied by cookies. ○ Avoid caching user info.
  • 67. Static content ● How: ○ Create a domain for static content ○ Use caching headers ○ CDNs avoid cookies
  • 68. Use browser idle time Prefetching
  • 69. Objective ● Use the browser idle time to download or prefetch documents that the user might visit in the near future.
  • 70. Which content prefetch? ● Images commonly used. ● The next page of the search results. ● Prefetch common DNS.
  • 71. ● Image: ● Full page ● DNS ● Be aware of ○ Bandwidth, website statistics
  • 72. Where and why Javascript load & execution
  • 74. Where and why? ● In the head: RUM, analytics ● before </body>: scripts needed by page load ● After page load: scripts needed soon after page load ● On demand: In reaction to users
  • 75. With and without blocking Javascript loading
  • 76. Motivation ● Scripts blocks downloads and render.
  • 77. Several ways avoid it ● XHR Eval ● XHR Injection ● Script in Iframe ● Script DOM Element ● Script Defer
  • 78. Avoid blocking - Simple approach
  • 79. Avoid blocking - adding a callback
  • 80. Avoid blocking - adding a callback
  • 81. Avoid blocking - cross browser
  • 82. Avoid blocking - onload event ● Blocks onload event until the script have been downloaded and executed ○ script defer ○ script async ○ script dom element ● Fix ○ If you want to ensure that the JavaScript doesn't start to download or execute until after the load event, you can insert it using the window.onload event handler:
  • 83. Avoid blocking - onload event
  • 84. Sometimes the image weight its 40-50% of the complete page weight Image Optimization
  • 85. Lossless optimizations ● Are those that take an image and produce another image, which renders exactly the same and it's smaller in file size than the original ● The lossless file size savings come from: ○ Using better compression algorithms to store the pixel information. ○ Removing unneeded metadata that goes with the image file.
  • 86. GIF ● The best way to optimize a GIF image is to convert it to PNG8. ● It can store up to 256 colors, just like GIF. ● PNG8 supports alpha transparency. ● Software: ○ Photoshop ○ OptiPNG ● Animated GIF ○ Don't convert to PNG ○ Software: ■ GIFSicle
  • 87. JPEG ● Edit image metadata ○ Software: JPEGTran, EXIFTool ● Optimizing compression ○ Software: JPEGTran ● Cropping ○ Rotation to 90, 180, 270 degrees
  • 88. PNG ● Icons, illustrations and photos with high contrast. ● Support transparency (alpha channel). ● Optimizations ○ Strip PNG chunks ○ Better pixel compression ● Software ○ TinyPNG ○ OptiPNG ○ PNGOptimizer
  • 89. ● Stoyan test over 1000 sites ○ Convert GIFs to PNG ( -23% ) ○ PNG optimization tools ( -17% ) ○ Run JPEGTran on all JPEGs ( -13% ) ○ Optimize animations with GIFSicle ( -4% )
  • 90. JPEG Progressive Perceived speed is more important that actual speed
  • 91. JPEG Progressive ● Two types of images, baseline and progressive ● Baseline jpeg: is a full-resolution top-to-bottom scan of the image
  • 92. JPEG Progressive ● Progressive jpeg: is a series of scans of increasing quality, loads from low quality to high in several "passes"
  • 93. JPEG Progressive ● The progressive jpeg’s first pass is low-resolution, but it contains as much information, or more, as the small image ● Software: ○ jpegtran ○ jpegcrop ● Images of file size 10K and over have a better chance of being smaller when using the progressive JPEG format
  • 94. WebP A new image format for the Web
  • 95. WebP ● What is? ○ is a new image format that provides lossless and lossy compression for images on the web ● 26% smaller than PNG ● 25-34% smaller than JPEG ● Supports transparency ( alpha channel )
  • 96. WebP ● Software ○ CwebP ○ DwebP ○ libwebp ● Support ○ Chrome 9+ ○ Opera 12+ ○ Android 4+ ○ Opera mobile 11+ ○ Chrome for android 27+
  • 99. Links ● http://www.rackaid.com/resources/time-to- first-byte/ ● http://jackwhitey.hubpages.com/hub/cdn ● https://developers.google. com/speed/articles/gzip ● https://devcenter.heroku. com/articles/increasing-application- performance-with-http-cache-headers#http- cache-headers ● https://developers.google. com/speed/docs/best-practices/caching
  • 100. Links ● http://www.nczonline. net/blog/2009/06/23/loading-javascript- without-blocking/ ● http://www.stevesouders. com/blog/2009/04/27/loading-scripts-without- blocking/ ● http://www.stevesouders. com/blog/2008/12/27/coupling-async-scripts/ ● http://calendar.perfplanet.com/2010/the- truth-about-non-blocking-javascript/
  • 101. Links ● http://www.igvita.com/2011/10/04/optimizing- http-keep-alive-and-pipelining/ ● http://tools.ietf.org/id/draft-thomson-hybi- http-timeout-01.html#rfc.section.2 ● http://www.dcs.bbk.ac. uk/~ptw/teaching/http/slide15.html ● http://www.dcs.bbk.ac. uk/~ptw/teaching/http/slide16.html ● http://abdussamad.com/archives/169- Apache-optimization:-KeepAlive-On-or-Off. html
  • 102. Links ● http://davidwalsh.name/javascript-domready ● http://api.jquery.com/ready/ ● http://alexsexton.com/blog/2010/01/dont-let- document-ready-slow-you-down/ ● https://developers.google. com/speed/docs/best-practices/request ● http://www.nczonline. net/blog/2009/05/05/http-cookies-explained/
  • 103. Links ● http://www.catswhocode. com/blog/mastering-html5-prefetching ● http://davidwalsh.name/dns-prefetching ● http://davidwalsh.name/html5-prefetch ● http://statichtml.com/2011/link-prefetching- broken-in-chrome.html ● http://www.bookofspeed.com/chapter5.html ● http://calendar.perfplanet. com/2012/progressive-jpegs-a-new-best- practice/
  • 104. Links ● http://caniuse.com/webp ● https://developers.google.com/speed/webp/? hl=es-ES ● http://news.cnet.com/8301-1023_3- 57585114-93/google-cuts-network-usage- by-terabytes-by-switching-to-webp/ ● https://developers.google.com/speed/spdy/ ● http://www.chromium.org/spdy ● http://googlecode.blogspot.com. ar/2012/01/making-web-speedier-and-safer- with-spdy.html
  • 105. Links ● http://dev.chromium.org/spdy/spdy-best- practices ● http://www.slideshare.net/nzakas/enough- withthejavascriptalready ● http://ejohn.org/blog/browser-page-load- performance/ ● http://www.stevesouders. com/blog/2008/03/20/roundup-on-parallel- connections/ ● http://www.yuiblog. com/blog/2007/04/11/performance-research-