Making your website go faster Alli Price Frontend

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 • Java. Script • 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 Image. Optim 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, Java. Script 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. websiteperformance. 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. ie 7 http: //paulirish. com/2008/conditional-stylesheets-vs-CSS-hacksanswer-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 frontend 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-incustomer-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%21 common. inc/f unction/drupal_add_CSS/7 http: //api. drupal. org/api/drupal /includes%21 common. inc/function/drupal_add_Java. Scri pt/7 http: //drupal. org/node/171205#stylesheets - how to CSS/Java. Script 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 Java. Script? 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

Databased • Available in core • Requires going from Apache to PHP to My. SQL • 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 My. SQL), 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/coding -and-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-caching -data-drupal-7 http: //www. lullabot. com/articles/beginners-guide-caching -data-d 6 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/Igqy 6 P (How to install search) Java. Script 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