Limiting HTTP requests with Django

While recently working on a real estate site, I've devised a little trick that you may find handy when loading a lot of conditional JS or CSS files.

For example one of the pages loads a base CSS file, a design specific CSS file, a layout specific CSS file, a gallery CSS file, and some others for other pluggable items. This lead to 8 requests for separate CSS files. If you consider the boiler plate data that must be sent and received with every request, that adds up to a lot of time and data. The site I'm working on will likely be getting a lot of traffic and scaling is of the essence.

Most Django sites use the same technique I've been using. Each template html file has a head block that load things needed on this template. For example:

{% extends 'base.html' %}

{% block extra_head %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ MEDIA_URL }}css/page-specific-design.css" />
<script type="text/javascript" src="{{ MEDIA_URL }}js/page-specific.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/gallery.js"></script>
{% endblock %}

{% block content %}
...

This technique works fine for most applications, however when you start to notice the number of JS and CSS requests breaking the single digits, you'll probably want to look at cutting that down somehow. I'll show you how.

My technique uses a view that builds a JS/CSS file with Django. The CSS/JS files that are compiled like this should be stored in your templates directory instead of your static media folder so they are accessible to the view. This example will be using CSS but JS uses the same technique, you'll understand.

Pulling it off

First, we're going to build a view that we can pass GET variables. These variables tell the view what CSS files to include. I'm not going to get into all the items in this view, you should have a reasonable understanding of Django first before getting into something like this. The view:

def buildcss(request):
    '''
    Builds a CSS file.

    Takes an optional GET variable 'extra' whos value should be a comma delimited list of CSS filenames.
    Returns a single compiled CSS file.
    '''
    finalcss = render_to_string('css/screen.css') # The base css file
    if request.method == 'GET':
        if 'extra' in request.GET.keys():
            extracss = request.GET['extra'].split(',')
            for css in extracss:
                try:
                    finalcss += render_to_string('css/'+str(css)+'.css', context_instance=RequestContext(request))
                except:
                    pass
    finalcss = mark_safe(finalcss)
    return HttpResponse(finalcss, mimetype="text/css")

A couple things to note: I used render_to_string() to get the text of the CSS files and passed it a RequestContext. This allows you to used Django template language in your CSS files. This also means you can used the coveted "{{ MEDIA_URL }}" in your CSS ;). I also used mark_safe() to eliminate any escaping that might ravage my CSS files, this doesn't happen much with CSS but when you try this technique for JS, you'll appreciate it.

You can now use this view in your templates like this:

...
{% block extra_head %}
<link rel="stylesheet" type="text/css" media="screen" href="/build/css/?extra=menu,gallery,another" />
{% endblock %}
...

This would load screen.css, menu.css, gallery.css, and another.css from the css folder in one request. This also will load these files in order of their declaration in the extra GET variable.

Make it dynamic

I took this method a step further by making it dynamic and allowing me to add variables in a view. First modify the template to be able to iterate over a list of items and add them to the 'extra' variable.

...
{% block extra_head %}
<link rel="stylesheet" type="text/css" media="screen" href="/build/css/?extra={% for items in extracss %}{{item}},{% endfor %}" />
{% endblock %}
...

Then you can add items to the CSS file via the view:

def someview(request):
    ...
    extracss = ['menu', 'gallery', 'another']
    return render_to_response('template.html', { 'extracss': extracss })

But that's slow

Wait, you mean I should be using Django to make CSS files for me instead of using static files? That's going to make Django have to work for every CSS file. Yes, you're right. That's why I used the GET vars. The url for each CSS version can be cached, thus this only needs to be compiled once when you change the CSS file.

That's basically it.

It's simple but when combined with other improvements like using CSS sprites, it can drastically reduce the amount of HTTP requests your site makes.

Hope you enjoyed this one and I promise to update this blog more often.

Posted on April 29, 2009 - 14 Comments
Tags: technology, django, javascript, css, how-to

Comments

emeliajines commented, on January 17, 2010 at 10:01 p.m.:

