4. “We encourage you to start looking
at your site's speed - not only to im-
prove your ranking in search engines,
but also to improve everyone's
experience on the internet.”
- Amit Singhal & Matt Cutts, Google Search Quality Team
5. Can you get, what Amazon got?
1%+ in revenue for every
100 ms in speed.
Amazon study: http://gdig.de/amzn100
ONE (SIMPLE) GOAL ONLY…
MAKE YOUR SITE AS FAST AS YOU CAN!
6. SITE OWNERS DID LISTEN…
TOP-3 RESULTS WAY FASTER THAN COMPETITORS
Source: Searchmetrics Ranking Factors 2014 (US)
7. #0
WHERE DO I START?
SOME BASIC TOOLS & PERFORMANCE DATA
12. Get rid of multiple CSS & JS files
Best case: 1 CSS + 1 JS file.
Real world: 1-2 CSS, 1 int. + 2-3 ext. JS
Often times JS does change the
style, so always do CSS before JS!
Move CSS to the top, JS to the
footer to un-block rendering!
13. How about HeadJS?
HeadJS does enable parallelizing JS file
downloads. Freaking awesome!
The beauty of it: Only a single JS
needs to be loaded in <head>!
http://headjs.com/
16. Tip: Balance parallelizable resources
Using img1/img2/imgX.domain.com allows balancing
requests to and between multiple sub-domains
The result: A massive 6+ connections at a time.
http://www.browserscope.org/
Even modern browsers don‘t
allow 6+ connections per
hostname at the same time!
17. Consider off-loading (statics) to a CDN
Latency is crucial – especially if you’re serving a global audience,
offloading static files to a CDN will give additional performance.
CDN Overview: http://gdig.de/cdns
18. On WordPress? Try W3 Total Cache
http://wordpress.org/extend/plugins/w3-total-cache/
20. Minify CSS & JS files
Removing unnecessary whitespaces, line-
breaks and comments to reduce file-size.
And: Makes it way harder for competitors to steal your code!
For CSS, try:
http://www.phpied.com/cssmin-js/
http://developer.yahoo.com/yui/compressor/
For JS, go with:
http://www.crockford.com/javascript/jsmin.html
https://developers.google.com/closure/compiler
Minifying this (small) style-
sheet results in 63% savings!
21. Enable GZIP compression
Output compression does massively decrease
file-sizes and therefore speeds up rendering.
Verify by checking the response
headers, for “Content-Encoding“
to be set to “gzip“
One of the ugliest sites ever: http://www.gzip.org/
On Apache, try “mod_deflate” which is straight forward:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
22. Why would I do that?
Normal
271 KB
Minified
90 KB
GZIP‘ed
78 KB
Min. + GZIP‘ed
32 KB
~88% savings in file size due to combining
minifying and file compression.
Based on jQuery Version 1.9.1 …
23. Use Google’s CDN for popular libraries
Google has the fastest CDN on the planet, make sure
you use their DCs to serve your files if possible!
https://developers.google.com/speed/libraries/
Since a lot of site-owners are using
G-DCs, chances are, people have
those files cached already!
24. Tip: Use Live HTTP Headers in Firefox
Easily check request & response objects
using Live HTTP Headers or Fire Cookie.
https://addons.mozilla.org/en-US/firefox/addon/live-http-headers/
25. Use a cookie-less domain
For static files, cookies are not required -
disable cookie handling all together.
Live HTTP headers reveals that no
cookies are set for gstatic.com
http://www.ravelrumba.com/blog/static-cookieless-domain/
26. Tip: How to get rid of Cookies…
Same goes for components like PHP, Java, etc. -
each does provide functionality to disable Cookies.
Apache header manipulation using “mod_headers”:
RequestHeader unset Cookie
Stop cookies being passed back to the client :
Header unset Set-Cookie
http://httpd.apache.org/docs/2.4/mod/mod_headers.html
Straight forward: Don’t set them…!
28. Setup caching for static resources
It’s important to specify one of Expires or Cache-Control max-age,
and one of Last-Modified or ETag, for all cacheable resources.
Set the “Expires”-header to exactly
one year ahead of the request date
Set the “Last-Modified”-header to
the date the file was last modified
Set the “Cache-Control: max-age”-
header to “3153600” (1 year, again)
Expires:
Fri, 07 Sept 2013 03:18:06 GMT
Last-Modified:
Fri, 07 Sept 2012 03:18:06 GMT
Cache-Control:
max-age=3153600
29. Some caching pitfalls…
If you want to cache SSL contents,
make sure to have the “Cache
control“-header to contain public.
Use URL fingerprinting to force
refreshing of cached resources.
Header append Cache-Control
"public, must-revalidate"
<link rel="stylesheet" type="text/css"
href="/styles/83faf15055698ec77/my.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="/styles/my.css?v=83faf15055698ec77" media="screen" />
Careful using parameters to indicate ver-
sions – sometimes proxies have issues ;)
31. Remove HTML comments
There is no need for HTML comments on a
live system, remove them during build-time.
ANT can remove HTML
comments at build-time
using a ReplaceRegEx task
Or try this one: http://code.google.com/p/htmlcompressor/
32. Move inline CSS / JS to external files
Make the HTML as small as possible. Move
out inline CSS and JS to make it cache-able.
33. Don’t use @import in CSS
Using CSS @import in external CSS makes it
impossible for browsers to download in parallel.
Always load CSS files
using link-rel HTML tags.
<link rel="stylesheet" type="text/css" href="/styles/my.css" />
<style type="text/css">
@import "/styles/my.css";
@import url("/styles/my.css") screen;
</style>
Especially in external CSS, this
will make your mama cry!
34. Don’t scale images using width / height
Small images = less file-size. Don’t scale down
images using attributes (or CSS), provide small ones!
The image dimensions are 220x93,
but onsite it’ll be shown as 100x42.
35. Tip: Make images even smaller!
Use tinyPNG to optimize
PNG files without loosing in
quality (up to 70% savings)
JPEGmini does the same for JPEG
files and will reduce your images
massively (up to 80% smaller)!
http://tinypng.org/ & http://www.jpegmini.com/
36. WordPress Plug-in + API: kraken.io
https://kraken.io/
~62% of todays internet traffic is images & video…
37. For non-SEO images: Try Lazy Load
http://www.appelsiini.net/projects/lazyload
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<img class="lazy" src="default.jpg" data-original="real-image.jpg"
width="640" height="480" alt="sometext" />
$("img.lazy").lazyload();
Embed jQuery + Lazy Load Plug-in
Execute the loader…
Provide default + real image,
also include dimensions.
38. Make your Social Buttons Async
http://www.phpied.com/social-button-bffs/
39. #5
THE SERVER SIDE (NO TIME…!)
TWEAK HOSTING, DATABASES, WEBSERVER, ETC.
40. If you’re on Apache…
Google does provide “mod_pagespeed” to
implement their best practices – give it a try!
https://developers.google.com/speed/pagespeed/module
41. Or maybe: Consider replacing Apache…
“NGINX” is ridiculously fast – especially when serving
static assets it’s (probably) the best you’ll find!
http://www.nginx.com/
42. Googles‘ SPDY on NGINX = WOW!
Multiplexed streams:
Unlimited concurrent streams over
one single TCP connection.
Request prioritization:
SPDY implements priorities ; client
can request as many items as it
wants, and assign a priority to
each.
HTTP header compression:
SPDY compresses request and
response HTTP headers, resulting
in fewer packets and fewer bytes
transmitted.
http://nginx.org/en/docs/http/ngx_http_spdy_module.html
43. Test SPDY Features (Server + Client)
http://spdycheck.org http://caniuse.com/spdy
44. Why not reverse-proxy incoming requests?
Get load off your web-server by setting up a
dedicated box in front using SQUID Cache.
http://www.squid-cache.org/
All requests will be passed
through a proxy, no direct access
to web-servers will be given.squid-cache.org
Optimising Web Delivery