1. Avoid using GIF, Use Video instead
<video autoplay look muted playsinline>
<source src="dog.mp4" type="videp/mp4" />
</video>
- 45-50% better than x264(MPEG64) (NEW)
<picture>
<source type="image/webp" srcset="flower.webp" />
<source type="image/jpeg" srcset="flower.jpg" />
<img src="flower.jpg" />
</picture>
<img srcset="flower-small.jpg 480w, flower-large.jpg 1080w"
sizes="50vw"
src="flower-large.jpg">
5. Lazy Loading Images (Native Lazy loading will come to chrome)
<head>
<script src="lazysizes.min.js" async></script>
</head>
<body>
<img data-src="flower.jpg" class="lazyload">
</body>
-
lazyload="auto"
- Browser decides whether to lazy load resource
-
lazyload="on"
- Always lazy load resource
-
lazyload="off"
@font-face {
....
font-display: swap;
}7. Minimized Data usage for Data Saver users
Use the Network Information API
navigator.connection.saveData; // true
navigator.connection.effectiveType; // 4g