Improving Drupal's page loading performance

published on January 30, 2008

Introduction

Google dominates the search engine market for a large part thanks to its spartan, no-bells-nor-whistles interfaces. But also thanks to its incredible speed (which is partially thanks to that spartan interface, of course).

Since you’re reading this article, you’re probably a Drupal developer. It’s pretty likely that you’ve had some visitors of your Drupal-powered web site complain about slow page load times. It doesn’t matter whether your server(s) are shared, VPSes or even dedicated servers. Visitors that live abroad – i.e. far from where your servers are located – will face the same performance issues, but at even worse scales.
This article is about tackling these issues.

Front-end performance

Faster servers with more memory stop improving your web site’s performance at some point. Yet, even before your web site gets big, there are other places to look at to improve performance, where greater effects can be achieved, even at lower costs – significantly lower costs actually. Typically, less than 20% of the total response time is used to retrieve the HTMl document. That means the other 80+% is used to process what’s in the HTML file: CSS, JS, images, videos. And in many cases, that number is even higher.

Depending on your website, your server(s), et cetera, these optimizations will probably shave off between 25 and >100 percent (estimated) of your page loading time. Initial (empty cache) and consecutive page loads (primed cache) will both be significantly faster, unless you’ve already done your own round of optimizations.

Much thanks go to Yahoo!’s research that resulted in fourteen rules and the accompanying YSlow tool (we’ll get to that in a second) that allows you to check how your web site performs according to those rules. If you can apply all fourteen successfully, your web site should fly. (Assuming that your page generation times aren’t super slow, of course.) As always, more optimizations are still possible. I’ll discuss some very effective ones briefly at the end.

YSlow

First things first: make sure you’ve installed Firefox, Firebug and YSlow for Firebug (version 0.9 or better).

Firebug is simply a must-have for any web developer, it doesn’t matter whether you’re a professional or an amateur. YSlow is a Firefox add-on developed by Yahoo!, that analyzes your web page and tells you why exactly (remember those fourteen rules?) your site is slow (hence “y-slow”, which is pronounced as “why slow”). But at the same time, it tells you how you can fix those pain-points. The lower the rule number, the greater the effect.

What follows is a comprehensive, yet pretty complete review of how Drupal 5 and 6 score on each rule, by listing the required features, settings or guidelines.

If you want to skip the information and want to see results, just skip to the part where I explain how you can apply the optimizations to your site.

Rule 1: Make fewer HTTP requests

RequirementDrupal 5Drupal 6
CSS aggregationyesyes
JS aggregationnoyes
Generate CSS sprites automaticallynono

Drupal even has the ability to compress CSS files (through stripping comments and whitespace). JS aggregation has been added in Drupal 6. To my knowledge, not a single CMS/CMF ships with the ability to generate CSS sprites. Nor does a single one have a module or extension that allows them to do so. This could be a Drupal key performance feature, if it were supported.

Solution

The easiest way to reduce this significantly is to enable Drupal’s CSS and JS aggregation. You can find these settings at admin/settings/performance in your Drupal site.
If you’re using Drupal 5, there’s a backport of Drupal 6’s JS aggregation feature, you can find it in this issue – I sponsored this patch.

There is not yet an automatic CSS sprite generator module for Drupal. If your site is styled pretty heavily, this would benefit you even more than CSS and JS aggregation. I hope somebody – or some Drupal company – will take the initiative.
In the mean time, there’s a free CSS Sprite Generator out there, if you don’t mind doing it manually.

Rule 2: Use a CDN

RequirementDrupal 5Drupal 6
Alter URLs of served files dynamicallynono

Drupal’s File API needs work: it should be trivial to alter file URLs dynamically, e.g. based on the file size or type of a file.

Solution

I chose to tackle this particular problem myself, because using a CDN greatly enhances the usability of your web site for visitors that live far away from your servers. And one of the projects I’m working on, is one with a very international audience.

