making your website go faster!

Making your website go faster!

Front-end Developer, Deeson Online

http://deeson-online.co.uk

Alli Price

http://deeson-online.co.uk/

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,

@heylookalivehttp://deeson-online.co.uk@deeson_labs


Why is performance good?!It can mean (amongst other things):

• More traffic/visitors

• More sales

• Improved SEO rank




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://getfirebug.com/

http://www.webpagetest.org/




The Waterfall




"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/



http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/


Check your assets• CSS

• JavaScript

• Images

• Video

• Audio

• Fonts




(File)size mattersThe 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






Minification of javascript filesThis 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://fmarcia.info/jsmin/test.html

http://jscompress.com/


GzippingText 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






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


CSS first, JS last - order of codeRandom 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_bottomAlli Price, Making your website go faster!

Got questions or thoughts? Hit me up on twitter, @heylookalive

http://deeson-online.co.uk@deeson_labs



http://developer.yahoo.com/performance/rules.html#js_bottom


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/2010/12/06/

evolution-of-script-loading/






Let's be kind to IEInternet 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!




Let's be kind to IEThere 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/






Specify your meta charset early onThis 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!



http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-HTML-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx




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 Conversions

http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-

loss-in-customer-conversions



http://developer.yahoo.com/performance/rules.HTML

http://www.stevesouders.com/blog/

http://www.stevesouders.com/blog/

http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions


Drupal tiem!



Drupal cares about performance, if you've ever

heard it's slow, you've been mis-informed.


First things first, aggregationProviding 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! :(




First things first, aggregationhttp://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_CSS/7

http://api.drupal.org/api/drupal/includes

%21common.inc/function/drupal_add_JavaS

cript/7http://drupal.org/node/171205#stylesheets

- how to CSS/JavaScript files to your theme



http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_CSS/7

http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_CSS/7

http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_JavaScript/7

http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_JavaScript/7


Where's the switch?

Navigate to: Configuration > Development >

Performance. See "Bandwidth optimization".




Amping up aggregationhttp://drupal.org/project/advagg

http://drupal.org/project/core_l

ibraryhttp://drupal.org/project/agrcachehttp://

drupal.org/project/blackwhite



http://drupal.org/project/advagg

http://drupal.org/project/core_library


GZipping contentOn 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!




Drupal Caching methods

Let's walk through the options, but first very

quickly...




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!




So what caching options are there for Drupal?

Here are the big ones.




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




Boost - file based cachinghttp://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!



http://drupal.org/project/boost


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://pressflow.org/


Varnish - reverse proxy cachingFurther reading:

https://www.acquia.com/tags/varnish

http://drupal.org/project/varnish h

ttps://www.varnish-cache.org/ htt

ps://www.getpantheon.com/support/c

oding-and-monitoring-varnish



https://www.acquia.com/tags/varnish

http://drupal.org/project/varnish



https://www.varnish-cache.org/


Authenticated user cachingSo 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!




Authenticated user cachingWe 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 (Drup

al 8's WSCCI initiative makes this really exciting and

possible).http://www.unleashedmind.com/en/blog/sun/drupa

l-8-the-path-forward

http://buytaert.net/the-future-is-a-restful-drupal#comment-53906 Alli Price, Making your website go faster!



http://drupal.org/project/authcache

http://drupal.org/project/esi

http://www.unleashedmind.com/en/blog/sun/drupal-8-the-path-forward




Further reading on cachingA 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,





Bonus round, code level cachingWhat 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-d6Alli Price, Making your website go faster!






Bonus round, CDNsWhat 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-profitAlli Price, Making your website go faster!



http://en.wikipedia.org/wiki/Content_delivery_network

http://www.maxcdn.com/

http://www.maxcdn.com/

http://www.akamai.com/

http://drupal.org/project/cdn


That’s it! Things I’ve missed:

Memcache: http://drupal.org/project/memcache

APC/Opcode caching: http://bit.ly/Igqy6P (How to insta

ll search)

JavaScript loaders: http://drupal.org/project/labjs

http://drupal.org/project/headjs

SASS/LESS: http://drupal.org/project/sassy http://le

sscss.org/

Code profiling: New relic etc...Alli Price, Making your website go faster!



http://drupal.org/project/memcache

http://bit.ly/Igqy6P

http://bit.ly/Igqy6P

http://drupal.org/project/labjs






Thanks!!

http://deeson-online.co.uk

@deeson_labs

http://lookalive.co.uk

@heylookalive




making your website go faster!

Documents

firebug http

deeson onlinehttp

netimageoptimenalli

comalli price

javascriptalli price

gzipalli price

labsthe waterfallalli

pretty good job http