Speed Essentials
Mark Kevin Baldemor edited this page Nov 13, 2018
·
2 revisions
<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"><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"- Never lazy load resource
@font-face {
....
font-display: swap;
}navigator.connection.saveData; // true
navigator.connection.effectiveType; // 4g