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:
- 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.
Reduce the number of request sent from browser
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'),
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.
- 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:
Header set Cache-Control "max-age=290304000, public"
- 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.
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