Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Alli PriceFront-end Developer, Deeson Onlinehttp://deeson-online.co.uk
What is this talk about?Peformance!“Perf”WPO / Web Performance Optimisation   http://deeson­online.co.uk                  ...
Why is performance good?!It can mean (amongst other things):• More traffic/visitors• More sales• Improved SEO rank   http:...
How can I tell how fast or slow my site is?In browser tools:• Firebug - http://getfirebug.com• Chrome Developer Tools (bui...
The Waterfall http://deeson­online.co.uk                        Alli Price, Making your website go faster!  @deeson_labs  ...
"80­90% of the end­user response time is spent on the frontend. Start there."http://www.stevesouders.com/blog/2012/02/10/t...
Check your assets• CSS• JavaScript• Images• Video• Audio• Fonts  http://deeson­online.co.uk                        Alli Pr...
(File)size mattersThe less you need to load the better, optimising yourimages helps! In photoshop use “Save for web” and c...
Minification of javascript filesThis is about removing un-needed whitespace andcomments from the file to reduce the file s...
GzippingText files such as HTML, CSS, JavaScript and XML canbe Gzipped by the server to reduce the requestresponse size.ht...
Kicking it up a notch, aggregation of assetsAggregation is the combining of files of the same time,CSS, JS and even images...
Image spritingCombining a series of images into one, then usingbackground position with CSS to reference them.There are he...
CSS first, JS last ­ order of codeRandom acronym definition, DOM = Document object model,its all of the elements you write...
No blocking!What we want is our javascript being downloaded in parallelwith the other assets, or just plain last.http://ww...
Lets be kind to IEInternet explorer is akin somewhat to an elderly person, slowmoving and prone to tripping up. So lets be...
Lets be kind to IEThere are techniques to avoid this, by using conditionalcomments early on to apply a class to the HTML t...
Specify your meta charset early onThis avoids the browser encountering one later on in code andhaving to re-render. On thi...
More resources for the front­endhttp://developer.yahoo.com/performance/rules.HTML(old school, but worth reading)http://www...
Drupal tiem!  Drupal cares about performance, if youve ever heard  its slow, youve been mis-informed.http://deeson­online....
First things first, aggregationProviding you use drupal_add_js(), drupal_add_css(),and formapi #attachments, your code is ...
First things first, aggregationhttp://api.drupal.org/api/drupal/includes%21common.inc/function/druphttp://api.drupal.org/a...
Wheres the switch?Navigate to: Configuration > Development >Performance. See "Bandwidth optimization".  http://deeson­onli...
Amping up aggregationhttp://drupal.org/project/advagghttp://drupal.org/project/core_libraryhttp://drupal.org/project/agrca...
GZipping contentOn this same page theres the checkbox "Compresscached pages", this will do just that and serve Gzippedpage...
Drupal Caching methodsLets walk through the options, but first very quickly...   http://deeson­online.co.uk               ...
How does caching work?!If someone requests a page, you check to see if youvegot a cached version, if you do, then serve it...
So what caching options are there for Drupal?Here are the big ones.  http://deeson­online.co.uk                        All...
Database based• Available in core• Requires going from Apache to PHP to MySQL• You can turn this on by going to Configurat...
Boost ­ file based cachinghttp://drupal.org/project/boost• Rendered page HTML is put into a Gzipped file in thewebroot• Mo...
Varnish ­ reverse proxy caching• Works out of the box for Drupal 7 core• Drupal 6 needs Pressflow http://pressflow.org/• A...
Varnish ­ reverse proxy cachingFurther reading: https://www.acquia.com/tags/varnishhttp://drupal.org/project/varnish https...
Authenticated user cachingSo far all of the caching methods discussed only workfor anonymous users, this is because pages ...
Authenticated user cachingWe wont go into this, but there are solutions out there beingworked on, such as:http://drupal.or...
Further reading on cachingA great quick page on how caching works, including: min/maxlifetimes, block caching:http://blog....
Bonus round, code level cachingWhat caching options are there for me in my code?http://www.lullabot.com/articles/beginners...
Bonus round, CDNsWhat is? http://en.wikipedia.org/wiki/Content_delivery_networkExamples: http://www.maxcdn.com/ http://www...
That’s it! Things I’ve   missed:Memcache: http://drupal.org/project/memcacheAPC/Opcode caching: http://bit.ly/Igqy6P (How ...
Thanks!!http://deeson-online.co.uk@deeson_labshttp://lookalive.co.uk@heylookalive   http://deeson­online.co.uk            ...
Upcoming SlideShare
Loading in …5
×

