We often take steps to increase server side performance of Drupal sites. Ever wondered how to help fast loading of pages into browser? Here a few tips on browser side performance enhancement. Since we are talking about browser side performance enhancement, so we’ll not be covering Varnish, Memcache, APC, etc.

Factors that generally affect overall page loading time in browser:

  • Blocking JavaScript/CSS
  • Number of request sent from browser,
  • Size of resources requested,

Minimizing the number of requests sent from browser and reducing the size of response can drastically increase browser side loading/rendering performance. Well, most of us already know these principals, but we often oversee or like to think server side caching is going to do everything.

How would you know that you need to work on client side optimization and how would you get specific information on that?

Google Pagespeed is a great tool for investigating client side page loading behavior and areas needing attention.  Extension for Firefox and Google Chrome browser is also available, but the Google page version gives detailed information.

Eliminate render blocking CSS/JavaScript

While browsers parse HTML if it encounters external blocking JavaScript, it stops parsing to download the external JavaScript. In every such situation, a network round trip is initialed, resulting in delayed page rendering. Similarly blocking CSS increases page rendering time. More information on this topic is available in https://developers.google.com.

We have to try our best to minimize blocking CSS/JavaScript in page, but it is not always possible in AJAX enabled fancy web applications. In most CMS, Frameworks we do have minimal control over this and it is not always possible to defer blocking JS/CSS. But we can try!

Reduce the number of request sent from browser

Obvious measure to achieve this is to use CSS and JS compression and aggregation from Drupal’s performance configuration. This is the basic requirement to achieve further optimization.  CSS/JS aggregation will digest various CSS/JavaScript files generated from various modules into fewer file. Thus, this will reduce number of requests to fetch various CSS/JS files. After enabling JS aggregation, please thoroughly verify your site’s AJAX/ JS features. Some JS functions might break, in average case it won’t if JavaScript best practices are followed.

Main reasons for which JavaScript breaks after enabling JS aggregation are:

  • Lack of semicolon ‘;’ character at the end of each statement.  Without  minification/compression this isn’t a big issue and your JavaScript will execute. This is because line break is considered as end of statement. Through minification/compression, these line breaks are removed , whitespaces as well. So if you don’t use ‘;’ at the end of each line of your JS code, you’re doomed.
  • Another reason for which JavaScript functionality breaks is cachable blocks. In Drupal 7 custom blocks, if you are including CSS and JavaScript by using drupal_add_css() and/or drupal_add_js() functions and if block caching is enabled, soon you will find out your CSS and JavaScript in not working. To resolve this, either you can disable block caching at the price of caching performance or you can rewrite your block code as below:                                  

 

function mymodule_block_view($delta = '')
    {
  if($delta == 'some_delta')
  {
    $block = array
    (
      'subject' => t('Block title'),
      'content' => array
      (
        '#markup' => '<p>' . t(HTML goes here') . '</p>',
        '#attached' => array
        (
          'js' => array('path/to/file.js'),
          'css' => array('path/to/file.css'),
        ),
      ),
    );
    return $block;
  }
}
 

Reduce response size:

There is not out of the box solution for doing this, implementation strategy differs from application's nature and architecture. But following these basic policies will improve overall performance significantly.

  • Optimize and compress images as much as possible: If you carefully notice, you’ll often encounter as 32x32 PNG image is 70KB in size. This shouldn’t happen. Images can be losslessly compressed which will reduce bandwidth usage.
  • Minify JavaScript/CSS: We have already enabled JavaScript/CSS aggregation on, then why do we need to do this again? Because, Drupal’s aggregation doesn’t really minify your CSS/JavaScript. It simply digests all CSS/JS files into 3/4 files, but these files are not minified. JavaScript and CSS compression can reduce these resources up to 50% or more. There are several nice modules for D7 which can get the job done. But I found Advanced CSS/JS Aggregation module especially helpful. I have tried several module of it’s kind, and this seemed to be the best.  Please keep in mind, if you’re including your CSS/JavaScript in HTML template by HTML <link> and <script> tag, no module can do this job for you. Either you have to use theme.info file or drupal_add_css() and/or drupal_add_js() for including Scripts and StyleSheets. or minify your code by yourself.
  • Leverge browser caching: Force static (CSS/JS, images, etc) resource to be cached in browser, this will further reduce network round trip and response size. If your site is stable and running in production, your scripts and StyleSheets won’t change often. So, it’s a good idea to force browser caching. Even if it does, you can always regenerate compressed cache using AdvAgg module. To force browser caching add this to Drupal’s .htaccess file:

 

<FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$">
    Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

 

  • Compress content: Almost all modern browsers support content compression over HTTP. This means Apace will compress content before delivering to the browser, set appropriate response header so that browser can recognize compressed content, then browser will decompress the content before rendering. You do not need to write extra code for doing this. Apache needs to be loaded with mod_deflate module and gzip compression. Most of the shared hosting services enable these features by default. If you are not sure, if your hosting have these, run phpinfo() and it will tell you. Add the following code in .htacess file and you are done here.

 

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css application/x-javascript application/javascript text/plain text/html text/xml application/xml
</IfModule>

 

Long story short, to achieve browser side performance improvement follow these steps:

  • Eliminate render blocking JS/CSS
  • Reduce the number of requests sent from browser
  • Optimize and compress images
  • Minify JS/CSS
  • Browser caching friendly resource
  • Gzip content

 

Add new comment