Django Static Files Reduce Load Times and Save Your Company Money

Static files are like commonly used ingredients that your templates keep on hand when building pages for your users

The Metaphor

If you bake one cake a year, buy a little bit of flour, right before you bake it.

If you bake a cake every hour every day, then you should keep a large supply of flour in your pantry all the time.

A static file is like an ingredient your templates use all the time. Your html templates should have that logo in their “pantry” instead of going to your web host’s “grocery store” to get a new copy of it every single time it delivers a page to your user.

The Example

Lets say you have a company logo that shows up every time a user loads any page on your website.


Don’t just write the url to your logo file.

{# main_page_example.html #}<body>  ...
<img src="/media/assets/company_logo.png"> {# BAD! NO!! #}

This will make your backend re-retrieve that image every time a user loads the page. Every. Single. Time.


Use django’s static file template tags and filters.

{# main_page_example.html #}{% load static %}   {# must load the static file functionality #}<body>...
<img src="{% static 'company_logo.png' %}"> {# YES! GOOD!! #}

Now your backend will cache that file and have it on hand every time it builds the page.

Important Syntaxes (or is it syntaces?)

Place the url to the static file:

{% static 'path/to/file/example.png %}

Use static file url as variable in other template tags and filters

{% load filters %}
{% load static %}
{% static "employee/images/employee_default.png" as default_avatar %}
<img class="img-responsive img-circle" src="{{ employee_avatar.url|default:default_avatar }}">...

Use staticfiles in your stylesheets by placing them in your html (you can’t use template tags in CSS, unfortunately)

{# This has to be in an html file, not a css file #}{% load static %}
{% block page_stylesheets %}
div.example {
background: url("{% static 'example/image.svg' %}");
{% endblock %}

Installation Instructions:

To actually set this up you need to make some changes to your config settings files. The django docs will walk you through that.




Django Developer | NCEES-Licensed Engineer in New York, California, and North Carolina

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Chunk Graph Algorithm (week 26 - 29)

What are Modules in Nodejs? Its Types with Examples.

ConsenSys Bootcamp(一):通过最简单的Dapp学习java

[Action required] Your Trial has Expired — Wed Apr 14 2021

Setting Up Your Portfolio Website with React Router

An Introduction to VueJS Suspense Components

Interview Question — JavaScript Map — Delete an element

How to Implement a PWA and Barba.js into internet kiosks

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lyman Johnson

Lyman Johnson

Django Developer | NCEES-Licensed Engineer in New York, California, and North Carolina

More from Medium

Transferring Windows Server roles, Part III setup the new Server

Push large data files onto Git Repository

sVelocity : Your new coding environment exclusively for Svelte.

Deploying Kong Ingress controller On Google Kubernetes Engine on Google cloud platform