The first part of what’s needed, is obviously to update Drupal core to support file URL altering. I chose to create a new function, file_url(), through which all URLs for files should be generated, including the URLs for additional CSS files in the page.tpl.php file (e.g. for a print.css file). This patch also provides a new hook: hook_file_server(), through which modules can provide new file servers. To configure the preferred file server, a new “File servers” setting has been added to the File system settings form. If one server can’t serve a file, Drupal will try the second server, and so on. It will always fall back to the web server Drupal is being served from if all servers provided by modules failed.
Currently, I’ve only got a Drupal 5 patch (it’s included in the CDN integration module and attached at the bottom of this article), because I want to get more feedback before I start maintaining patches for 2 different versions of Drupal. As soon as the patch ends up in its final form, I will provide a Drupal 6 patch, and of course push for Drupal 7 inclusion. An issue at Drupal.org has been created.

The second part – integration with a CDN – obviously requires an implementation of hook_file_server(). So the CDN integration module was born. It’s written with flexibility in mind: it supports synchronization plugins (currently ships with one: FTP), can create unique filenames or directories (necessary if you don’t want to break relative paths), provides the tools to check whether your filters are working well (per-page and site-wide statistics) and the filters can be configured using parameters similar to Drupal’s file_scan_directory() function.

An article that includes benchmarks of the effects of the CDN integration module is being worked on. The same article will include a complete installation tutorial as well.

Rule 3: Add an Expires header

RequirementDrupal 5Drupal 6
Don’t set the Expires header for web pagesyesyes
Set the Expires header for all other filesyesyes
Allow far future Expires headers: ability to alter URLs of served files dynamicallynono

By setting the Expires header for files, you tell the browser that it’s ok to cache them.
Drupal sets the “Expires” header for all other files than web pages to 2 weeks. This is sufficient for most uses. For maximum performance, this should be set to a date in the far future (e.g. 10 years from access), but this requires unique filenames: each time the file is updated, the filename should change as well this is why file URL altering is a requirement. If not, your users could still be using the old files, since they may be in their cache.

Solution

Changing the future date for the Expires headers is easy enough: simply edit your .htaccess file. Your Apache server must also have mod_expires installed, this is available by default on most servers. However, making filenames unique is an entirely other matter. The altering of file URLs is already solved in the solution for rule 2. So all you have to do now, is implementing a file server that supports this. The aforementioned CDN integration module provides this feature, but if you want to use it, you of course have to use a CDN.

Rule 4: GZIP components

RequirementDrupal 5Drupal 6
GZIP web pagesyesyes
GZIP CSS and JS filesnono

When Drupal’s page caching is enabled, pages are written to the cache in GZIPped form! To learn more about how Drupal handles GZIPping, run this command from your Drupal root directory:

egrep ‑rn "gzip" .

Don’t forget the dot at the end!
However, Drupal does not yet allow you to gzip CSS and JS files.

Solution

A Drupal core patch for this is being worked on, but has unfortunately been inactive for quite some time.
If you are using my CDN integration module, you don’t need to worry about this, since CDNs GZIP files by default, if the client supports it.

Alternative solution

As an alternative, you could configure your Apache server to automatically compress files.
An example for Apache 2.x: add the following lines to your .htaccess or httpd.conf file:

AddOutputFilterByType DEFLATE text/css application/x-javascript

Rule 5: Put CSS at the top

RequirementDrupal 5Drupal 6
Abstraction to add CSS files to the web pageyesyes
Default location in the XHTML document is the tagyesyes

Drupal has this abstraction: drupal_add_css().
Putting stylesheets to the document HEAD makes pages load faster: it allows the page to be rendered progressively.

Rule 6: Put JS at the bottom

RequirementDrupal 5Drupal 6
Abstraction to add JS files to the documentyesyes
Default location in the XHTML document is just before nono

Drupal has this abstraction as well: drupal_add_js().
JS should be at the bottom, because browsers wait until everything in the tag has loaded. As you probably know, JS files tend to be pretty large these days, so loading them might take a while, thus postponing the rendering of the page. If you’d put the JS files at the bottom, then your page can be rendered while the JS files are still loading! It also achieves a greater download parallelization, thus cutting down your overall page loading time.
This is also being discussed at groups.drupal.org.

Solution

Unfortunately, the default value for the $scope parameter of drupal_add_js() is bad: 'header'. If we simply make 'footer' the default, we’re good. The number of contributed modules that sets this to 'header' explicitly, is very low, so it shouldn’t be too much work to convert these. And I’ve yet to encounter the first module that has issues with being at the bottom instead of the top.

