Website - Decrease page load time by properly optimizing images
Summary
This issue only observes the root page of e.foundation. However, the general cause of this issue can be transferred to all subpages of the web presence.
The total page size should be kept as low as possible to decrease page load time and minimize the impact on a visitors data connection. Images take up a significant part of the total page size and therefore should be optimized. This is one of the easiest measures to improve page load time with one of the highest cost-benefit ratios. Page load time is also an important ranking factor in terms of SEO, directly affects visitor counts and conversions.
This improvement concerns
-
UI -
Behavior -
Privacy
Description
The homepage at e.foundation has a size of about 2.2 MB. When checking the resources with the DevTools of my browser, images make up about 0,9 MB which is roughly 40 % of the transfered data in total.
To decrease this percentage, the following principles should be applied to the uploaded images:
- Do not include whitespace for padding. If padding is wanted for an image, it should be done by applying style rules (home-main-phone.png
- If an image is not fully displayed (for example because the containing element is smaller than the image itself), an adjusted version of the image should be uploaded and used instead. If the image is resized/cut off, the full resource is still loaded in the background (See section "Evaluate the privacy of your apps").
- Images should be compressed before they are used in web. For instance, a lossless compression of evaluate-the-privacy.png can save 240KB without having an effect on image quality at all.
Another thing that should be considered, is serving next-gen image formats like WebP to browsers which already support it. It's not natively supported by Wordpress yet but still can be easily integrated though. Please read https://developers.google.com/speed/webp for an detailed explanation of the benefits of WebP.
What is the improved behavior? Mentioned principles above are implemented for the whole web presence at e.foundation.
What does it bring? Decrease page size and therefore decrease page load time.