Search code examples
cssperformancetypography

Is it valid to optimize speed for text rendering, and then asynchronously optimize legibility via a deferred stylesheet?

text-rendering: optimizeLegibility is the default for most modern browsers. (Edit: Not true, but leaving for posterity.)

However, there is a considerable performance gain from text-rendering: optimizeSpeed.

Currently, I have my above-the-fold/critical styles inlined, with my below-fold styles deferred asynchronously using rel=preload.

My question is if it would be valid* or worth it** to initially, in my critical styles, use text-rendering: optimizeSpeed, and then in my deferred/asynchronous stylesheet, switch to text-rendering: optimizeLegibility?

* validity defined as working the way you'd expect. "Optimize speed" is used initially, and then when the deferred stylesheet loads asynchronously, "optimize legibility" is used instead.

** worth it defined as any more-than-negligible performance gains in proportion to the (simple) process of switching the styles in my SS.

Solution

  • Okay, I think I've since answered my own question, so I'll leave a few things here for posterity:

    • The answer to the core of my question: Blanket-applying optimizeLegibility is slow, from initial render time to repaints. So my conclusion is that even loading it asynchronously isn't worth it, as it can delay the loading of the async stylesheet and cause FOIT [1] (especially when applied to long strings of text).

    • As BoltClock pointed out, Chrome and Safari use auto by default, while only Firefox switches intelligently at a 20px threshold. Moreover, though, Chrome and Safari treat auto as optimizeSpeed. [2] So declaring oS in my above-fold styles is basically redundant anyway.

      • I think perhaps most importantly, this demonstrates optimizeLegibility is not at a point where it can be used without special exception, as Chrome and Safari aren't even comfortable using anything other than speed where other options like precision aren't specified.

    • Not only is there a lack of support in some older browsers, there are in fact deal-breaking bugs in others, [2] meaning text-rendering: optimizeLegibility is not viable for progressive enhancement (at least PE via deferring below-fold styles).

    Lastly, I submitted an issue on caniuse's repo to correct the erroneous claim that modern browsers default to optimizeLegibility (thanks to BoltClock for pointing that out).

    TL;DR Is it valid? Technically, but the first part is redundant. Is it worth it? Not only is it not worth it, there are performance and unanswered bug concerns.