Font Loading Performance for Single-Page Applications

If you’ve ever worked in a project architected as a single-page application, the following pattern may look familiar:

<!doctype html>
<title>My Application</title>
<div id="app"></div>
<script src=""></script>
<script src=""></script>
    React.createElement( 'span', null, 'Hello World' ),
    document.getElementById( 'app' )

Note the empty div element. While this example uses React, most any of the common JavaScript frameworks will follow this convention of mounting an application into some root container element. It’s not until the application code has loaded and computed the rendered result that anything is shown on the page.

If an application uses custom fonts, there’s an interesting side-effect of this loading procedure which we might not anticipate. Presumably in an effort to optimize network requests of unused assets, Chrome will not load a font file if there is not any text in the page which uses that font. Even if we declare the fonts used in a CSS @font-face rule, a font file will not be requested until after the initial rendering of the application. This is due to the fact that, until that point, there’s effectively no text shown anywhere in the page.

This has the unfortunate effect of introducing what is known as a “flash of unstyled text”, where the text in an application may be shown using a fallback font until the font has finished loading.

Ideally, if we know that our application will render text, we would want the font to be loaded as early in the page lifecycle as possible.

Continue reading

Static Site Generators

As web developers, we most often work with dynamic web content. These days, it’s rare to come in contact with plain old HTML files. That said, there are a growing number of tools which assist in the creation of static sites, aptly named static site generators. To cite a recent example, Kyle Rush published an article explaining how Obama’s campaign team used Jekyll, arguably the most popular static site generator, to improve the performance of their $250 million fundraising platform. In this article, I will discuss the purpose of these tools, the benefits they provide, and several popular options to choose from.

An overview

For a simple site or blog, it is not uncommon to create a basic web application consisting of two primary components: (1) a page layout (i.e. header and footer), and (2) a small collection of database tables to manage content. There really isn’t a whole lot going on here, and the whole application server + database + hosting solution can become a real pain for such a simple project. If the goal is to simply wrap written content within the context of a master layout, this is hardly the simplest solution.

Static site generators are able to satisfy the same needs without the unnecessary complexity. As part of the build process, layouts are combined with content to generate simple HTML files. Layouts are likely to have some variation of a templating syntax, and content files can be written in Markdown or other familiar writing formats. As a result, you avoid the headache of the overhead which can accompany dynamic sites.

Primary benefits

  • Fast: Because the generated files are simple HTML files, they can be served directly rather than being processed by an application server.
  • Affordable: There are several options to host your static sites for free. For example, you could store the files in a simple Dropbox folder, and use a service like site44 to serve them from a custom domain. You can also serve a static site directly from a GitHub repository using these instructions. For a more sturdy hosting solution, Amazon offers their Simple Storage Service (S3) at a very affordable price for most sites.
  • Simple: Most static site generators require a layout, some content, and a basic understanding of the syntax used to link them together. Jekyll uses Ruby, but you won’t need to know much about Ruby in order to use it for your own sites.
  • Secure: Because your site is simple HTML, there’s significantly fewer security risks. As a result, you can concentrate on what really matters: the content itself.

Popular Static Site Generators

Depending on your development environment, you may want to choose from one of the popular options below:


This blog itself was previously maintained using a custom static site generator. It’s fairly basic, but the source code is available at the GitHub repository in case you’re curious about the project structure of a simple static site. Since this is a custom generator, it may be more relevant to refer to the source of some of the many sites which use Jekyll.