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.
One direct replacement of the GIF is the MP4 video format which provides much smaller file sizes and higher quality at the same time.
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
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.
Modern image formats can help to reduce bandwidth, storage and computing requirements on the displaying device.
Use server-side rendering for high-traffic pages