Perf talk

425 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Perf talk

  1. 1. Alli PriceFront-end Developer, Deeson Onlinehttp://deeson-online.co.uk
  2. 2. What is this talk about?Peformance!“Perf”WPO / Web Performance Optimisation http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  3. 3. Why is performance good?!It can mean (amongst other things):• More traffic/visitors• More sales• Improved SEO rank http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  4. 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.orghttp://tools.pingdom.com•.com http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  5. 5. The Waterfall http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  6. 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-golde http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  7. 7. Check your assets• CSS• JavaScript• Images• Video• Audio• Fonts http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  8. 8. (File)size mattersThe less you need to load the better, optimising yourimages helps! In photoshop use “Save for web” and choose thebest format/quality.http://sixrevisions.com/photoshop/graphics-beginner-tips-web-designers/Use ImageOptim to squeeze out any extra unused bytes from animage, if you use photoshop and save for web this does a prettygood job http://pornel.net/imageoptim/en•http://pornel.net/imageoptim/en http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  9. 9. Minification of javascript filesThis is about removing un-needed whitespace andcomments 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 Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  10. 10. GzippingText files such as HTML, CSS, JavaScript and XML canbe Gzipped by the server to reduce the requestresponse size.http://developer.yahoo.com/performance/rules.html#gzip http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  11. 11. Kicking it up a notch, aggregation of assetsAggregation is the combining of files of the same time,CSS, JS and even images! http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  12. 12. Image spritingCombining a series of images into one, then usingbackground 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 Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  13. 13. CSS first, JS last ­ order of codeRandom acronym definition, DOM = Document object model,its all of the elements you write with your code.http://developer.yahoo.com/performance/rules.html#css_tophttp://developer.yahoo.com/performance/rules.html#js_bottom http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  14. 14. No blocking!What we want is our javascript being downloaded in parallelwith the other assets, or just plain last.http://www.stevesouders.com/blog/2009/04/27/loading-scripts-withouthttp://www.stevesouders.com/blog/2010/12/06/evolution-of-script-loading/ http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  15. 15. Lets be kind to IEInternet explorer is akin somewhat to an elderly person, slowmoving and prone to tripping up. So lets be kind, its easy.Conditional comments can create blocking downloads, evenCSS files, world gone mad no? Well no actually, this is just IE :/ http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  16. 16. Lets be kind to IEThere are techniques to avoid this, by using conditionalcomments early on to apply a class to the HTML tag, whichyou can use in your CSS e.g. html.ie7http://paulirish.com/2008/conditional-stylesheets-vs-CSS-hacks-answe http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  17. 17. Specify your meta charset early onThis avoids the browser encountering one later on in code andhaving to re-render. On this, Drupal will always throws out ameta charset tag first in the head tag.http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-HTML-head-ordering-to-av http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  18. 18. More resources for the front­endhttp://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 Conversionshttp://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  19. 19. Drupal tiem! Drupal cares about performance, if youve ever heard its slow, youve been mis-informed.http://deeson­online.co.uk Alli Price, Making your website go faster! @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  20. 20. First things first, aggregationProviding you use drupal_add_js(), drupal_add_css(),and formapi #attachments, your code is thrown intoDrupals pile o’ files, if youre linking to CSS or JS byputting it inline, shame! You wont be able to aggregateit! :( http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  21. 21. First things first, aggregationhttp://api.drupal.org/api/drupal/includes%21common.inc/function/druphttp://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_JavaScript/7http://drupal.org/node/171205#stylesheets- how to CSS/JavaScript files to your theme http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  22. 22. Wheres the switch?Navigate to: Configuration > Development >Performance. See "Bandwidth optimization". http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  23. 23. Amping up aggregationhttp://drupal.org/project/advagghttp://drupal.org/project/core_libraryhttp://drupal.org/project/agrcachehttp://drupal.org/project/blackwhite http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  24. 24. GZipping contentOn this same page theres the checkbox "Compresscached pages", this will do just that and serve Gzippedpages.What about CSS and JavaScript? If youve gotaggregation and clean URLs enabled, this happensautomatically. http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  25. 25. Drupal Caching methodsLets walk through the options, but first very quickly... http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  26. 26. How does caching work?!If someone requests a page, you check to see if youvegot a cached version, if you do, then serve it! If not, dothe needed work to produce the page, save it to thecache, then serve it out. Easy! http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  27. 27. So what caching options are there for Drupal?Here are the big ones. http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  28. 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 pagesfor anonymous users". http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  29. 29. Boost ­ file based cachinghttp://drupal.org/project/boost• Rendered page HTML is put into a Gzipped file in thewebroot• Modify the site’s .htaccess file to check throughBoost’s cache directory/files• Faster because only Apache is needed to serve fromcache (No PHP or MySQL), great for shared hosts! http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  30. 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://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  31. 31. Varnish ­ reverse proxy cachingFurther reading: https://www.acquia.com/tags/varnishhttp://drupal.org/project/varnish https://www.varnish-cache.org/ https://www.getpantheon.com/support/coding-and-monitoring-varnish•oding-and-monitoring-varnish http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  32. 32. Authenticated user cachingSo far all of the caching methods discussed only workfor anonymous users, this is because pages of logged inusers will be personalised. Not necessarily a lot, but ifwe cached logged in pages, user 2 could get a pagethat has been cached by user 1, and get a different setof links that maybe they shouldnt see. http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  33. 33. Authenticated user cachingWe wont go into this, but there are solutions out there beingworked on, such as:http://drupal.org/project/authcachehttp://drupal.org/project/esi (Drupal 8s WSCCI initiative makes thisreally exciting andpossible).http://www.unleashedmind.com/en/blog/sun/drupal-8-the-path-forwardhttp://buytaert.net/the-future-is-a-restful-drupal#comment-53906 http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  34. 34. Further reading on cachingA great quick page on how caching works, including: min/maxlifetimes, 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 Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  35. 35. Bonus round, code level cachingWhat 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://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  36. 36. Bonus round, CDNsWhat is? http://en.wikipedia.org/wiki/Content_delivery_networkExamples: http://www.maxcdn.com/ http://www.akamai.com/The module: http://drupal.org/project/cdnWhat’s it work on? CSS, JS, Imagecache/styled imagesHas guide? http://wimleers.com/article/easy-drupal-cdn-integration-for-fun-and-profit http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  37. 37. That’s it! Things I’ve  missed:Memcache: http://drupal.org/project/memcacheAPC/Opcode caching: http://bit.ly/Igqy6P (How to install search)JavaScript loaders: http://drupal.org/project/labjshttp://drupal.org/project/headjsSASS/LESS: http://drupal.org/project/sassy http://lesscss.org/Code profiling: New relic etc... http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive
  38. 38. Thanks!!http://deeson-online.co.uk@deeson_labshttp://lookalive.co.uk@heylookalive http://deeson­online.co.uk Alli Price, Making your website go faster!  @deeson_labs Got questions or thoughts? Hit me up on twitter, @heylookalive

×