When developing in Drupal there are certain steps that can be taken to ensure the fastest possible user experience.

JavaScript

Ideally you will want to place your JavaScript links at the bottom of you code, just before the tag. This will allow the main page elements to render before the JS is retrieved. This will make for a more pleasant user experience, as well as reducing the overall loading time.

However, there are issues when doing this with Drupal. One of these problems relates to the drupal_add_js() abstraction, which uses ‘header’ as its default $scope parameter. Some modules also set this parameter explicitly. To counter this, the default must be changed to ‘footer’, with the same done in any offending modules.

One further hindrance involves the default Drupal JS files, jquery.js and drupal.js. If you’re using a module that must load files in the header, then these scripts should also be placed there. If moving your JS files to the footer is causing errors and site problems, it’s best to return them to the header. If your site is using a number of scripts then it could prove productive to test which combination of header/footer/inline scripts return the best performance. Yahoo’s YSlow addition to Firefox’s Firebug add-on is a useful tool in testing site performance.

It can also help to minify your JavaScript. This involves the removal of unessential characters from the code, such as white space or comments. Minifiers such as YUI Compressor and JSMIN can be used to reduce the size of JS files, helping to reduce page rendering time.

CSS Expressions

CSS expressions allow you to assign JavaScript expressions to a CSS property in Internet Explorer. While this allows for dynamic styling, it can be a drain on your site’s performance. Not only are the expressions evaluated when the page is rendered, but also when a user scrolls down the page or during mouse movement. Therefore it is best to avoid CSS expressions when creating your own Drupal themes.

External JS and CSS

For optimum performance, inline JavaScript and CSS should be avoided where possible. External files are already useful in website creation as they allow for site-wide changes with having to edit every page that uses them, but there is also a performance advantage to this. These external files are cached by the browser, as opposed to inlining where the JavaScript/CSS would be downloaded with every HTML load.

DNS lookups

If your site involves loading content from other websites then some optimisation may need to take place. Examples include simple content like images, to more advanced content, such as widgets. Calling content from other sites involves a DNS call to match up the site’s URL with its IP address. Browsers and operating systems can cache the DNS mapping, but it can still be a good idea to reduce the number of external sites your webpage calls. However, it can be good to have a small number of DNS lookups, as this can aid parallel downloading. Calling content from a small set of websites can speed up page rendering, but too many could lead to many DNS lookups. Yahoo recommends splitting components across two to four hostnames