Four Kitchens

A practical guide for 1000ms renders

2 Min. ReadDevelopment

Howdy perfers! This week we’ve got a good one for you. Web chef Ian Carrico has written an extensive how-to documenting his journey to the mythical 1000ms render. The post is featured on his own blog where he worked the magic, and it’s accompanied by both the code that powers his site along with a full Ansible script allowing you to set up a similarly-configured server on your own.

Interesting bits

I find it especially interesting because he covers techniques to cache the site in two separate ways depending on whether it’s a first-time visitor, or someone with the site’s assets cached. Using Varnish edge-side includes (ESI), he enables even a statically generated site from Jekyll to behave dynamically according to a cookie set by the site. So if you’re coming for the first time, it inlines the critical path assets into that first 14kb response packet and asynchronously loads the regular assets. Then on subsequent visits, it uses the cached assets from the first page load. Pretty nifty!

How to render a site within the first packet response

Magic and source-ery

No how-to is really proper without some code to back it up, and he offers two repos’ worth of experience: the site itself, and the server configuration to accompany it. Using Ansible, our favorite configuration manager, Ian shares the instructions for setting up an identical server so your visitors can enjoy all the benefits of blazing fast page loads.

View his website source code or View the server configuration