Progressive Enhancement: What Does it Mean?

Progressive enhancement – the fancy term to describe a process for developing modern websites and web apps.

I’ll try to explain it how I understand it. So hopefully, next time you see it you’ll know what I’m talking about.

Progressive enhancement is a strategy for web development when you put a focus on core content first. Then you progressively add more features and visuals on top of the content or utilize modern technologies if a user’s browser supports it.

When it comes to web performance, progressive enhancement means prioritizing visible content by loading it as fast as possible and defer loading the rest of the content.

It can be done by removing all render-blocking resources to load “critical” content first and then finish loading the rest of the page.

Let’s take an example of font loading. You could use system fonts to show to your users first without making them wait for fonts to download. And later, with the help of JavaScript, “enhance” them with your locally or externally hosted fonts.

Another example is only loading images above the fold and the rest when they come into a viewport. This is also called lazy-loading.

And of course, JavaScript is loaded only after the main content is finished loading. CSS is loaded asynchronously, but a small portion of critical CSS is in-lined in HTML to avoid a flash of unstyled content.

As new technologies emerge, new techniques will follow, but the principle of progressive enhancement for web performance will stay the same – load visible content ASAP.

  • Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *