Skip to content

Speed Essentials

Jump to bottom Edit New page
Mark Kevin Baldemor edited this page Nov 13, 2018 · 2 revisions

1. Avoid using GIF, Use Video instead

<video autoplay look muted playsinline>
     <source src="dog.mp4" type="videp/mp4" />
</video>

2. AV1 - Video format

  • 45-50% better than x264(MPEG64) (NEW)

3. Make use of WEBP

<picture>
	<source type="image/webp" srcset="flower.webp" />
	<source type="image/jpeg" srcset="flower.jpg" />
	<img src="flower.jpg" />
</picture>

4. Serve Multiple Sizes

<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)

Tools

<head>
	<script src="lazysizes.min.js" async></script>
</head>
<body>
	<img data-src="flower.jpg" class="lazyload">
</body>

Native Lazy Loading

  • lazyload="auto"
    • Browser decides whether to lazy load resource
  • lazyload="on"
    • Always lazy load resource
  • lazyload="off"
    • Never lazy load resource

6. Fonts

Display text immediately

@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
Add a custom footer
Add a custom sidebar

Clone this wiki locally