2. What is this talk about?
Peformance!
“Perf”
WPO / Web Performance Optimisation
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
3. Why is performance good?!
It can mean (amongst other things):
• More traffic/visitors
• More sales
• Improved SEO rank
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
4. 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
•.com
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
7. Check your assets
• CSS
• JavaScript
• Images
• Video
• Audio
• Fonts
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
8. (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/graphics-beginner-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://pornel.net/imageoptim/en
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
9. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
10. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
11. Kicking it up a notch,
aggregation of assets
Aggregation is the combining of files of the same time,
CSS, JS and even images!
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
12. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
13. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
14. 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-scripts-without
http://www.stevesouders.com/blog/2010/12/06/evolution-of-
script-loading/
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
15. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
16. 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-answe
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
17. 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-head-ordering-to-av
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
18. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
19. Drupal tiem!
Drupal cares about performance, if you've ever heard
it's slow, you've been mis-informed.
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
20. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
22. Where's the switch?
Navigate to: Configuration > Development >
Performance. See "Bandwidth optimization".
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
24. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
25. Drupal Caching methods
Let's walk through the options, but first very quickly...
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
26. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
28. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
29. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
30. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
32. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
33. Authenticated user caching
We won't go into this, but there are solutions out there being
worked on, such as:http://drupal.org/project/authcache
http://drupal.org/project/esi (Drupal 8's WSCCI initiative makes this
really exciting and
possible).http://www.unleashedmind.com/en/blog/sun/drupal-8-
the-path-forward
http://buytaert.net/the-future-is-a-restful-drupal#comment-53906
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
34. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
35. Bonus round, code level caching
What caching options are there for me in my code?
http://www.lullabot.com/articles/beginners-guide-caching-data-drupal-
http://www.lullabot.com/articles/beginners-guide-
caching-data-d6
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
36. 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-cdn-
integration-for-fun-and-profit
http://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
37. 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://deesononline.co.uk Alli Price, Making your website go faster!
@deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
Alli Price, front end developer at the Deeson Group, working with drupal since 2009, in web for a while. We’ve done sites for Robbie Williams, Jimmy Page, The BRIT Awards, and more!
What is this talk about? Performance! Otherwise known as "Perf" or sometimes "WPO" web performance optimisation. Either way, it's all about going fast. This will dip into some technical stuff, but this isn't a deep dive, it's a shallow tour of most of the things that count. The websites we make are the sum of their parts, and this is meant to give an idea of the different bits. Throughout the talk, I'm going to have reference URLs on the slides, you'll be able to jump off from whatever bit of the talk interests you, and find out more.
Improving your websites page load time can have a number of positive effects, it can mean more traffic (this site has what I want, and can deliver fast, I'll re-use), good for selling more, good for SEO (which google now tracks).It's all about creating a fast experience for the user. Speed means success, lack somewhat and your user will find a faster competitor, or if you're not that kind of site, they'll just get frustrated and leave.
There are a series of different tools out there you can use, both in the browser and out. All of the above are good options, and Firefox also now has its own built in tool, but firebug is the one that started it all. Demo webpagetest.org
With those tools, there will be a waterfall chart in there somewhere, this will show all of the requests the browser is making to load resources that the page wants. This will be images, CSS, JavaScript all sorts and it'll be in order! It'll show you how long it took the server to respond for each request, when the browser managed to start rendering content DOM firing etc. Biggest point on this is that it'll make it clear A) How much you're loading B) What resources are holding up page render (JS) C) How long it all takes.Tools like yslow and webpagetest will actively give you tips on how to improve.
If you heard Matt Farina's talk at Drupalcon Denver, you'll be aware of the performance golden rule "80-90% of the end-user response time is spent on the frontend. Start there.". So that's where we'll start, back end comes later.
So we've talked about requests made, typically a web page will always have CSS, JS and an image or two, but can extend out to video, audio, fonts.You're choosing to load the files, so make sure they're as small as possible.
This is the process of removing whitespace and comments from a file, thereby reduce the files size. The result is fairly unreadable, but is faster! The last link is Matt Farina’s recent look at the positive impact minifiction can have.
Gzipping generally reduces the response size by about 70%, when a request is made by a browser, in the request header it will include whether or not it can accept Gzipped content, if so the server can compress the file.
Why do it? Less requests to the server the better! Less load for the server, less for the browser to include in the DOM, and faster to download. The biggest point here though is that browsers limit the number of concurrent connections to a server, so combining your files becomes all the more important. In part why CDN's are about. More on CDN's later. CSS & JS aggregation, there are lots of ways of doing this, but we'll skip over this as it's a sinch with Drupal.
Combining a series of images into one, then using background position with CSS to reference them. This reduces the number of requests hitting the server, and for the browser to process spritegen will also run imageoptim for you.
CSS at the top encourages progressive render, JS at the bottom avoids scripts blocking further code download and rendering. As soon as the browser hits a javascript file in the markup, this file must be downloaded, parsed and executed before it can continue.
The easiest way to achieve this is by putting your JS at the end of your markup, just before the </body> tag, sound familiar? It's what google used to say with it's analytics code before they went Asynchronous.
When I say IE, I mean 8 and <=
This avoids blocking, and also reduces an extra request for the ie specific file, as it can be aggregated.
I think this perception of Drupal being slow has died out somewhat, but chances are if you’re finding Drupal to be slow, there are always ways to make it go faster.
Mikeytown is an excellent perf guy in the drupal community and has done a lot of great work, advanced aggregation is one of his modules (currently d6 only), but links off to a lot of useful modules on the project page.
Database caching, available in core, this saves a page request's HTML to the database, any time a request comes in, the db is checked for a cached version and behave in the way described. This is better than nothing, and great to have in core, but isn't as fast as it could be as it requires going from Apache to PHP to MySQL. You can turn this on by going to Configuration > Development > Performance, and ticking &quot;Cache pages for anonymous users&quot;.
Instead of going out to the database, boost takes the rendered page HTML and puts it into a html file in the webroot, then serves this via modifications to the .htaccess file. This is faster because we cut out PHP and MySQL, if a cached version exists, it can be served by Apache only. I’ve had a sites MySQL fail, and the site stay up thanks to Boost. Works great on shared host, easy to setup.
Varnish - reverse proxy caching, works out of the box for Drupal 7 core, Drupal 6 needs Pressflow. Varnish is basically a wall of caching that sits in front of Apache, and is really fast because it cache in RAM. This allows it to be very fast and take a lot of the load away from the AMP part of the LAMP stack. Acquia's dev and managed cloud offer varnish, as does Pantheon.
Probably not enough time, but here are some links.
