Front-end Performance OptimizationUsing Drupal

Fixing all validation errors reported by the Yslow & Page Speed tools.

Introduction The performance-enhancing concepts that guide

this presentation I first found outlined in these two books:

High Performance Websiteshttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309

Even Faster Websiteshttp://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/

It’s best to use both the Google and Yahoo! Page Speed Validation Tools -And try to comply with all of the suggestions they give:

Google’s Resource on the subject:http://code.google.com/speed/page-speed/docs/rules_intro.html

Yahoo’s! Resource on the subject:http://developer.yahoo.com/performance/rules.html

Has anyone done any of this “Page Speed” stuff before? With Drupal?

Overview Make Fewer HTTP Requests Combine CSS & JS into as few files as possible. Enable Drupal options from performance page. Create sprite images for layout elements and implement using CSS.

Enable Progressive Page Load and Remove Unused Markup Put the $scripts at the bottom of the template, right above $closure. Remove unused CSS and JavaScript being added by core modules.

Externalize, Minify, and What to Avoid Make JavaScript and CSS External. Minify JavaScript & CSS. Avoid CSS Expressions. Avoid bad requests or redirects.

Use a Content Delivery Network Fake CDN using CDN module.

Setting up Cookie Domain Defined in: sites/default/settings.php Needs to be different from the sub-domains being used to serve static files through the CDN module.

Configure Headers and Compression Add an Expires Header. Gzip Components. Configure ETags.

Overview 80% of the time it takes for a

web page to load is on the client side.

Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.

Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.

Make Fewer HTTP Requests Combine CSS & JS into as few files as possible.

Enable Drupal options “Optimize CSS files” and “Optimize JS files” from performance page: /admin/settings/performance – Then clear cache and check front end to check there are no errors and/or all files have been combined. If you added external css/js calls to your template, move them into your-theme.info so they will be aggregated with the rest of the internal resources.

Create sprite images for layout elements and implement using CSS.This means you will try to combine all your “layout images” into one file and modify the CSS to only display the correct piece of the sprite in each element.

You should also make sure that from your CSS the sprite is only called one time, as a background image, in a catch-all rule for all the elements that use it.

Use this module to cheat (pass the validation checks in the tools without doing much work):http://drupal.org/project/css_emimage

Remove extra CSS & put JS at the bottom Remove Unused CSS Lots of CSS is added by core modules, you can strip it out by finding/adding this function in your themes template.php

file:

phptemplate_preprocess_page

The needed code: http://drupalbin.com/19830

Test to make sure each file excluded is not one needed for some layout element or whatever to display.

Disable “Optimize CSS files” option on the performance page and run the Google tool. Look at the very bottom, it will show you “unused CSS” and point you to each file. This allows cherry picking the required CSS over into a “theme style sheet”, so the original file can be excluded from template.php, and our page will still be just as pretty as ever:)

CSS at the Top and JS at the Bottom - Progressive Page Loading

In most themes this means moving: <?php print $scripts; ?> to the bottom, of the template file. right above: <?php print $closure; ?>.

If a module is printing its own JS in the head: find “drupal_add_js” in that module directory and change it’s scope to “footer”:

