Making your website go faster! Front-end Developer, Deeson Online Alli Price

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

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

How can I tell how fast or slow my site is? In browser tools: Firebug - Chrome Developer Tools (built in) Online tools: Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

The Waterfall Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

"80-90% of the end-user response time is spent on the frontend. Start there." performance-golden-rule/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Check your assets CSS JavaScript Images Video Audio Fonts Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

(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. 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 beginner-tips-web-designers/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Minification of javascript files This is about removing un-needed whitespace and comments from the file to reduce the file size. Online tools/reading: Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Gzipping Text files such as HTML, CSS, JavaScript and XML can be Gzipped by the server to reduce the request response size. Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

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

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: performance.org/ performance.org Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

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. Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

No blocking! What we want is our javascript being downloaded in parallel with the other assets, or just plain last. without- blocking/ without- blocking/ n-of-script-loading/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

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

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 answer-neither/ Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

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. 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

More resources for the front- end (old school, but worth reading) (Steve Souders’ blog) blog) Just One Second Delay in Just One Second Delay in Page-Load Can Cause 7% Loss in Customer Conversions customer-conversions-in- customer-conversions Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Drupal tiem! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on Drupal cares about performance, if you've ever heard it's slow, you've been mis-informed.

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

First things first, aggregation 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

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

Amping up aggregation 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

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

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

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

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

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

Boost - file based caching 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

Varnish - reverse proxy caching Works out of the box for Drupal 7 core Drupal 6 needs Pressflow 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

Varnish - reverse proxy caching Further reading: cache.org/ and-monitoring-varnishhttps:// cache.org/ httoding- and-monitoring-varnish Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

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

Authenticated user caching We won't go into this, but there are solutions out there being worked on, such as: (Drupal 8's WSCCI initiative makes this really exciting and possible). 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 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Further reading on caching A great quick page on how caching works, including: min/max lifetimes, block caching: (Also has links at the end of the article which are worth reading.) Great series of articles: Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Bonus round, code level caching What caching options are there for me in my code? data-drupal-7 data-d6 Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Bonus round, CDNs What is? Examples: The module: What’s it work on? CSS, JS, Imagecache/styled imageswork on? CSS, JS, Imag Has guide? integration-for-fun-and-profitp://wimleers.com/article/easy Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

That’s it! Things I’ve missed: Memcache: APC/Opcode caching: (How to install search)ll search) JavaScripJavaScript loaders: SASS/LESS: Code profiling: New rCode profiling: New relic etc... Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on

Thanks!! Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on