Avoid an excessive DOM size
The greater the amount of nodes that are defined in HTML, the greater the time spent processing and rendering each element.
The greater the amount of nodes that are defined in HTML, the greater the time spent processing and rendering each element.
Most web experiences require a lot of work from the user's browser. The greater the length of the chains and the larger the download sizes, the more significant the impact on page load performance and the energy required to render a page.
Web pages offer a lot of images that aren't displayed on the first loaded screen and can thus be loaded dynamically.
Web browsers often communicate with web servers in a human readable format. These can be HTML, JavaScript and/or CSS files and REST requests which can return a response in JSON. This human readable communication is redundant and, as such, can be compressed to save bandwidth.
Accessing a web page usually retrieves a HTML file from the web server. The HTML may then reference additional resources that the browser has to download.
Minification removes unnecessary or redundant data without affecting how the resource is processed by the web browser.
Description
Modern image formats can help to reduce bandwidth, storage and computing requirements on the displaying device. Optimizing both static images and animated content significantly reduces data transfer and energy consumption.
Ideally, the stored pixel dimensions are exactly the same, or smaller, as the display size in pixels so that no bandwidth or storage space is wasted.
CSS files are very complex and need energy intensive parsing and processing. Each added CSS definition increases the amount of time and processing power needed in this process.
Use server-side rendering for high-traffic pages