Optimizing for Low Bandwidth

Project goals

• Investigate on the web best practices for optimizing pages for low bandwidth
• Minimize the number of AJAX urls that need to be loaded in certain workflows
• If possible make AJAX call in parallel rather than sequential
• use javascript/css aggregation

• Optimize currently used images/icons:
  • compress images
  • remove unwanted / missing image references in css
  • use image sprites
  • use png /gif instead of jpg format

• Restructure html layout
  • Use div's etc instead of nested tables ( especially public pages like contribution, event and profiles )
  • Delete commented code / unnecessary spaces in templates

• Optimize current javascript function
  • lot of functions currently use native javascript which is can be optimize using jquery functions.

• Use of simple / less complex CMS theme might load faster than theme full of images etc.
• Use of php optimizer / accelerator on the server
• Use js/css bundling techniques like: http://www.sitepoint.com/faster-page-loads-bundle-your-css-and-javascript/

Already Done

• CRM-9581 cleanup/ optimize various js functions
• make sure all the js files are compressed.
• Check and make sure css / js is loaded from separate civicrm website.
• CRM-9765 load heavy js files like wyswyg editor on demand

Findings

• You can load css / js from separate civicrm website. So basically you can have a civicrm instance which is not public and load css/js from public instance.
  • For this you will need to modify civicrm.module and fix the path for js / css to load it from external site. For eg:
    

    Index: drupal/civicrm.module
    ===================================================================
    --- drupal/civicrm.module (revision 38714)
    +++ drupal/civicrm.module (working copy)
    @@ -59,13 +59,13 @@
    continue;
    }
    if ( strpos( $line, '.js' ) !== false ) {
    - drupal_add_js( drupal_get_path('module', 'civicrm' ) . '/../' . $line, array(
    + drupal_add_js( '<external website url>' . $line, array(
    'group' => JS_LIBRARY,
    'weight' => 10,
    'scope' => 'header',
    ) );
    } else if ( strpos( $line, '.css' ) !== false ) {
    - drupal_add_css( drupal_get_path('module', 'civicrm' ) . '/../' . $line );
    + drupal_add_css( '<external website url>' . $line );
    }
    }

Assumptions / Things you should do

• Turn on js/css aggregation in Drupal Performance Settings
• Ensure you are running apache2 with mod_deflate (compression) and mod_expires
• If you are hosting js/css externally ensure that site is also using  mod_deflate (compression) and mod_expires
• Use memcached with CiviCRM to reduce load on the database

Hours

• Research - 5 hours
• Development - 15 hours