The base level (when CSS and JS are absent) will typically be quite performant. But there are situations where the higher layers can actually help with performance. Lazy loading content, for instance, can have a huge impact on page weights and load times. But if progressive enhancement is our aim, we should also consider what will happen if lazy loading isn’t part of the equation. Will the images be visible? Will there be ways to get to the extra content?
<noscript> alternatives hurt
As an example, let’s consider lazy loaded images. In these situations, one common approach is to wrap fallback images in
<noscript> tags. I’ve done this many times, and it’s a solid option. Unfortunately, though, it’s not foolproof. And if not implemented thoughtfully, it may have some unintended consequences.
[Note: this approach may end up being more “graceful degradation” than “progressive enhancement,” depending on how it’s done.]
Preparing for failure
<noscript> tags, “just in case.” But in doing so, we fail to take into account how many images are on the page, and what they would add up to if they all loaded at once.