Making your website go faster!
-
Upload
hammett-livingston -
Category
Documents
-
view
44 -
download
0
description
Transcript of Making your website go faster!
![Page 1: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/1.jpg)
Making your website go faster!
Front-end Developer, Deeson Onlinehttp://deeson-online.co.uk
Alli Price
![Page 2: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/2.jpg)
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
![Page 3: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/3.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 4: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/4.jpg)
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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 5: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/5.jpg)
The Waterfall
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 6: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/6.jpg)
"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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 7: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/7.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 8: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/8.jpg)
(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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 9: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/9.jpg)
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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 10: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/10.jpg)
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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 11: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/11.jpg)
Kicking it up a notch, aggregation of assetsAggregation 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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 12: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/12.jpg)
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/
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 13: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/13.jpg)
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_tophttp://developer.yahoo.com/performance/rules.html#js_bottom
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 14: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/14.jpg)
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/
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 15: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/15.jpg)
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! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 16: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/16.jpg)
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/
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 17: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/17.jpg)
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!
Got questions or thoughts? Hit me up on twitter, @heylookalive
http://deeson-online.co.uk@deeson_labs
![Page 18: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/18.jpg)
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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 19: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/19.jpg)
Drupal tiem!
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
Drupal cares about performance, if you've ever heard it's slow, you've been mis-informed.
![Page 20: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/20.jpg)
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! :(
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 21: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/21.jpg)
First things first, aggregationhttp://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_CSS/7http://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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 22: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/22.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 23: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/23.jpg)
Amping up aggregationhttp://drupal.org/project/advagghttp://drupal.org/project/core_libraryhttp://drupal.org/project/agrcachehttp://drupal.org/project/blackwhite
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 24: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/24.jpg)
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! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 25: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/25.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 26: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/26.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 27: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/27.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 28: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/28.jpg)
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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 29: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/29.jpg)
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!
Got questions or thoughts? Hit me up on twitter, @heylookalive
http://deeson-online.co.uk@deeson_labs
![Page 30: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/30.jpg)
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
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 31: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/31.jpg)
Varnish - reverse proxy cachingFurther 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-varnish
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 32: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/32.jpg)
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! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 33: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/33.jpg)
Authenticated user cachingWe 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-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
![Page 34: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/34.jpg)
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, @heylookalive
http://deeson-online.co.uk@deeson_labs
![Page 35: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/35.jpg)
Bonus round, code level cachingWhat caching options are there for me in my code?
http://www.lullabot.com/articles/beginners-guide-caching-data-drupal-7http://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,
@heylookalivehttp://deeson-online.co.uk@deeson_labs
![Page 36: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/36.jpg)
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 Alli Price, Making your website go faster!
Got questions or thoughts? Hit me up on twitter, @heylookalive
http://deeson-online.co.uk@deeson_labs
![Page 37: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/37.jpg)
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/labjs http://drupal.org/project/headjsSASS/LESS: http://drupal.org/project/sassy http://lesscss.org/Code 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
![Page 38: Making your website go faster!](https://reader031.fdocuments.in/reader031/viewer/2022011718/5681358c550346895d9cf4fd/html5/thumbnails/38.jpg)
Thanks!!
http://deeson-online.co.uk@deeson_labs
http://lookalive.co.uk@heylookalive
Alli Price, Making your website go faster! Got questions or thoughts? Hit me up on twitter,
@heylookalivehttp://deeson-online.co.uk@deeson_labs