Making your website
go faster!
Alli Price
Front-end Developer, Deeson Online
http://deeson-online.co.uk
What is this talk about?
Peformance!
“Perf”
WPO / Web Performance Optimisation
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Why is performance good?!
It can mean (amongst other things):
• More traffic/visitors
• More sales
• Improved SEO rank
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
How can I tell how fast or
slow my site is?
In browser tools:
• Firebug - http://getfirebug.com
• Chrome Developer Tools (built in)
•Online tools: http://www.webpagetest.org
http://tools.pingdom.com
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
The Waterfall
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
"80-90% of the end-user
response time is spent on the
frontend. Start there."
http://www.stevesouders.com/blog/2012/02/10/theperformance-golden-rule/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Check your assets
• CSS
• JavaScript
• Images
• Video
• Audio
• Fonts
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
(File)size matters
•The less you need to load the better, optimising your
images helps! In photoshop use “Save for web” and choose the
best format/quality. http://sixrevisions.com/photoshop/graphicsbeginner-tips-web-designers/ Use ImageOptim to squeeze out any
extra unused bytes from an image, if you use photoshop and save
for web this does a pretty good job http://pornel.net/imageoptim/en
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Minification of javascript files
This is about removing un-needed whitespace and
comments from the file to reduce the file size.
Online tools/reading:
• http://fmarcia.info/jsmin/test.html
• http://jscompress.com/
• http://engineeredweb.com/blog/why-minify-javascript
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Gzipping
Text files such as HTML, CSS, JavaScript and XML can
be Gzipped by the server to reduce the request
response size.
http://developer.yahoo.com/performance/rules.html#gzip
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Kicking it up a notch,
aggregation of assets
Aggregation is the combining of files of the same time,
CSS, JS and even images!
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Image spriting
Combining a series of images into one, then using
background position with CSS to reference them.
There are helpful tools which will do all of this for you,
my favourite being:http://spritegen.website-
performance.org/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
CSS first, JS last - order of code
Random acronym definition, DOM = Document object model,
it's all of the elements you write with your code.
http://developer.yahoo.com/performance/rules.html#css_top
http://developer.yahoo.com/performance/rules.html#js_bottom
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
No blocking!
What we want is our javascript being downloaded in parallel
with the other assets, or just plain last.
http://www.stevesouders.com/blog/2009/04/27/loading-scriptswithoutblocking/http://www.stevesouders.com/blog/2010/12/06/evolutio
n-of-script-loading/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Let's be kind to IE
Internet explorer is akin somewhat to an elderly person, slow
moving and prone to tripping up. So let's be kind, it's easy.
Conditional comments can create blocking downloads, even
CSS files, world gone mad no? Well no actually, this is just IE :/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Let's be kind to IE
There are techniques to avoid this, by using conditional
comments early on to apply a class to the HTML tag, which you
can use in your CSS e.g. html.ie7
http://paulirish.com/2008/conditional-stylesheets-vs-CSS-hacks-
answer-neither/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Specify your meta charset early
on
This avoids the browser encountering one later on in code and
having to re-render. On this, Drupal will always throws out a
meta charset tag first in the head tag.
http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-HTML-headordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
More resources for the
front-end
http://developer.yahoo.com/performance/rules.HTML
(old school, but worth reading)
http://www.stevesouders.com/blog/ (Steve Souders’ blog)
Just One Second Delay in Page-Load Can Cause 7% Loss in Customer Conversions
http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-
customer-conversions
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Drupal tiem!
Drupal cares about performance, if you've ever heard it's
slow, you've been mis-informed.
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
First things first, aggregation
Providing you use drupal_add_js(), drupal_add_css(),
and formapi #attachments, your code is thrown into
Drupals pile o’ files, if you're linking to CSS or JS by
putting it inline, shame! You won't be able to aggregate
it! :(
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
First things first, aggregation
http://api.drupal.org/api/drupal/includes%21common.inc/f
unction/drupal_add_CSS/7http://api.drupal.org/api/drupal
/includes%21common.inc/function/drupal_add_JavaScri
pt/7http://drupal.org/node/171205#stylesheets - how to
CSS/JavaScript files to your theme
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Where's the switch?
Navigate to: Configuration > Development >
Performance. See "Bandwidth optimization".
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Amping up aggregation
http://drupal.org/project/advagg
http://drupal.org/project/core_libraryhttp://drupal.org/proj
ect/agrcachehttp://drupal.org/project/blackwhite
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
GZipping content
On this same page there's the checkbox "Compress
cached pages", this will do just that and serve Gzipped
pages.
What about CSS and JavaScript? If you've got
aggregation and clean URLs enabled, this happens
automatically.
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Drupal Caching methods
Let's walk through the options, but first very quickly...
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
How does caching work?!
If someone requests a page, you check to see if you've
got a cached version, if you do, then serve it! If not, do
the needed work to produce the page, save it to the
cache, then serve it out. Easy!
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
So what caching options are
there for Drupal?
Here are the big ones.
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Database based
• Available in core
• Requires going from Apache to PHP to MySQL
• You can turn this on by going to Configuration >
Development > Performance, and ticking "Cache pages
for anonymous users".
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Boost - file based caching
http://drupal.org/project/boost
• Rendered page HTML is put into a Gzipped file in the
webroot
• Modify the site’s .htaccess file to check through Boost’s
cache directory/files
• Faster because only Apache is needed to serve from
cache (No PHP or MySQL), great for shared hosts!
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Varnish - reverse proxy caching
• Works out of the box for Drupal 7 core
• Drupal 6 needs Pressflow http://pressflow.org/
• A a wall of caching that sits in front of Apache
• Very fast as it holds it’s cached HTML in RAM
• Takes the AMP out of LAMP
• “Just there” on Acquia dev cloud & Pantheon
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Varnish - reverse proxy caching
•Further reading: https://www.acquia.com/tags/varnish
http://drupal.org/project/varnish https://www.varnishcache.org/ https://www.getpantheon.com/support/codingand-monitoring-varnish
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Authenticated user caching
So far all of the caching methods discussed only work for
anonymous users, this is because pages of logged in
users will be personalised. Not necessarily a lot, but if
we cached logged in pages, user 2 could get a page that
has been cached by user 1, and get a different set of
links that maybe they shouldn't see.
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Authenticated user caching
We won't go into this, but there are solutions out there being worked
on, such
as:http://drupal.org/project/authcachehttp://drupal.org/project/esi
(Drupal 8's WSCCI initiative makes this really exciting and
possible).http://www.unleashedmind.com/en/blog/sun/drupal-8-thepath-forwardhttp://buytaert.net/the-future-is-a-restfuldrupal#comment-53906
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Further reading on caching
A great quick page on how caching works, including: min/max
lifetimes, block caching:
http://blog.merge.nl/20120118/how-does-caching-work-drupal
(Also has links at the end of the article which are worth reading.)
Great series of articles:
http://cruncht.com/75/drupal-performance-scalability/
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Bonus round, code level caching
What caching options are there for me in my code?
http://www.lullabot.com/articles/beginners-guide-cachingdata-drupal-7
http://www.lullabot.com/articles/beginners-guide-cachingdata-d6
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Bonus round, CDNs
What is? http://en.wikipedia.org/wiki/Content_delivery_network
Examples: http://www.maxcdn.com/ http://www.akamai.com/
The module: http://drupal.org/project/cdn
What’s it work on? CSS, JS, Imagecache/styled images
Has guide? http://wimleers.com/article/easy-drupal-cdnintegration-for-fun-and-profit
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
That’s it! Things I’ve
missed:
Memcache: http://drupal.org/project/memcache
APC/Opcode caching: http://bit.ly/Igqy6P (How to install search)
JavaScript loaders: http://drupal.org/project/labjs
http://drupal.org/project/headjs
SASS/LESS: http://drupal.org/project/sassy http://lesscss.org/
Code profiling: New relic etc...
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
Thanks!!
http://deeson-online.co.uk
@deeson_labs
http://lookalive.co.uk
@heylookalive
http://deeson-online.co.uk
@deeson_labs
Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive