Drupal Frontend Performance

Ashok&ChristefanoAugust 6, 2010

About me (BTMash)

Systems programmer. Work at California Institute of the Arts. Working with Drupal since 2006 (4.6.x) Primarily help with patches and

upgrades for contrib modules on d.o. Abuse Favorites Flag Content Fivestar Nice Menus Simplenews Userpoints Userpoints_badges User_badge And more!

Strong interest in server optimization

About me (Christefano)

LADrupal Manager Camp Organizer Drupal Core Contributor Person of the Year D.O and G.D.O webmaster teams.

Resources

Konstantin Kaefer http://kkaefer.com/

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

High Performance http://groups.drupal.org/high-

performance

Goals• Define your objectives and goals first

• Do you want faster response to the end user per page?

• Do you want to handle more page views?

• Do you want to minimize downtime?

• Each is different, though they may be related

• Sometimes, there are some „low hanging fruit‟ that are easy to see, that provide noticeable improvement with little effort.

• Gets hard to achieve more performance (more efforts, low return)• More infrastructure (splitting servers, multiple web/db servers, etc)

• Patching Drupal

• Revisions to Architecture (CCK, Views)

Diagnosis• Proper diagnosis is essential before proposing and implementing a

solution or you are running blind.

• Must be based on proper data.

• Analysis of data collected.

• Can lead towards a few possible paths of optimization.

Points of optimization1. Introduction

2. Tools to measure and diagnose.

3. Speed Optimizations

Front End• Loading images, stylesheets, javascript can

account for over 80% of load time

• Overall load time?

• Page size?

• Time until the DOM is loaded?

• Time until page is rendered?

• Time until the page is functional?

Tools to measure and diagnose• Firebug‟s net panel

• Track loading time for stylesheets, javascript, images, and total page load time.

• Yslow• Rates a webpage based on 13 criteria

• Determines overall load time

• Provides optimization suggestions

• Provides graphs numbers and figures on loading a particular page

• Google Page Speed• Similar to Yslow

• Provides suggestions on improving CSS, optimizing image files and javascript

• Google Chrome Developer Panel• Very powerful (integrated with Google Page Speed).

• Can track speed of JS.

Episodes• Project based on framework by Steve Souders (creator of YSlow) -

http://stevesouders.com/episodes/• Measure timing for Web 2.0 Applications

• Very granular measurement (measures how long each section

• Drupal Module (http://drupal.org/project/episodes)

Non-Browser Tools• AOL Page Test

• http://webpagetest.org

• IBM Page Detailer• http://www.alphaworks.ibm.com/tech/pagedetailer

• Only for windows

• Pingdom• http://tools.pingdom.com

• Waterfall Diagram

• WebKit• http://webkit.org/

• Run with Safari 4

1. Reduce Requests• Every file produces an HTTP request

• Fewer requests is better than smaller files

• Current browsers can dl atleast 2 components per host in parallel

Reduce Requests (cont’d)• Combine sprites together

• Many images in one file

• Shift into view via CSS with background-postion

• Aggregate scripts and styles• Built into Drupal

• More sophisticated modules:

• http://drupal.org/project/sf_cache

• http://drupal.org/project/javascript_aggregator

• Minify aggregated javascript

Reduce Requests (cont’d)• Using CSS Instead of images

• -moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;

• Use image data in CSS• background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7

LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExK cppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) top left no-repeat; )

• Similarly, use font data in CSS if possible

2. Use a CDN• Content Delivery Network

• Lots of Servers scattered around the world

• Reduces roundtrip times

• Using a CDN on http://www.zimmertwins.ca increased the requests/second by 30% from 150 req/s to 200 reqs/s

• Can be an inexpensive solution to hosting static files (7 – 80 cents/GB)• http://akamai.com

• http://www.simplecdn.com

• http://cachefly.com

• http://aws.amazon.com/cloudfront

3. Caching

Caching (cont’d)• Controlled by HTTP Headers

• Browsers check if the content is „fresh‟

• Set Expires header to a date far in the future• <location /css>

ExpiresActive OnExpiresDefault “access + 1 year”</location>ExpiresByType image/png "access plus 1 year”

• Change filenames/URL when updating

4. GZip• Compress text content

• <IfModulemod_deflate.c>AddOutputFilterByType DEFLATE text/cssapplication/x-javascript</IfModule>

• Vastly reduces page size

• http://calarts.edu: 250kb -> 100kb

• Compress scripts and styles as well

5. CSS at the top• Placed in <head>

• Page renders when all CSS in header is loaded

• Loading CSS later causes re-rendering and user will see moment of unstyled content.

• Use <link> instead of @import• Supports downloads in parallel

• More at http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

6. JS at the bottom

• Placed right before </body>

• Loading scripts blocks page rendering• Only one script can be downloaded at a time and will block other downloads

• Scripts are loaded sequentially

• Don‟t use onfoo event handlers in HTML code

• Graceful degradation

7. Minify CSS and JS• Remove comments and whitespace

• Great savings, even with Gzip

• Drupal‟s core aggregator or contributed modules:• http://drupal.org/project/sf_cache

• http://drupal.org/project/javascript_aggregator

8. Parallelization• RFC: should not allow 2 requests per host in parallel

• Using multiple hostnames -> higher parallelization• Don‟t overdo it!

• Modules to help with this:• CDN (http://drupal.org/project/cdn) - Requires Patching or usage of Pressflow

to work correctly.

• Parallel (http://drupal.org/project/parallel) - only usage is with parallel domain pointing to same server with same assets.

• However, Most current browsers allow more than 2 connections per host

• Chrome: 6

• FF 3: 6

• IE8: 6

• Safari: 4

• Opera: 4

9. Reduce image download size• OptiPNG, PNGCrush

• Removes invisible content

• Lossless Recompression

• JPEGTran/ImageMagick• Remove color profiles, meta data

• Lossless JPEG operations

• http://smushit.com - now integrated into Yslow

• Google Page Speed reports how amount image can be compressed

• Using imagecache for user submitted content will help with reducing image download size

10. Persistent HTTP• HTTP supports persistent connections

• Make sure KeepAlive is not turned off

11. Lazy Initialization• Javascript takes time to initialize

• Libraries such as JQuery also count

• Defer setup work

• Load images only when they need to be displayed for the first time• Load carousel image for first time when it is called

• Initial load size for images in carousel: 650kb

• Initial Load size for images in carousel after js lazy load: 250kb

• Only load content above the fold• jQueryPlugin: http://bit.ly/NpZPn

• Very useful on image-heavy sites

12. Small CSS/Javascript Selector Tips

• Use Selector IDs when possible• Indexed in the DOM

• Try to avoid using .class selectors• IE Traverses the entire DOM

• Use element.class selector

• Use the nearest parent id as your context for class selectors

• Try to avoid complicated selectors.

• If possible have fewer DOM elements on the page.

• Use Google Page Speed to update inefficient selectors.

12. Small optimizations• Move components to a cookieless host

• Can be solved if using a CDN or a reverse proxy such as Varnish

• Pressflow also comes with a module that will remove cookies for anonymous users.

• Remove Etags• Setting expires headers will do more good.

• Load Order

• Move contents of htaccess to your site config and set allowoverride to none.

• Use the above only if you have optimized everything else.

(Possibly) Related Presentations• Designing Accessible Drupal Themes

• Heather Wozniak

• HTML5 and Drupal Theming• Scott Vandehey (spaceninja)

• Stop Complaining about Views and learn how to theme them already!• Helior Colorado

• Will touch on Sematic Web and reducing the size of the DOM.

• Theme Packets: A modular approach to theming Drupal• Helior Colorado

Thank you!

Questions? Answers? Tips from you all? Discuss!