web performance optimization - mercadolibre
DESCRIPTION
Review web performance optimization - MercadoLibreTRANSCRIPT
![Page 1: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/1.jpg)
Techniques, tips and tools for improve and measure web performance.
Web Performance OptimizationWorkshop - MercadoLibre
Santiago AimettaNicolas BrizuelaPablo Moretti
![Page 2: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/2.jpg)
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.
![Page 3: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/3.jpg)
Amazon test 2008● + 100ms >> -1% sales
Bing test 2009● + 2000ms >> -4.3% revenues/user
MercadoLibre 2013● + 3000ms >> + 3% in Bounce rate
-1% in Revenues
![Page 4: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/4.jpg)
![Page 5: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/5.jpg)
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
![Page 6: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/6.jpg)
Responsibilities
![Page 7: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/7.jpg)
![Page 8: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/8.jpg)
Time to First Byte
![Page 9: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/9.jpg)
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.
![Page 10: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/10.jpg)
1. DNS LOOKUP2. INITIAL CONNECTION3. WAITING4. RECEIVING DATA5. CLOSING CONNECTION
![Page 11: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/11.jpg)
1. DNS LOOKUP2. INITIAL CONNECTION3. WAITING4. RECEIVING DATA5. CLOSING CONNECTION
![Page 12: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/12.jpg)
1. DNS LOOKUP2. INITIAL CONNECTION3. WAITING4. RECEIVING DATA5. CLOSING CONNECTION
![Page 13: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/13.jpg)
1. DNS LOOKUP2. INITIAL CONNECTION3. WAITING4. RECEIVING DATA5. CLOSING CONNECTION
![Page 14: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/14.jpg)
1. DNS LOOKUP2. INITIAL CONNECTION3. WAITING4. RECEIVING DATA5. CLOSING CONNECTION
<< Time to first Byte = TTFB
![Page 15: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/15.jpg)
Expected values
![Page 16: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/16.jpg)
● 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
![Page 17: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/17.jpg)
Possible problems
● To many connections to the server● Disk IO
![Page 18: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/18.jpg)
Hardware check..
● Disk IO● RAM usage● Swap usage● Network bottlenecks
![Page 19: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/19.jpg)
Configuration check..
● Webserver config (Apache,Jboss,..) / Php config● Database settings● Network settings● Api / webservices latency
![Page 20: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/20.jpg)
How to improve it?
![Page 21: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/21.jpg)
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 )
![Page 22: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/22.jpg)
Software
● Parallel processing● Database tuning● Sql tuning● API / Webservices response caching● NoSql (MongoDB, Bigtable, Redis)● Chunking - Early buffer flush
![Page 23: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/23.jpg)
Tools
![Page 24: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/24.jpg)
Analyzers
● Google Page Speed● WebPageTest● Firebug
![Page 25: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/25.jpg)
Custom measuring
● Navigation timing apivar timing = window.performance.timing;var ttfb = timing.responseStart -timing.connectEnd;
![Page 26: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/26.jpg)
CDN (Content Delivery Network)
![Page 27: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/27.jpg)
● 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.
![Page 28: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/28.jpg)
![Page 29: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/29.jpg)
● The resources can be cached● Multiple servers prevent bottlenecks● Useful for static resources like Html, Css, fonts , Js,
videos , images, documents, etc
![Page 30: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/30.jpg)
GZIP (HTTP compression)
![Page 31: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/31.jpg)
● 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
![Page 32: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/32.jpg)
![Page 33: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/33.jpg)
● 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
![Page 34: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/34.jpg)
Cache
![Page 35: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/35.jpg)
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.
![Page 36: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/36.jpg)
How it works?
![Page 37: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/37.jpg)
How it works?
![Page 38: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/38.jpg)
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.
![Page 39: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/39.jpg)
Response Headers
● Weak ones:
○ Specifies characteristics to identify if the resource change
○ The browser sends conditional GETs to check○ Last-Modified, Etag
![Page 40: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/40.jpg)
Cache Control
● Strong header● Cache-Control:public● Cache-Control:private● i.e: Cache-Control:public, max-age=3600
![Page 41: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/41.jpg)
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.
![Page 42: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/42.jpg)
Last modified
● Is a time based header.
● The application specifies the last modified headeri.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 changedi.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)
![Page 43: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/43.jpg)
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 valuei.e: If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"
● If the ETag match, the server responds 304
![Page 44: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/44.jpg)
Tools● Most of browser tools has a network analyzer● The example below were made with Chrome dev tool
![Page 45: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/45.jpg)
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.
![Page 46: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/46.jpg)
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.
![Page 47: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/47.jpg)
Keep alive (reuse connections)
![Page 48: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/48.jpg)
● 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 ).
![Page 49: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/49.jpg)
● Persistent connections send multiple request and response interactions over single connection.
● If the connection is not persistent you can specify a time out.
![Page 50: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/50.jpg)
Persisten connection
![Page 51: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/51.jpg)
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.
![Page 52: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/52.jpg)
Parallel downloads
The biggest impact on end-user response times is the number of components in the page
![Page 53: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/53.jpg)
How it works?
● Images can be downloaded in parallel● JS and CSS..other story
![Page 54: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/54.jpg)
● 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
![Page 55: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/55.jpg)
The HTTP/1.1 RFC
A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.
![Page 56: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/56.jpg)
The HTTP/1.1 RFC
A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.
![Page 57: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/57.jpg)
IE 6 and 7: 2IE 8: 6IE 9: 6IE 10: 8Firefox 2: 2Firefox 3: 6Firefox 4 to 17: 6Opera 9.63: 4Opera 10: 8Opera 11 and 12: 6Chrome 1 and 2: 6Chrome 3: 4Chrome 4 to 28: 6Safari 3 and 4: 4
How browsers handle it?
● Browsers don't have to follow this guideline.
● Parallel connections.
![Page 58: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/58.jpg)
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!
![Page 59: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/59.jpg)
Nice trick!
![Page 60: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/60.jpg)
Trade off
● DNS lookup ~ 150 ms● Browser cpu per parallel download● Bandwidth
![Page 61: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/61.jpg)
Reduce client request time by reducing the request size
Small request
![Page 62: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/62.jpg)
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.
![Page 63: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/63.jpg)
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.
![Page 64: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/64.jpg)
For static content
Cookieless domain
![Page 65: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/65.jpg)
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.
![Page 66: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/66.jpg)
Static content
● How:○ Create a domain for static content○ Use caching headers○ CDNs avoid cookies
![Page 67: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/67.jpg)
Use browser idle time
Prefetching
![Page 68: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/68.jpg)
Objective
● Use the browser idle time to download or prefetch documents that the user might visit in the near future.
![Page 69: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/69.jpg)
Which content prefetch?
● Images commonly used.● The next page of the search results.● Prefetch common DNS.
![Page 70: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/70.jpg)
● Image:
● Full page
● DNS
● Be aware of○ Bandwidth, website statistics
![Page 71: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/71.jpg)
Where and why
Javascript load & execution
![Page 72: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/72.jpg)
Where to load?
![Page 73: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/73.jpg)
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
![Page 74: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/74.jpg)
With and without blocking
Javascript loading
![Page 75: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/75.jpg)
Motivation
● Scripts blocks downloads and render.
![Page 76: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/76.jpg)
Several ways avoid it
● XHR Eval● XHR Injection● Script in Iframe● Script DOM Element● Script Defer
![Page 77: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/77.jpg)
Avoid blocking - Simple approach
![Page 78: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/78.jpg)
Avoid blocking - adding a callback
![Page 79: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/79.jpg)
Avoid blocking - adding a callback
![Page 80: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/80.jpg)
Avoid blocking - cross browser
![Page 81: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/81.jpg)
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:
![Page 82: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/82.jpg)
Avoid blocking - onload event
![Page 83: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/83.jpg)
Sometimes the image weight its 40-50% of the complete page weight
Image Optimization
![Page 84: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/84.jpg)
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.
![Page 85: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/85.jpg)
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
![Page 86: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/86.jpg)
JPEG
● Edit image metadata ○ Software: JPEGTran, EXIFTool
● Optimizing compression○ Software: JPEGTran
● Cropping○ Rotation to 90, 180, 270 degrees
![Page 87: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/87.jpg)
PNG
● Icons, illustrations and photos with high contrast.● Support transparency (alpha channel).● Optimizations
○ Strip PNG chunks○ Better pixel compression
● Software○ TinyPNG○ OptiPNG○ PNGOptimizer
![Page 88: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/88.jpg)
● 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% )
![Page 89: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/89.jpg)
JPEG ProgressivePerceived speed is more important that actual speed
![Page 90: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/90.jpg)
JPEG Progressive
● Two types of images, baseline and progressive● Baseline jpeg: is a full-resolution top-to-bottom scan
of the image
![Page 91: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/91.jpg)
JPEG Progressive
● Progressive jpeg: is a series of scans of increasing quality, loads from low quality to high in several "passes"
![Page 92: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/92.jpg)
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
![Page 93: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/93.jpg)
WebPA new image format for the Web
![Page 94: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/94.jpg)
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 )
![Page 95: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/95.jpg)
WebP
● Software○ CwebP○ DwebP○ libwebp
● Support○ Chrome 9+○ Opera 12+○ Android 4+○ Opera mobile 11+○ Chrome for android 27+
![Page 96: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/96.jpg)
Muchas gracias!!!
![Page 97: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/97.jpg)
![Page 98: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/98.jpg)
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
![Page 99: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/99.jpg)
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/
![Page 100: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/100.jpg)
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
![Page 101: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/101.jpg)
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/
![Page 102: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/102.jpg)
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/
![Page 103: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/103.jpg)
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
● http://www.chromium.org/spdy
![Page 104: Web performance optimization - MercadoLibre](https://reader033.vdocuments.net/reader033/viewer/2022052600/55864244d8b42a3c348b4ea7/html5/thumbnails/104.jpg)
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-part-4/