A more complex part of the solution are Drupal’s default JS files: misc/jquery.js and misc/drupal.js. These can be put in the footer without any issues whatsoever. But what if a contributed module chooses to put its files in the header? Then they may not yet be loaded! For maximum compatibility, we should add the default JS files to the header if at least one module chooses to add its JS file to the header.

I’ve attached patches for both Drupal 5 and 6, but neither implement the more complex part I just explained. In my opinion, Drupal should enforce a strict policy: all JS files should be “footer-compatible”. Until somebody can point me to some JS that must be in the header to work properly, I’m unlikely to change my opinion about this proposed policy.

Alternative solution

The second method to fix this, doesn’t involve hacking Drupal core, but is also more hassle since you have to repeat it for every theme you’re using. Suppose you’re using the default Drupal core theme, Garland. Then open the themes/garland/page.tpl.php file in your favorite editor. Find this line at the top of the file:

Cut it away from there, and put it just before this line at the bottom:

So your end result should look like this:

As you can see, it now comes just before the closing tag. (Well, also before the $closure output, which is the output generated by all hook_footer() implementations.)

Rule 7: Avoid CSS expressions

RequirementDrupal 5Drupal 6
No default theme should implement ityesyes

CSS expressions are not recommended, because they’re evaluated many times: when the page is rendered or resized, but also when the page is scrolled. Even when the user moves the mouse over the page!
None of the Drupal core themes uses CSS expressions. Just make sure you don’t use it in your own themes.

Rule 8: Make JS and CSS external

RequirementDrupal 5Drupal 6
Inline CSS and JS should be avoided or used sparinglyyesyes

If your web site is a common homepage for many users, you may want to use a custom strategy and read this. Otherwise, you can ignore this rule without worrying.

Rule 9: Reduce DNS lookups

RequirementDrupal 5Drupal 6
Use 2-4 hostnames by default: ability to alter URLs of served files dynamicallynono

To my knowledge, not a single hosting provider offers a static file server by default. So it makes a lot of sense that Drupal doesn’t do it by default. However, Drupal should support it out-of-the-box.

If you use a lot of so called widgets (those small blocks of content provided by Flickr, del.icio.us, MyBlogLog, and so on) on your site, you’ll have some extra work to do.

Solution

The altering of file URLs is already solved in the solution for rule 2. So, once again, all you have to do now, is implementing a file server that supports this.
If you use my CDN integration module, then you’ll be using 2 hostnames or more, but this of course requires you have access to a CDN.
Alternatively, you can use a static file server. Robert Douglass’ article on using Drupal with a static file server is a very complete reference: from the pros and cons to the entire server setup.
See Yahoo’s documentation for more details.

Widgets solution

If you’re using a lot of widgets and you want to continue using them, you can. The solution is simple: cache as much as possible on your own site (or to your CDN).
For example, if you use Google Analytics, make sure you’ve installed the Google Analytics module, which has an option to cache the .js file locally (and update it once each day, to make sure you’re serving the latest version).

Rule 10: Minify JavaScript

RequirementDrupal 5Drupal 6
JavaScript minificationnono

This was originally included in Drupal 6 core. However, it has been removed because it was problematic; it would result in boatloads of JS errors, and thus the JS would simply stop working. The technique used by Drupal 6 was Dean Edwards’ packer, also nicknamed packer.

Solution

Packer, isn’t just a minifier, it’s also an obfuscator. A minifier only strips whitespace and comments, but an obfuscator also munges the code; it renames variable and functions as short as possible. For this, the packer uses a reduction algorithm (hence its name). However, this has serious consequences for the page loading time as well: it can easily take 200 ms to unpack the JS! Additionally, the effectiveness of GZIPping packed JS files is much lower.

More reliable alternatives are JSMIN (minifier/uglifier), Dojo Shrinksafe (minifier/obfuscator) and YUI Compressor (minifier). The last two are built on top of Rhino, Mozilla’s Javascript engine, written in Java. Therefor neither qualify for Drupal core inclusion. A JSMIN PHP implementation exists, so I think this is the best choice.
There’s an issue to add this to Drupal 7.

