Optimizing web performance for static site

As most web apps are I/O bound, I naively assume that the static site is immune of the web performance issue by design. I am totally wrong. The growing mobile web traffic has significantly changed the landscape: the sluggish cellular network just becomes the bottleneck in the new era.

More concretely, it still takes 5s for a mobile device to render this simple About page in regular 3G network(750 KB/s) with an empty cache after some best practice.

Distribute assets with CDN

The YSlow report shows the HTML document is 8.5K, a marginal 6% of 148.6K payload.

YSlow breakdown
YSlow breakdown

So if we manage to deliver the assets more efficiently, we should boost the performance. After comparing several low end CDN services, I decide to give KeyCDN(refer link) a spin due to:

After the heavy-lifting is outsourced to KeyCDN, the rendering time for above-the-fold is down to 2.5s, not bad.

Since this site is built with metalsmith and gulp, I manage to integrate the CDN with following tools:

Here are some lessons learned:

FOIT vs FOUT

Chrome Dev Tools allows us to review the rendering snapshots in the timeline:

This is the typical “Flash of invisible text”, aka FOIT: the rendering pipeline is stalled by the web font dependency, so no content is rendered until 2.35s. The alternative is “Flash of unstyled text”, FOUT: the content is styled with system font so the rendering is not blocked, then we promote the style to web font when they are asynchronously loaded. Some front end engineers go extra miles to support so-called “above-the-fold” experience: we just load minimum styles and a subset of web fonts to support the visible portion on your device, and load everything else later for the swift perceptions.

After toying this idea with fontfaceobserver and fontfaceonload for couple hours, I find the latter solution is much harder than I thought:

Conclusion

A pragmatic optimization should strike the balance between the specialization and productivity. I think the CDN approach will do well enough for the time being, anyway this site is not popular.