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.

Bad:

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

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

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

Good:

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!! #}
...
</body>

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 %}
<style>
div.example {
background: url("{% static 'example/image.svg' %}");
}
</style>
{% 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

Writing Git Hooks using Javascript

Multiple Folder maker

How to Create a Counter with Phoenix LiveView

Publish free on GITHUB PAGES

Simple Deno API with Oak, deno_mongo and djwt

Using Tezos-Domains with Conseiljs to perform transfers easily.

Some Fundamental concept about React.js

Things you must know about useEffect react hook.

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

Backend with Python: Cruise Mode

Python 3 vs Python 2- Which Version to Code in?

How to set up MariaDB on Rocky Linux 8

A developer’s point of view on safety-critical software projects