1. Making your website go faster! Front-end Developer, Deeson Online http://deeson-online.co.uk Alli Price

2. What is this talk about? Peformance! “Perf” WPO / Web Performance Optimisation Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

3. Why is performance good?! It can mean (amongst other things): More traffic/visitors More sales Improved SEO rank Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

4. How can I tell how fast or slow my site is? In browser tools: Firebug - http://getfirebug.comhttp://getfirebug.com Chrome Developer Tools (built in) Online tools: http://www.webpagetest.org http://tools.pingdom.comt.org http://tools.pingdom Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

5. The Waterfall Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

6. "80-90% of the end-user response time is spent on the frontend. Start there." http://www.stevesouders.com/blog/2012/02/10/the- performance-golden-rule/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

7. Check your assets CSS JavaScript Images Video Audio Fonts Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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/enhttp://sixrevisions.com/photoshop/graphics- beginner-tips-web-designers/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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-javascriptneeredweb.com/blog/why Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

11. Kicking it up a notch, aggregation of assets Aggregation is the combining of files of the same time, CSS, JS and even images! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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://spritegen.website- performance.org Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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_bottomom Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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- blocking/http://www.stevesouders.com/blog/2009/04/27/loading-scripts- without- blocking/http://www.stevesouders.com/blog/2010/12/06/evolutio n-of-script-loading/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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 :/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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- answer-neither/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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-avoid-parser-restarts-redownloads-and-improve-performance.aspx Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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) blog) Just One Second Delay in 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-in- customer-conversions Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

19. Drupal tiem! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs Drupal cares about performance, if you've ever heard it's slow, you've been mis-informed.

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! :( Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

21. 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/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 themecri pt/7http://drupal.org/node/171205#stylesheets - how to CSS/JavaScript files to your Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

22. Where's the switch? Navigate to: Configuration > Development > Performance. See "Bandwidth optimization". Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

23. Amping up aggregation http://drupal.org/project/advagg http://drupal.org/project/core_libraryhttp://drupal.org/proj ect/agrcachehttp://drupal.org/project/blackwhiteibraryhttp://drupal.org/proj ect/agrcac Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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. Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

25. Drupal Caching methods Let's walk through the options, but first very quickly... Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

27. So what caching options are there for Drupal? Here are the big ones. Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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". Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

30. Varnish - reverse proxy caching Works out of the box for Drupal 7 core Drupal 6 needs Pressflow http://pressflow.org/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 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

31. Varnish - reverse proxy caching Further reading: https://www.acquia.com/tags/varnish http://drupal.org/project/varnish https://www.varnish- cache.org/ https://www.getpantheon.com/support/coding- and-monitoring-varnishhttps://www.acquia.com/tags/varnishttps://www.varnish- cache.org/ httoding- and-monitoring-varnish Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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. Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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/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-the- path-forwardhttp://buytaert.net/the-future-is-a-restful- drupal#comment-53906http://drupal.org/project/authcacheal 8's WSCCI initiative makesrdhttp://buytaert.net/the-future-is-a-restful- drupal#comment-53906 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

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-7 http://www.lullabot.com/articles/beginners-guide-caching- data-d6 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

36. Bonus round, CDNs What is? http://en.wikipedia.org/wiki/Content_delivery_networkhttp://en.wikipedia.org/wiki/Content_delivery_network Examples: http://www.maxcdn.com/ http://www.akamai.com/ The module: http://drupal.org/project/cdnule: http://drupal.org What’s it work on? CSS, JS, Imagecache/styled imageswork on? CSS, JS, Imag Has guide? http://wimleers.com/article/easy-drupal-cdn- integration-for-fun-and-profitp://wimleers.com/article/easy Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

37. That’s it! Things I’ve missed: Memcache: http://drupal.org/project/memcachehttp://drupal.org/project/memcache APC/Opcode caching: http://bit.ly/Igqy6P (How to install search)ll search) JavaScripJavaScript loaders: http://drupal.org/project/labjs http://drupal.org/project/headjsect/headjs SASS/LESS: http://drSASS/LESS: http://drupal.org/project/sassy http://lesscss.org/sscss.org/ Code profiling: New rCode profiling: New relic etc... Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs

38. Thanks!! http://deeson-online.co.uk @deeson_labs http://lookalive.co.uk @heylookaliveylookalive Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter, @heylookalive http://deeson-online.co.uk @deeson_labs