Rule 11: Avoid Redirects

RequirementDrupal 5Drupal 6
Avoid redirects by defaultyesyes

Drupal could redirect users accessing the non-aliased URL /node/11 to the aliased version /about, but it does not – at least not by default.
The Global Redirect module implements this feature in a sensible way. See the project page for a complete explanation.

Rule 12: Remove Duplicate Scripts

RequirementDrupal 5Drupal 6
Abstraction to add JS files to the documentyesyes

Drupal has this abstraction, as mentioned in rule 6: drupal_add_js(). You then just use a static variable to prevent adding the same file multiple times. For an example, see the jCarousel module.

Rule 13: Configure ETags

This is the only rule that depends completely on the server setup. An ETag uniquely identifies a file, and is used to verify if the file in the browser’s cache matches the file on the server.

The problem is that they are generated using attributes specific to the server (inodes) they’re being served from. This implies that when, for example, you’re using multiple servers behind a load balancer, you may one time be accessing the files from server 1, another time the files from server 2. And since the ETags don’t match, you’ll be downloading the file again!

Solution

If you’re using multiple servers, disable ETags. For Apache users: add this line to your httpd.conf:

FileETag none

IIS users have to follow a more complex procedure.

Alternative solution

Use a single server to serve files, or a CDN. See the solutions for rules two and nine for detailed information.

Rule 14: Make Ajax Cacheable

RequirementDrupal 5Drupal 6
Pluggable render formatsnono
Ability to set GZIP-ability per format (i.e. rule 4)nono

These feature was being worked on for Drupal 6, but unfortunately wasn’t ready in time.
The ability to set the GZIP-ability per output format (i.e. rule 4) should be handled at in the same patch, or in a follow-up, since it affects the performance of AJAX callbacks so much.
Other - but mostly less important - rules that are implemented automatically: rules 9 and 13 (AJAX responses will be served from the same server as Drupal), rule 11 (redirects are extremely unlikely to be used for AJAX callbacks in Drupal). Rule 10 is almost completely irrelevant, because GZIPping JSON data has a much greater effect.

Solution

The node rendering refactoring issue is listed for the Drupalcon Boston 2008 code sprint, so we’ll probably see this in its final form in a couple of months.

Applying this to your site

This is of course a boatload of information. The easiest way to apply all of it to your site, is by installing my CDN integration module, and using the included Drupal core patch that also adds JS aggregation and puts JS files at the bottom (by changing the default scopes).

Live sites

Before you start applying this to your site, you of course want some proof that all these optimizations do indeed have an effect. No problem. You’re looking at it. This page should have been loaded in less than a second. Subsequent page loads should complete in less than half a second. With Drupal’s page caching disabled (!), eAccelerator installed and a MySQL query cache in place.

Another live site is DrupalBin. That site is running on a shared server (DreamHost), without eAccelerator and without a MySQL query cache – which explains the often slow page generation times.

Additional optimizations

In order of effectiveness:

  • The Boost module enables Drupal to perform static page caching. This means that rendered pages are written to files, and through some mod_rewrite magic, it will serve the statically cached page from the file if it’s available, thus without even a single DB query!
  • This article at 2bits is chock full with Drupal performance tips.
  • The core patches module Advanced cache, again by Robert Douglass, provides caching for blocks, comments, the forum structure, built nodes, path lookups, popular search queries and taxonomy trees.

Drupal issues

More information

Thanks to …

  • Yahoo! for their work on YSlow.
  • Greg Knaddison (greggles) for proofreading this article and making several excellent suggestions to make this article more complete.

Comments

Dries's picture

Great article, and careful analysis. I’ve written about YSlow before (http://buytaert.net/yslow) – and I have been recommending it to a lot of people. It should be part of the “Drupal development toolchain” that every developer uses.

The Javascript position issue is interesting – we should enforce good behavior through our APIs and make the required changes. Why would we allow Javascript to be placed at the top of the page?

Ximo's picture

Ximo

AFAIK, loading JS at the bottom should be fine in most cases - jQuery usually works unobtrusively by interacting with the DOM once the document is ready. As long as the jquery.js file is loaded before any jQuery code, there should be no problem.

There are however some situations where you’d want jQuery to do its magic before the document is completely loaded, such as dynamically adding classes to elements to change their appearance. If this has to wait for the bottom of the document to be reached, one would experience an annoying glitch as the code is run. An exampe of this is the plugin to add rounded corners to boxes.

So loading jquery.js and drupal.js in the footer by default, and in the header if a module has added some JS there, sounds reasonable. Themes may add JS directly into tpl.php files, but this is bad practice anyway, one should use drupal_add_js() instead. Joakim

andremolnar's picture

Please see: http://groups.drupal.org/node/8399#comment-25894

I was under the same impression - but decided to run tests. If you want to manipulate the DOM there is virtually no difference whether you place $(document).ready(function(){//DOM manipulation}) at the top or the bottom of the page. See the link for complete details.

If anyone finds a flaw in the testing method or has some additional insight please share in the thread on g.d.o http://groups.drupal.org/node/8399

andre

ximo's picture

ximo

Yea, I corrected myself in that same thread. I was speaking from my own experience and what I’ve learned from others, but the problems I had may have been caused by something else.

Anyway, loading the required JS files from <head> if needed would allow the few scripts who depends on this to run as well. One would only have to specify “header” as the scope instead of the (as suggested) default “footer”.

Joakim

rtbox's picture

rtbox

you may want to call a function such as swfobject inline, having the code at the bottom breaks this. I am aware that you can just call the function below the script declaration however this is not really possible if you will be posting into the content of a node.

Wim Leers's picture

Wim Leers

That’s an excellent question, but I’m afraid I can’t answer this yet either.

I’ve searched a lot, but failed to find any information regarding this rather critical topic. Not even a mention on A List Apart.

I’ve contacted John Resig about this, asking him to comment here.

Konstantin's picture

Konstantin

Why would we allow Javascript to be placed at the top of the page?

document.write().

Grugnog's picture

Grugnog

What can I say - this is the most complete article I have seen on this topic by far.

Oh if only this (and YSlow!) had existed when I was trying to convince everyone that we needed to aggregate CSS!

Next stop - gzipping for D7 :)

Wim Leers's picture

Wim Leers

I’ve never heard of that Drupal company, but they seem to have a great team and do great things.

Thanks for the link, I’ve added it to my more information section.

ximo's picture

ximo

I don’t think much more can be said on the topic, and the links are excellent. Great resource for all of us, both n00bs and those who know abit about “frontend” performance :)

Thanks!

Joakim

Gábor Hojtsy's picture

Well, your observation in rule 3 for Drupal 6 is not entirely up to date. The CSS and JS file serving was changed in the RC phase to include a query string which changes on every update.php run and when all caches are flushed. So basically Drupal has a built-in way to ‘rename’ the URLs for the static CSS and JS files with short query string additions. (BTW this grown out of a bug fix for Garland to show up the new styles and behaviors with Drupal 5 → 6 upgrades, even though the file names are the same).

Wim Leers's picture

Wim Leers

Although it covers the basics of what is necessary, it’s very ineffective, in that it forces a refresh of all files!

Please correct me if I’m wrong :)

(Relevant d.o issue: #199946.)

Gábor Hojtsy's picture

Yes, you are right. Since Drupal cannot afford to check for the dates of all files each time they are served, we don’t know about that, so all we can do is to refresh files on upgrades / updates. There is lot of stuff to do here in Drupal 7 and in contribs for Drupal 6.

Wim Leers's picture

Wim Leers

My current approach is to keep an array with source file paths (i.e. the ones that are actually Drupal’s web server) as keys and destination file paths (i.e. the ones synced to the CDN) as keys in the variable table. The destination file paths already contain the unique filenames (or unique directory, to not break relative paths for e.g. CSS files).

So, currently, it doesn’t scale: if you’re working with thousands of files, the size of this array will grow into the megabytes, which is unacceptable. This will have to be reworked to work with DB queries. But then the same problem as for URL aliases arises: lots of queries per page, but files are typically only in the 5-20 range (with CSS/JS aggregation enabled of course), whereas URL aliases are very often in the >100 range. We can reduce the number of queries by still putting the most commonly used files in an array.

If there’s some info on best practices in this area available, let me know ;)

heyrocker's picture

heyrocker

This is a fantastic article and I can see a ton of potential uses for the CDN module even above and beyond using it for CDNs. One of the parts of the module that I find most interesting is the content synchronization piece. I work in a situation where we have a dev/qa/production deployment process, and multiple load balanced production servers, so content synchronization is always rearing its head in various forms. Would you consider pulling this functionality out into its own module which is basically a black box for pushing files around? I think there are a lot of uses the community could find for such a module.

Wim Leers's picture

Wim Leers

This is partially done already: the module supports synchronization plugins. Currently there’s only one plugin: FTP.

The part that scans for files that need to be synchronized (based on the filters configured by the user, so highly customizable) are all contained in the pretty small cdn_cron.inc file (320 lines and it contains loads of cron-specific stuff that could be ripped out).

I’ll gladly accept patches, but I won’t start a separate module for this just yet – plenty of work already with the modules I’m currently (co-)maintaining. If you’d like to sponsor it though, you can contact me.

ultimike's picture

Thanks for the great article - this is the by far the most comprehensive guide for tackling all the issues that yslow has been pointing out on all our Drupal-powered sites.

You’ve done a real service to the Drupal community here.

-mike

dalin's picture

I’ve got a situation where I can’t move $scripts to the end of the document. I’ve have a site frontpage that uses several jcarousels to scroll through images. There’s also a few ad blocks on the page. The adblocks contain a script tag that calls the ad js. That js uses document.write to print code for either an image or flash. Unfortunately this isn’t exactly an instantaneous process and in the time it takes for this snippet of html to be generated and sent, the page has already begun to be rendered. If I were to use document.ready for the jcarousels, they wouldn’t be formated until the page is completed loading and would cause a flash of styled content (it’s fairly significant if you have a lot of styling of this nature). So the solution is to put the jcarousel code imediately after the ul that it styles, and don’t use document.ready, just use the jquery function directly. So for this to work the jquery library needs to be loaded before this point, i.e. in the head.

I can see this becoming an increasingly common situation as we see ever more amounts of javascript in everyday webpages.

Wim Leers's picture

Wim Leers

I agree. Ideally, the changes performed by JS should not affect the display: when JS is enabled, the same “initial view” should be present, through CSS only. This is of course not realistic.

However, your method to prevent flashing (putting the .js files in the HTML head and calling the jcarousel() method immediately after the ul it styles) seems awkward: we don’t want inline JS. Isn’t putting the JS code in the head of the document itself enough to guarantee a flawless load?

For readers interested in reproducing this issue: see my Mini panels demo, which has a jCarousel.

dalin's picture

Moving the jcarousel code to the header doesn’t work for me. This makes sense in my mind since the ul in question doesn’t yet exist at this point.

Wim Leers's picture

Wim Leers

Please try this: $('ul#some-id').ready(function() { // jCarousel initalization });

(i.e. use a selector instead of document)

Christian Schmidt's picture

An alternative to disabling FileETag when running multiple load-balanced Apaches is to let Apache consider only the file size and last modification time when generating the ETag. This is done using the following config line: FileETag MTime Size

This setting requires that files are copied to the parallel servers in a way that preserves the last modification time (and that files aren’t modified several times per second without changing size, but this probably isn’t a problem).

Wim Leers's picture

Wim Leers

Thanks for your addition!

I knew there were ways to preserve ETags, but I deliberately chose to not enter that topic, because that would lead me too far off the focus.

Dan Frost's picture

What an excellent post. I was just starting to post something similar but decided against it when reading yours as it covered the topic perfectly. Very useful and well laid out - thank you.

I think it’s worth mentioning that Live Search (MSN, whatever) have confirmed that they do use ETags and there are ways of sync’ing ETags in both Apache and IIS when used in a cluster.

There’s no evidence (that I can find) that Google use ETags - they play it safe by using If-Modified-Since.

Oh, YSlow can (ironically) slow down your browser (at least it did on mine) so I’d disable it when not using it specifically.

dan

Wim Leers's picture

Wim Leers

Indeed there are ways to do that. Actually the comment that was posted just before your own describes such a method :)

And indeed, YSlow – like just about any other Firefox add-on – slows Firefox down. I choose to have YSlow and the Web Developer Toolbar enabled at all times, since I use it for web development only. I uninstall all other add-ons.

at yarışı's picture

What an excellent post. I was just starting to post something similar but decided against it when reading yours as it covered the topic perfectly. Very useful and well laid out - thank you.

magnum blog &amp;amp;raquo; Blog Archive &amp;amp;raquo; links for 2's picture

[…] Improving Drupal’s page loading performance | Wim Leers (tags: drupal performance optimization articles css howto yslow) […]

IceCreamYou's picture

I’ve been wondering how to improve my YSlow score for awhile, since most of the things YSlow tells me aren’t modify-able for anyone who isn’t really capable of tampering with PHP and .htaccess files. This article should help. Thanks!

Sienna's picture

It really works great as well. Drupal is getting better and better. thanks

Pedro Pablo's picture

Great and useful article. The definitive guide!! :-)

