NavigationTiming API
Google Study
Experiments demonstrate that increasing web search latency 100 to 400 ms reduces the daily number of searches per user by 0.2% to 0.6%.
Performance golden rule
Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% are spent downloading all the components in the page.
Your super duper micro-framework that spits out Hello worlds at the speed of light does not matter.
Google Study
In 80% of pages, 10 or more resources are loaded from a single host.
The most popular sites could eliminate more than 8 HTTP requests per page if they combined all scripts [...] and stylesheets on the same host into one.
Merge assets (less CSS/JS)
Use CSS sprites (less images) and Data URIs (more on this later)
JS: Google Closure Compiler, YUI Compressor
CSS: tons of libs available for every language
Google Study
The average web page takes up to 320 KB on the wire.
Only two-thirds of the compressible material on a page is actually compressed.
Compress text, js, css, html
Don't touch images and other compressed files
What you should have:
Cache-Control HTTP/1.1, relative, takes precedence
Expires HTTP/1.0, absolute time
Last-Modified needs a round-trip even for 304 Not Modified responses
What you most likely don't need:
ETag default config harmful to redundant setups, mostly useless when all of the above is implemented
They're nothing special
There is no excuse not to do it
Find more info in Pierre Spring's Speedy App slides
Shorter (and rememberable!) doctype
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 also made valid many "bad practices" that have been working in all browsers for ages, but were considered invalid in HTML4
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
<style type="text/css">
<script>
<script type="text/javascript">
cli: pngcrush, online: smushit.com
.foo {
url(data:image/png;base64,R0lGOD...)
}
<img src="data:image/png;base64,R0lGOD..." />
e.g. Google Image, minifying CSS
Supported in IE8 (32KB) and IE9 + all others
MHTML for IE<8, or just don't bother
Going further: inline all CSS, JS & images for requests without sessions, then lazy load for subsequent requests
You can cache the full homepage with everything inlined and serve it instantly, great experience for first time visitors
document.write('fail');
<script src="blocking.js" />
<script src="deferred.js" defer />
<script src="async.js" async defer />
defer: HTML4/IE
async: HTML5
var ga = document.createElement('script');
ga.src = 'http://www.google-analytics.com/ga.js';
ga.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
Most changes to the DOM trigger reflows/repaints:
Adding/Removing nodes
Changing styles, classes, ..
(Sometimes) Retrieving offsetWidth, getComputedStyle(), etc.
Check it out with Firebug Paint Events
Use document fragments
var elem, i,
foo = document.getElementsById("foo"),
texts = ["a", "b", "c"];
for (i = 0; i < texts.length; i++) {
elem = document.createElement('p');
p.innerHTML = texts[i];
foo.appendChild(elem);
}
Use document fragments
var elem, i,
foo = document.getElementsById("foo"),
texts = ["a", "b", "c"],
fragment = document.createDocumentFragment();
for (i = 0; i < texts.length; i++) {
elem = document.createElement('p');
p.innerHTML = texts[i];
fragment.appendChild(elem)
}
foo.appendChild(fragment);
Add/remove classes (atomic operation) instead of changing multiple css styles
Animate items out of the page flow by using absolute or fixed positioning.
Chrome6+, IE9 for now
Access via window.performance.timing and window.performance.navigation
Quick demo
Most of this is very easy to set up with decent infrastructure, and can cut load times by half easily.