The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014

THE NEED FOR SPEED
HOW TO MAKE YOUR WEBSITE REALLY FAST!
Bastian Grimm
@basgr

http://bg.vu/brigh14
NO NEED TO TAKE ANY NOTES!

Read the full story here: http://gdig.de/1o

“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

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!

SITE OWNERS DID LISTEN…
TOP-3 RESULTS WAY FASTER THAN COMPETITORS
Source: Searchmetrics Ranking Factors 2014 (US)

#0
WHERE DO I START?
SOME BASIC TOOLS & PERFORMANCE DATA

Web-based performance analysis
using the „Google factors”..
http://developers.google.com/speed/pagespeed/insights/

Detailed in-browser
performance analysis
(req. Firebug Add-on)

Real user’s avg.
page load times
Behaviour > Site Speed > Overview
Collects all the data, 1% default sampling rate (customizable)!

#1
REDUCE NO. OF REQUESTS
AS FEW HTTP CONNECTIONS AS POSSIBLE!

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!

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/

Do CSS Sprites
http://spriteme.org/
Combine multiple (small) images into one
big image to save on HTTP requests.

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!

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

On WordPress? Try W3 Total Cache
http://wordpress.org/extend/plugins/w3-total-cache/

#2
DECREASE SIZE OF REQUEST
THE SMALLER THE FILE, THE FASTER IT LOADS

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!

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

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 …

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!

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/

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/

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…!

#3
IMPLMENT PROPER CACHING
ONLY TRANSFER FILES WHEN REALLY NECESSARY!

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

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 ;)

#4
CLEAN-UP THAT HTML!
ONLY TRANSFER FILES WHEN REALLY NECESSARY!

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/

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.

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!

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.

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/

WordPress Plug-in + API: kraken.io
https://kraken.io/
~62% of todays internet traffic is images & video…

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.

Make your Social Buttons Async
http://www.phpied.com/social-button-bffs/

#5
THE SERVER SIDE (NO TIME…!)
TWEAK HOSTING, DATABASES, WEBSERVER, ETC.

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

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/

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

Test SPDY Features (Server + Client)
http://spdycheck.org http://caniuse.com/spdy

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

SEO Trainings, Seminars & Strategy Consulting
WordPress Security, Consulting & Development
Berlin-based Full-Service Performance Marketing Agency
@basgr
http://bg.vu/brigh14

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014

More Related Content

What's hot

Similar to The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014

More from Bastian Grimm

Recently uploaded

The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014