Draft
This page is not complete.
HTML is by default fast and accessible. It is our job, as developers, to ensure that we preserve these two properties when creating or editing HTML code. Complications can occur when, for example, the file size of a <video> embed is too large, or when a webpage is not optimized for mobile devices. This module intends to walk you through the key HTML performance features that can drastically improve the quality of your webpage.
| Prerequisites: | Basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. |
|---|---|
| Objective: | To learn about the impact of HTML elements and attributes on web performance optimization. |
Elements & attributes impacting performance
- The
<picture>Element - The
<video>Element - The
<source>Element - The
<img> srcsetattribute - Preloading content with
rel="preload"- (https://w3c.github.io/preload/ ) async/deferattributes<iframe><object><script>relattribute
Conclusion
In this module
- The "why" of web performance
- What is web performance?
- How do users perceive performance?
- Measuring performance
- Multimedia: images
- Multimedia: video
- JavaScript performance best practices.
- HTML performance features
- CSS performance features
- Fonts and performance
- Mobile performance
- Focusing on performance