www.joomlatools.com

[johanjanssens]

Our own company site, fully driven by Pages, it also acts as the test-bed for new Pages features. The content from the site comes from 4 different locations:

1. blog

The blog posts are static markdown files we host in Git. Posts are categorised in folders (extensions, tutorials, connect, ...) and also contains tags, we tag each post with the extension it relates too, posts that are release news, get a release tag too.. For example the extension news pages shows how we are filtering the release posts by extension tag.

2. changelog

The changelog for each extension is retrieved from a JSON Web API we expose from our internal release system. The internal data is also generated by Pages. This is good example of seamless headless Pages to Pages communication using the build in JSONAPI support in Pages.

3. documentation

The documentation is fetched from the Helpscout Docs API and rendered from markdown to html. (We are still working on bringing all docs into the site).

4. open source

The listing of our open source repo's and related information is fetched from Github using their public Rest API

Note: There is no content stored in the database, Pages is perfectly capable of doing that though. We have just chosen to not store content in the database, this makes is much easier to maintain the server, as all our content is either stored in Git or retrieved through a webservice.

Caching

The site makes use of all the caching power that Pages has to offer, all pages are statically cached on the server, and served through the cloudflare CDN. Finally we are making use of the prefetcher to reduce any latency, making page loads nearly instant, the site can achieves a TTFB of 1msec for prefetched pages!

Static caching

On the server, we are drastically reducing resources by making use of JIT (just-in-time) page generation in combination with the static page cache.

The JIT approach means that that we require vastly fewer server resources than any other dynamic site. Most dynamic sites (Wordpress, Drupal, Joomla Next.js, etc ...) will generate a page each time it's requested, we only re-generate our pages when their contents have changed.

More info on the static cache: #423

CDN caching

With the help of the CloudFlare CDN and a custom built Cloud Worker we are able to keep our pages cached and refresh them on demand in the CDN only when they have cached, this allows us maintain a constant +/- 50msec time to first byte (TTFB) from anywhere in the world and a near 100% cache hit rate!

Prefetcher

The prefetcher is capable of preloading links during idle time on fast connections. On the site it's configure to preload all links in the main menu that are visible in the viewport on and also prefetches links on hover. Preloaded pages have a time to first byte (TTFB) of +/- 1msec!,

More info how this works: #285

Responsive images

We worked very hard in the last year to make the site consume as few resources as possible, we optimised our design and fine-tuned the responsive images through Mix, a super-smart image processor for Joomlatools Pages that can generate responsive and progressive images on-the-fly.

Using MiX we have been able to reduce the total page weight to +/- 160kb on desktop, which is a 12.5 x improvement compared to the average of 2mb

Note: MiX is still in full-development you can find the code and issue here: #436

Result

When you visit Joomlatools.com you'll notice that it's blisteringly fast, in fact, we've had people tell us that it feels app-like. As a nice bonus the site is very sustainable too: https://www.joomlatools.com/blog/developer/sustainable-web-design