One way to minimize both loading times and improving enviormental impact of your webpage, is to choose a file format that needs less loading time and is easier to compromise. Popular formats are WEBP and AVIF, which also permit animations.
WEBP was introduced in 2010 and developed by Google for their Chromebrowser. WEBP allows a transparent background is easily compromised with both no-loss and loss options. Compromisation barely shows any quality loss, besides the files being smaller in general. WEBP is not supported by all platforms and browsers (Internet Explorer, LinkedIN, ...) So old formats might be used as well.
AVIF (AV1) has been introduced in 2019 and is a fairly new format by that. The algorithm for Compromisation is even better than WEBP one. The format has the same advantages as WEBP but is also sadly not that well versed online.
The shown picture is a non-compressed screenshot, and while it loads faster than the above images it still uses a lot of data volume. The non compromised pictures use over 1MB (even though screenshots are normally smaller) The loading time is long and the amount of cache necessary is huge.
Throughout the WWW you can find several free online tools, that will help you change a picture files properties and size.
Compressing the above images reduces them to about 30% of their size. The picture still looks the same for the raw eye but uses significantly less datavolume.
By caching static resources, we reduce redundant data transfers, saving energy and improving website load performance. Which means once again that the amount of CO2-emission produced by the website will be lower. There are several ways to cache when developing a website. Caching can be done severside
This page uses the Cache-Control header to cache resources
for 1 day (86400 seconds).
Check the Network tab in your browser's Developer Tools to see if resources are being served from cache.
Server caching is a great way to reduce a pages loading time as well as scalability. Before even processing a page request in full, the server cache is being checked for stored data. If data can be found it will be send to the browers directly, due to that the server can handle more traffic more quickly.
Site-caching stores website data the first time it is being loaded and is fully done on the clients side and controlled. Only the caching time is done by the owner. It is especially great for non-changing static pages. Due to that it is a great way of caching for high-frequented pages and dynamic pages.