So Come on? Is that really the best that you can do?

Nahhydaycek commented, on January 18, 2010 at 7:28 p.m.:

<a href=http://www.naturalpath.com/buy-acomplia-online/buy-acomplia-online-without-prescription>buy acomplia</a>
Buy Acomplia Prescription Online http://www.naturalpath.com/buy-acompl... Online From Canada Buy Acomplia Online Purchase
<a href=http://www.naturalpath.com/nirdosh-free-shipping/order-nirdosh-without-prescription>Nirdosh buy</a>
buy discount Nirdosh http://www.naturalpath.com/nirdosh-fr... where can i buy cheap Nirdosh

Hoxenfons commented, on January 19, 2010 at 4:04 a.m.:

<a href=http://www.naturalpath.com/cheap-elavil-without-prescription-overnight-delivery/buy-elavil-online-purchase>buy elavil</a>
cheapest Elavil online http://www.naturalpath.com/cheap-elav... Elavil purchase on line no prescription fast delivery
<a href=http://www.naturalpath.com/purchase-awake-patch/buy-awake-patch-tablet-online>awake patch</a>
no prescription awake patch 30patches cost http://www.naturalpath.com/purchase-a... awake patch without prescription
<a href=http://www.naturalpath.com/cheap-tryptophan-buy-cod/order-cheap-tryptophan-buy-without-prescription>Buy L-Tryptophan</a>
cheap tryptophan without prescription overnight delivery http://www.naturalpath.com/cheap-tryp... cheap buy tryptophan
<a href=http://www.naturalpath.com/order-cheap-unisom-very-buy-without-prescription/buy-unisom-cheap>buy Unisom </a>
buy cheap Unisom http://www.naturalpath.com/order-chea... cheap Unisom buy cod
<a href=http://www.naturalpath.com/buying-endep-online/buy-endep-cheap-without-prescription>buy endep</a>
endep buy http://www.naturalpath.com/buying-end... where to buy endep

alkaddyImpack commented, on January 19, 2010 at 7:47 p.m.:

<a href=http://www.naturalpath.com/how-get-accutane-without-prescription/buy-accutane-online>buy accutane online</a>
buy accutane online no prescription http://www.naturalpath.com/how-get-ac... cheap accutane without prescription
<a href=http://www.naturalpath.com/where-can-i-get-elimite-without-prescription/buy-cheap-elimite-line>Buy Cheap Elimite</a>
Elimite Sale http://www.naturalpath.com/where-can-... Buy Elimite no prescription no doctor
<a href=http://www.naturalpath.com/generic-fucidin-10gm-online/where-buy-cheap-fucidin>buy fucidin</a>
purchase fucidin without prescription http://www.naturalpath.com/generic-fu... order cheap fucidin

amigemame commented, on January 21, 2010 at 11:57 a.m.:

Cheap Viagra! Buy Cialis!
<a href=http://bbbuyviagra.com>CHEAP VIAGRA!</a>
<a href=http://ahbuyviagra.com>BUY BUY VIAGRA CHEAP</a>
aksh67asgh

priopayelidly commented, on January 22, 2010 at 1:29 p.m.:

<a href=http://www.kfarbair.com><img>http://www.kfarbair.com/_images/logo.png</img></a>

בית מלון <a href=http://www.kfarbair.com>כפר בעיר</a> - שירות חדרים אנו מספקים שירותי אירוח מיוחדים כמו כן ישנו במקום שירות חדרים הכולל <a href=http://www.kfarbair.com/eng/index.html>סעודות רומנטיות</a> במחירים מיוחדים אשר יוגשו ישירות לחדרכם!

לפרטים נוספים אנא לפנות לאתר האינטרנט שלנו - <a href=http://kfarbair.com>כפר בעיר</a> <a href=http://www.kfarbair.com/contact.html><img>http://www.kfarbair.com/_images/apixel.gif</img></a>

amigemame commented, on January 23, 2010 at 5 p.m.:

Cheap Viagra! Buy Cialis!
<a href=http://bbbuyviagra.com>CHEAP VIAGRA!</a>
<a href=http://ahbuyviagra.com>BUY BUY VIAGRA CHEAP</a>
aksh67asgh

uterwatscet commented, on January 25, 2010 at 2:38 a.m.:

buy viagra las vegas buy viagra uk cheapest viagra to buy online in uk where to buy generic viagra buy viagra online from canada
http://www.webjam.com/orderviagranoww
buy viagra for less buy viagra online no prescription buy levitra viagra buy viagra in england where can i buy generic viagra
<a href=http://www.webjam.com/orderviagranoww>cheapest place to buy viagra online </a>
buy viagra now buy viagra canada buy viagra online inurl:nc.indymedia.org 35008' buy viagra in el paso texas buy viagra sydney
<a href=http://www.webjam.com/orderviagranoww>viagra uk cheap purchase buy </a>

zoolonycoindy commented, on January 26, 2010 at 7:54 p.m.:

<a href=http://www.naturalpath.com/buy-differin-without-prescription>buy Differin</a>
Buying Differin (Adapalene) Next Day Delivery http://www.naturalpath.com/buy-differ... Differin (Adapalene) Buy Without a Prescription
<a href=http://www.naturalpath.com/buy-cheap-generic-clavamox-online/buy-clavamox-online-cheap>order clavamox</a>
Clavamox sale online http://www.naturalpath.com/buy-cheap-... buy Clavamox online cheap
<a href=http://www.naturalpath.com/buy-aspirin-without-prescription/buy-aspirin-online>buy Aspirin</a>
buy cheap Aspirin no prescription http://www.naturalpath.com/buy-aspiri... Aspirin pills online
<a href=http://www.naturalpath.com/buy-omega-online-debit-card/buy-cheap-omega-3-1-no-prescription>cheap Omega 3-1</a>
Omega 3-1 buy Omega 3-1 online order Omega 3-1 http://www.naturalpath.com/buy-omega-... prescription Omega 3-1
<a href=http://www.naturalpath.com/buy-differin-without-prescription>Buy Rumalaya</a>
Where Can I Buy Rumalaya No Prescription http://www.naturalpath.com/buy-rumala... How to order medicine Rumalaya without a prescription

#10

WereOrito commented, on January 27, 2010 at 9:33 a.m.:

<a href=http://www.naturalpath.com/buy-indocin-cash-delivery/buy-indocin-without-prescription>buy Indocin</a>
buy discount Indocin http://www.naturalpath.com/buy-indoci... cheap online buy Indocin
<a href=http://www.naturalpath.com/decadron-next-day-cod/get-low-price-decadron>buy discount Decadron </a>
for sale with no prescription required Decadron http://www.naturalpath.com/decadron-n... Decadron saturday delivery cheap
<a href=http://www.naturalpath.com/cheap-imuran-cod/buy-imuran-now-online>Purchase Imuran</a>
buy Imuran online pharmacy http://www.naturalpath.com/cheap-imur... Buying Imuran with AMEX
<a href=http://www.naturalpath.com/online-buy-artane-fast-delivery/buy-artane-sale-online>Order Artane </a>
buying buy Artane online without a prescription http://www.naturalpath.com/online-buy... pharmacy Artane
<a href=http://www.naturalpath.com/buy-cheap-benemid/buy-benemid-online>Benemid</a>
overnight cheap saturday delivery Benemid http://www.naturalpath.com/buy-cheap-... buy Benemid

#11

Jarpnottfap commented, on January 30, 2010 at 6:33 p.m.:

