Progressive enhancement

The order of progressive enhancement: HTML, CSS, and JavaScript.
This article is accessible through pure HTML (first layer). Without styling (second layer) and scripts (third layer), the content is only 76 KB in size.

Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by web search engines, as text on a page is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers.[1][2][3]

This strategy involves separating the presentation semantics from the content, with presentation being implemented in one or more optional layers, activated based on aspects of the browser or Internet connection of the client. In practice, this means serving content through HTML, the "lowest common denominator" of web standards, and applying styling and animation through CSS to the technically possible extent, then applying further enhancements through JavaScript.[4] Deprecated Adobe Flash could be thought of as having shared the final spot with JavaScript while it was widely in use.[5][6] Since web browsers can load site features to the extent supported rather than failing to load the entire site due to one error or missing feature in JavaScript, a progressively enhancing site is more stable and backwards compatible.[4]

  1. ^ "Progressive enhancement is faster". jakearchibald.com. 2013-09-03. Retrieved 2021-11-11.
  2. ^ Tse, Tiffany (2017-02-15). "What is Progressive Enhancement and Why Should You Care?". Retrieved 2023-09-28.
  3. ^ Olsson, Tommy (2007-02-06). "Graceful Degradation & Progressive Enhancement". The Art of Accessibility. Accessites.org. Archived from the original on 2012-03-04. Retrieved 2023-09-28.
  4. ^ a b van der Sluis, Bobby (2005-04-19). "Ten good practices for writing JavaScript in 2005". Archived from the original on 2008-07-04. Retrieved April 14, 2006.
  5. ^ Mills, Chris (8 July 2011). "Graceful degradation versus progressive enhancement". World Wide Web Consortium. Retrieved 2020-08-13.
  6. ^ Nyman, Robert (2006-03-01). "What is Accessibility?". Retrieved April 14, 2006.