Background

n Drupal, provided that the required modules are installed, performance can be improved in a variety of ways. Aggregating and compressing CSS files can decrease page rendering time (getting the required files more quickly prior to rendering) and the same goes for JavaScript, which executes programs while the page is loading or after it is loaded.

Configuration

To minimise the number of GET operations and the size of transmitted files we can go to Configuration -> Development -> Performance. Therein there are many options, cache related ones in particular. Under Bandwidth Optimisation there are two relevant options which are not yet used.

• One option is “Aggregate and compress CSS files.“
• The other is “Aggregate JavaScript files.“

We enable the second option only, then press the “Save Configuration” button.

HTTP Headers

Before the above change is applied, however, we should probe to see what JavaScript are associated with some sample pages and how they are delivered to the visitor. The Firefox Live HTTP Headers plugins can help here. It is available from Mozilla’s official extensions repository; version 0.17 is the latest (this extension is nearly a decade old and it was widely popular half a decade ago). Once installed, Firefox needs to be restarted, whereupon the extension can be invoked, from the bottom of the “Tools” menu, under “Live HTTP headers”. Load the main page of the site (or any other page for that matter) and analyse the output. “Capture” is enabled by default.

Press “Save All” to save the output to a file. This will be used to compare the number of files before and after the change.

Close Live HTTP headers (the window).

Apply the optimisation changes (as above, ensure the green box says “Your configuration options have been saved.”) and repeat the process again, this time choosing “Save All” and choosing another filename.

Before/After Analysis

Open a text editor and start comparing the files. Suffice to say, if there are issues loading pages after applying the above change, then stop and investigate. A more thorough investigation (beyond ensuring the settings have a positive effect) will come later.

If aggregation works correctly, expect to see in the second (“after”) file that the JavaScript GET request is for /sites/default/files/js/js_[SOME_LONG_CODE].js, not something with “modules”. This means that a new cache-esque file was generated which combines several others. Drupal saves it on disk for performance improvements.

Open the “Live HTTP headers” again, ensuring the log is empty. Reload the same page and scroll up to the same point, ensuring the same JavaScript is pulled from cache again. If the file name is not identical (in its name/size), then it is possible that it got regenerated, which may slow down the server side but not the client side (except when waiting for it to be regenerated); network speed — even if files are concurrently downloaded — should not be an issue here, so it may be good enough. The important thing is that we can verify JavaScript got aggregated.

Generally speaking, another sanity check can be comparison of file sizes of the file ‘dumps’ Live HTTP headers. For the main page of one test site, the “before” file is 131KB in size, whereas the “after” file is 106KB in size. This indicates that a lot less was included in GET requests; getting pertinent details (like which requests were spared) is a more time-consuming exercise.

Site Integrity Tests

At this stage, systematic site tests are needed, especially in pages that are JavaScript-heavy and may be affected by JavaScript functions being thrown into the same file. Among the pages tested (not a full list):

• Front page
• Contact page

This would of course depend on the site at hand.

JavaScript Console

In Mozilla’s Firefox Web site, navigate to Web Developer’s Toolbox, “javascript” under common tags has JavaScript Debugger. Install it (Add to Firefox, Install Now, Restart Now).

Once the browser has the debugger installed and enabled run through a few pages while the console is visible to identify any issues which remain. File -> Open Web Location is another option. Once all is clear and there are no major errors (if any errors at all) it seems ready for permanent switchover to this operation mode.

This entry was posted on Sunday, March 16th, 2014 at 9:49 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.