Opitmizing my Django Reporting App with Google Pagespeed Part 1

This is what Google Pagespeed is telling me at the moment

Let’s tackle them one at the time. This is also my first time doing this so if I can do it, so can you.

Enable Compression

The common wisdom is for your CSS and JS files to not go through Django. It should go through your webserver like Apache. If you’re a noob, like myself, you might be wondering why should CSS and JS not go through Django? The answer to that is can be found in this question. However, in this case, the reporting app is an internal application and there is less need for more complicated setups.

Here are the steps:

  1. Get django-compress
  2. Get CSSTidy using sudo apt-get install csstidy
  3. Add ‘compress’ to INSTALLED_APPS in your settings.py file
  4. I had to modify my settings file to the snippet below. CSS_ROOT and JS_ROOT is the path to my CSS and JS files on my local machine respectively. I know I ought to be generating this dynamically. I don’t quite know how to do it at the moment and it is something I will get to eventually.
    COMPRESS = True
    COMPRESS_VERSION = True
    COMPRESS_CSS = {
        'all': {
            'source_filenames': (CSS_ROOT + 'main.css', CSS_ROOT + 'redmond/jquery-ui-1.7.1.custom.css', CSS_ROOT + 'redmond/ui.daterangepicker.css'),
            'output_filename': 'css/all_compressed.css',
        }
    }
    
    COMPRESS_JS = {
        'all': {
            'source_filenames': (JS_ROOT + 'daterangepicker.jQuery.js', JS_ROOT + 'jquery-ui-1.7.1.custom.min.js', JS_ROOT + 'jquery-1.3.1.min.js'),
            'output_filename': 'js/all_compressed.js',
        }
    }
  5. Next, I had to modify my base.html template. The script and link references have been removed so that my base.html file now has this instead:
    <html>
    	<head>
            <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
            <meta name="description" content="Reporting and Analytics" />
    		<title>Insync Reporting</title>
    
    		{% load compressed %}
    		{% compressed_css 'all' %}
    		{% compressed_js 'all' %}
    
    .
    .
    .
Results

The minify JS and CSS recommendations are now gone. The score has gone up from 39 to 45. As for the recommendations about gzip, this is out of my scope for the time being (I hate sys admin) as it involved configuration on the webserver which I do not have the inclination to tackle at the moment. This took me all of about 1 hour max. Healthy returns for time spent IMO.

Advertisements

2 thoughts on “Opitmizing my Django Reporting App with Google Pagespeed Part 1

    • TBH I haven’t look at other modules yet and I’m actually having some problems running my javascript with Django-compress. I was thinking of trying out Django-compressor next to see if it works better.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s