drupal_add_js($data = NULL, $type = 'module', $scope = ‘footer', $defer = FALSE, $cache = TRUE, $preprocess = TRUE);

This breaks some JavaScripts! For an idea of how to re-make document-write’s (so they work when loading last) take a look at the “DOM

element replace” post-doc write scripts - at the bottom of this document.

Move it to the bottom, save, clear your cache, then make sure that all your JavaScript is still working correctly and no errors are being produced.

If nothing breaks, you have enabled progressive page loading! As soon as an element is read by the browser: it is rendered, styled, to the user, element by element, down the page.

If JavaScript is left at the top nothing can download or render on the page until all of the JS in the head is finished being processed, lame.

More CSS & JS Cleanup Avoid CSS Expressions

Yahoo! Says it best: CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8. As an example, the background color could be set to alternate every hour using CSS expressions:background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Make JavaScript and CSS ExternalThis way they don’t need to be loaded with the HTML on every page. Once the document is cached on the client side it will not need to reload and won’t be getting sent out with every request like it would if it were embedded.

Minify JavaScript.This module can be used in D6 to minify JavaScript using JSMin:http://drupal.org/project/javascript_aggregator I cannot find a working D7 solution, and it’s not in core.There is something similar for CSS Gzip:http://drupal.org/project/css_gzip D7 has this in core.If your using private downloads:Gzipping of js & css can be achieved with the Boost module.

Fix bad Requests and/or RedirectsMake sure external resources being used on the page (js, css, images, flash, ect.) are not missing and are not being redirected to other resources to load. So, you don’t want your image: www.mysite.com/image.jpg redirecting to static.mysite.com/image.jpg before loading, you want to just link the img src to: static.mysite.com/image.jpg in the first place.

Use a Content Delivery Network If your site is not big enough to require an actual content delivery network:

This is how to set up a fake one to allow resources to download in parallel off of sub-domains.

Most browsers, by default, only download two resources from one domain at a time (only one at a time for JS). Spreading static resources (like images, CSS, and JS) across couple of sub-domains will allow browsers to download things, 2 at a time, from each domain simultaneously.

I recommend starting by adding only one sub-domain for this (most sites do not require separate ones for css, js, and images) I used this one on my site: http://static.plattdaddy.com

Create the sub-domain pointing to the root of your existing website. Once this is finished you should be able to access your exact site through either domain: static. = www. As long as there’s nothing in .htaccess trying to redirect you back to www or something.

Install the CDN Module: http://drupal.org/project/cdn In D6 you’ll have to patch core (possibly twice) just like it says in the readme.txt.

Configure the “Fake CDN”: /admin/settings/cdn/details Add rule: http://static.yourwebsite.com|.jpg .jpeg .gif .png .ico .png .js .css

Enable the “Fake CDN”: /admin/settings/cdn Leave the default “mode” selected: Origin Pull.

Make sure to add some redirect rules like this to your .htaccess file so you don’t create a ton of nasty duplicate content and canonical domain confusion issues in the search engines.

Setting up cookie domain A domain that sets a cookie is considered a “cookie enabled domain” by whatever

requests it. The goal here is to separate static resources onto a domain that dose not set any cookies first we’ll need to set which domain we want Drupal to use for setting cookies, usually this will be www. If you must have your cookie domain set to the root of your site, like this: http://plattdaddy.com, then you should serve static resources from a separate domain, like yimg.com for Yahoo and ytimg.com for Youtube.

You’ll need something like this cookie viewer add-on for FireFox (right click any page, click “more info” then click the cookies tab), so you can see, really clearly, what cookies have been loaded, and from what domain. I also recommend using the clear cache button add-on while testing your cookie domain setup.

In settings.php uncomment this line and put your domain in like this: $cookie_domain = 'www.yourwebsite.com';

If you use Google AnalyticsThe cookies that provides is via *.example.com – so, as per their tutorial page, you’ll *have to* use a separate domain name for static files if you want to keep it cookie-free (at least pre-asynchronous tracking anyway). The way, I found, around this one is to add this to the analytics code: _gaq.push(["_setDomainName", "www.plattdaddy.com"]);If your using the GA module: Go to: admin/settings/googleanalytics and just add the above snippet to the “Custom JavaScript code” area on the admin page.

If you have enabled the CDNThe static resources will already be getting served off one or more custom sub-domains.So, now, your site should pass either tools validation tests for serving static content off of cookie-less domains and parallelizing downloads across hostnames.

Configure Headers and Compression Expires Header

Make sure the expires apache module us loaded. If not, uncomment this in httpd.conf (then restart apache):LoadModule expires_module modules/mod_expires.so

Gzip ComponentsMake sure the deflate apache module us loaded. If not, uncomment this in httpd.conf (then restart apache):LoadModule deflate_module modules/mod_deflate.so

Configure E-tagsIf mod_expires is on: add FileETag MTime Size inside of: <IfModule mod_expires.c>

Copy all of the needed customizations from this example: http://drupalbin.com/19839

You’ll need to transfer to your sites .htaccess file: The second and third: <FilesMatch></FilesMatch>’s

Place these directly below the default one, like I have it in the example.

The entire: <IfModule mod_expires.c></IfModule>