Drupal Tips - Optimizing javascript and css |Tech Lull

drupal_version:

6.x

there are good reasons to get as much of your javascript and css put into external files. these include

separation of markup from styling and scripts - this increases understanding, readability and maintainability. style changes can be made across your site from a single file. using external stylesheets increases your css understanding and skill as you can not rely on inline style tags overriding external rules. your css selector knowledge improves.
performance - caching of files. drupal can minify and combine files, limiting the number of headers sent

so what is the best way to add javascript, jquery, css in drupal? it is quite easy


  drupal_add_js(drupal_get_path('theme', 'your_theme') . '/javascript/banner.js');
  drupal_add_css(drupal_get_path('theme', 'your_theme') . '/css/main_menu.css');

Note, that while drupal_add_js and drupal_add_css calls work great in blocks and modules, they will not work directly on page.tpl.php pages.

you can increase your performance (on a production environment - i don't recommend for development) by going to


Administer >> Site configuration >> Performance or directly at
/admin/settings/performance

and setting

'caching mode' to 'normal',  
'optimize css files' to 'enabled', and 
'optimize javascript files' to 'enabled'

if you look at the source code you will notice css and js files with weird names such as "9511e5f39a8980800595da73ff8ee7e0.js" which is an optimized, combined file if you test your website with an application such as yslow or pagespeed, you will see the improvement back to drupal tips...

Similar entries

Optimizing javascript and css