for your info, recently a simple and smart module to compress css and js files has been published at drupal.org. The name is Smartcache and author’s nick is Gremlinc5.

I have tested it and works fine, and you don´t have to tweak any core files, just add a .htaccess rule and a couple of files. Worths a look as maybe it has a place in your article.

lsabug's picture

lsabug

I’ve gone through your recommendations (can’t afford CDN) and my nagging problem is that drupal never seems to cache any of my images saved above root (private files structure). I have it set to cache images in my .htaccess file and I have mod_deflate, mod_expires and mod_headers enabled in apache.

YSlow shows says images on my front page do not have a far future Expires header: (11/19/1978) http://dev.domain.org/system/files/admin/pconnectAd.gif

I know the default for headers in bootstrap is 1978 for content but how do I change for my private image files?

Here’s my htaccess: # Requires mod_expires to be enabled.

# Enable expirations. ExpiresActive On ExpiresDefault "access plus 2 years" # Do not cache dynamically generated pages. ExpiresByType text/html A1

# Set up 10 year caching on commonly updated files

ExpiresDefault "access plus 10 years"

# Set up 10 year caching on commonly updated files

ExpiresDefault "access plus 10 years"

# Force no caching for dynamic files

ExpiresActive Off

More information: http://drupal.org/node/272082

Any and all suggestions will be appreciated  )

rosedragon's picture

Thank you for your tutorial. I had use YSlow and tweak common.inc into JS at bottom and CSS at top. While drupal run module CSS at top, theme CSS at bottom, I change it viceversa, since I dont use any important CSS with module.

About the run module/theme CSS, I edit the value on if (!$preprocess && $type == 'theme') , like these: // If a CSS file is not to be preprocessed and it's a module CSS file, it needs to always appear at the top, // regardless of whether preprocessing is on or off. if (!$preprocess && $type == 'theme') { $no_module_preprocess .= ''."\n"; } // If a CSS file is not to be preprocessed and it's a theme CSS file, it needs to always appear at the bottom, // regardless of whether preprocessing is on or off. else if (!$preprocess && $type == 'module') { $no_theme_preprocess .= ''."\n"; }

Now, what I should do is to minimize the usage of images of my CSS.. since it use like useless 11 css images.

xtfer's picture

xtfer

Both FCKEditor and Google Analytics may choke if the JS is placed at the bottom, in their current state. What about placing the $scripts tag just inside the body tag?? What potential issues might this cause? Would it be an improvement?

zuborg's picture

I would also recommend this online free tool: http://site-perf.com.

It measure loading speed of page and it’s requisites (images/js/css) like browsers do and shows nice detailed chart - so you can easily spot bottlenecks.

Also very useful thing is that this tool is able to verify network quality of your server (packet loss level and ping delays).

GoldNumber's picture

GoldNumber

Thanks for your arcticle. It helped me improve my site performance in more then 3 times. The only problem for me now is improving internal Drupal performance such as page loading for authenticated users.

Drupal Developer&#039;s Toolbox | Developer&#039;s Tool's picture

[…] Improving Drupal’s Page Loading PerformanceLooking to speed up a Drupal website? Try following these steps. […]

Pages