<a href=http://www.naturalpath.com/cod-zanaflex-money-orders/buy-cheap-zanaflex-without-prescription>buy Zanaflex</a>
buy Zanaflex from online pharmacy with saturday delivery http://www.naturalpath.com/cod-zanafl... no perscription Zanaflex
<a href=http://www.naturalpath.com/buy-cod-online-aleve/buy-aleve-online-without-prescription>Buy Aleve online</a>
Best Aleve to buy http://www.naturalpath.com/buy-cod-on... Aleve Aleve online no prescription
<a href=http://www.naturalpath.com/cheap-baclofen-sales/order-baclofen-discount>cheap Baclofen</a>
Buy generic Baclofen online without prescription http://www.naturalpath.com/cheap-bacl... Purchase Baclofen
<a href=http://www.naturalpath.com/toradol-without-prescription/buy-cheap-toradol>buy toradol</a>
buy cheap toradol from canadian pharmacy http://www.naturalpath.com/toradol-wi... buy toradol
<a href=http://www.naturalpath.com/tegretol-without-rx/buy-discount-tegretol>buy tegretol</a>
buy tegretol online http://www.naturalpath.com/tegretol-w... where can i buy tegretol without prescription

#12

Meetletsvow commented, on February 1, 2010 at 8:30 p.m.:

<a href=http://www.naturalpath.com/order-generic-ginseng-same-day-shipping/buy-ginseng-discount>Buy Ginseng</a>
Lowest price Ginseng check money order http://www.naturalpath.com/order-gene... free buy Ginseng online
<a href=http://www.naturalpath.com/cheapest-place-buy-revatio/buy-revatio-drugs>buy Revatio </a>
where can i buy Revatio without prescription http://www.naturalpath.com/cheapest-p... purchase cheap Revatio
<a href=http://www.naturalpath.com/caverta-cheap/caverta-purchase-online>caverta order</a>
no prescription caverta http://www.naturalpath.com/caverta-ch... order buy caverta online
<a href=http://www.naturalpath.com/cheap-finpecia/buy-finpecia-online>Finpecia online</a>
Purchase Finpecia http://www.naturalpath.com/cheap-finp... Cheap buy Finpecia
<a href=http://www.naturalpath.com/cheap-pill-zenegra/buy-zenegra>buy Zenegra</a>
cheap Zenegra http://www.naturalpath.com/cheap-pill... cheap sale Zenegra
<a href=http://www.naturalpath.com/order-penegra-consumer-discount-rx/buy-penegra-online>Buy Penegra </a>
Purchasing Penegra quick delivery no prescription http://www.naturalpath.com/order-pene... Online Penegra

#13

GaldaypeEldet commented, on February 7, 2010 at 1:58 p.m.:

<a href=http://naturalpath.com/fosamax/buy-fosamax>buy fosamax</a>
arthritis celebrex celecoxib enbrel fosamax arava http://naturalpath.com/fosamax/buy-fo... fosamax free shipping
<a href=http://naturalpath.com/actonel-without-rx/buy-actonel-without-doctor>Actonel</a>
what is Actonel http://naturalpath.com/actonel-withou... Actonel Uk Order pharmacy Bestellen Actonel Canada
<a href=http://naturalpath.com/where-buy-evista/purchase-evista>evista</a>
http://naturalpath.com/where-buy-evis...
<a href=http://naturalpath.com/where-can-i-buy-celadrin/buy-celadrin>celadrin</a>
http://naturalpath.com/where-can-i-bu...

#14

Zithromax-rix commented, on February 7, 2010 at 10:13 p.m.:

buy zithromax without prescription
http://buy-zithromax-on-line.eventbri...
buy zithromax without a prescription
<a href=http://buy-zithromax-on-line.eventbrite.com/>buy zithromax</a>
buy zithromax
<a href=http://buy-zithromax-on-line.eventbrite.com/>buy zithromax without a prescription</a>
<a href=http://servinghandsboard.com/index.php?action=profile;u=34804>buy zithromax without a prescription</a>

Name:
Email address:
URL:
Comment:
If you enter anything in this field your comment will be treated as spam:

About this blog:

This is my personal blog. I'd love to call it a technology blog, but you will likely find personal posts, picture posts, and outright complaining posts on here.

Latest 10 posts:

More...

Archive:

2009 (1)
April (1)

2008 (3)
October (1)
June (2)

Twitter Updates:

follow me on Twitter

Friends:

Other great people you should catch up on.

Username
Password