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.
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
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.
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
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
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.
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)
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
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
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 23: 6 Safari 3 and 4: 4 How browsers handle it? • Browsers don't have to follow this guideline. • Parallel connections.
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!
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.
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:
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.
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
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
that provides lossless and lossy compression for images on the web • 26% smaller than PNG • 25-34% smaller than JPEG • Supports transparency ( alpha channel )
flycode
bkuhlmann
yosuke_furukawa
kj455
free_world21
hanetsuki
tatamiya
ogurotakayuki
luisasofie_xoxo
lewuathe
josepaumard
a_matsuda
nekowen
lemiorhan
sferik
chrislema
jennybc
zakiyama
hannesfritz
scottboms
danielanewman
brianwarren
afnizarnur
michaelherold
mthomps
