After removing extra HTTP requests, it's time to reduce the size of remaining files as much as possible. Not only does this make your pages load faster but it also helps save bandwidth consumption.
Minimizing the payload size of both dynamic and static resources can reduce network latency significantly.
We will look at some practices to achieve this, such as Progressive JPEG, adaptive images, image optimization, and better use of HTML5 and CSS3.
Progressive JPEG is not new. It was considered one of the best practices. However, with the improvement of Internet speed, this feature became unnoticeable for a while. But now, with limited bandwidths on mobile devices, this practice has surfaced again.
The difference between saving a normal JPEG image as a baseline and with the progressive option is represented in the following screenshot:
In terms of size, the progressive one has its size around 10 percent more for medium images when compared with the normal...