Those who dance are considered insane by those who can't hear the music.
To be able to render cache all things that can possibly be render cached, Drupal 8 code must:
- set the right cache max-age — to ensure only the cacheable parts of the page are cached
- set the right cache contexts — to ensure content is varied as expected (per language, per role, per timezone, per user …)
- set the right cache tags — to ensure rendered content is invalidated when the data it depends on is modified
Before Drupal 8, approximately zero attention was given to cacheability of the rendered content: everything seen on a Drupal 7 page is rendered dynamically, with only the occasional exception.
By flipping that around, we make developers more conscious about the output they’re generating, and how much time it takes to generate that output. This in turn allows Drupal 8 to automatically apply powerful performance optimizations, such as:
- enabling Drupal’s internal page cache (for anonymous users) by default: d.o/node/606840, which requires cache tags to be correct
- smartly caching partial pages for all users (including authenticated users): d.o/node/2429617, which requires cache contexts to be correct
- sending the dynamic, uncacheable parts of the page via a BigPipe-like mechanism: d.o/node/2429287
(The first of those three will likely happen this week. We’re working hard to make the last two a reality.)Visualization
Caching means better performance, but it also means that without the correct cacheability metadata, the wrong content may be served to end users: without the right cache contexts, the wrong variation may be sent to a user; without the right cache tags, stale content may be sent to a user. Therefore we should make it as easy as possible to analyze the cacheability of a rendered block, entity (node/user/taxonomy term/…), view, region, menu, and so on.
It should work not only for cacheability metadata, but for all bubbleable metadata3: it’d be very valuable to be able to see which part of the page caused an expensive cache context or tag 4, but it’d be at least equally valuable to see which part of the page attached a certain asset5.
Since bubbling happens across a tree, it’s important to visualize the hierarchy. The best hierarchy visualization I know in the web developer world is the Firefox Developer Tools 3D view.
I think a tool for visualizing, analyzing and understanding the bubbleable metadata (cache contexts, cache tags, cache max-age, assets) should work in a similar way. The developer should be able to:
- look at the document in 3D in different layers and/or queries (assets, cacheability as a whole, but also only cache contexts, only cache tags, or only max-age)
- zoom in a specific element, and look at all of its bubbleable metadata
- reposition the 3D view, to look from different angles — humans are very proficient at processing visual data
So, over the past weekend, I worked on a prototype. I read the CSS Transforms spec6 and read a CSS 3D transforms introduction. As somebody with little CSS knowledge and not having touched CSS nor 3D programming in years, it was fun to play with this ) The result:
And finally, a short screencast demonstrating it in action:
Give it a try yourself by applying the attached patch to Drupal 8 at commit daf9e2c509149441d4d9a4d1964895179a84a12c and installing the renderviz module.Want to help?
But it’s a lot of fun to work on, and it’s very different from what most of us tend to work on every day. If you’d like to be able to build sites in Drupal 8 with a developer tool like this, please contact me, or leave a comment :)
A cache tag is expensive if it’s invalidated relatively frequently (which causes all render cache items that have that tag to be invalidated). A cache context is expensive if it causes many variations (for example: per-user caching requires a variation of the render array to be created for every single authenticated user). ↩