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.

1. Front-end Performance Optimization
Using Drupal
Fixing all validation errors reported by the Yslow & Page Speed tools.

2. Introduction
 The performance-enhancing concepts that guide
this presentation I first found outlined in these
two books:
 High Performance Websites
http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309
 Even Faster Websites
http://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

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

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

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

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

7. 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 External
This 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 Redirects
Make 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.

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

9. 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 Analytics
The 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 CDN
The 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.

10. 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 Components
Make 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-tags
If 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>