Build highly performant web sites like google/Netflix

Lazy Loading — assets

<img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
<img data-src="image.jpg" class="lazyload" /> <iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/"> </iframe>

Responsive Images

<!-- Density based --> <img srcset=" /wp-content/uploads/flamingo4x.jpg 4x, /wp-content/uploads/flamingo3x.jpg 3x, /wp-content/uploads/flamingo2x.jpg 2x, /wp-content/uploads/flamingo1x.jpg 1x " src="/wp-content/uploads/flamingo-fallback.jpg" > <!-- Width based --> <img srcset=" /wp-content/uploads/flamingo4x.jpg 4025w, /wp-content/uploads/flamingo3x.jpg 3019w, /wp-content/uploads/flamingo2x.jpg 2013w, /wp-content/uploads/flamingo1x.jpg 1006w" src="/wp-content/uploads/flamingo-fallback.jpg" >

Image Compression with MozJPEG/OptiPNG

Defer / Async script tag

<script defer src='...'> <script async src='...' >

Trick the JS engine

Web Fonts swap

@font-fact { ...... font-display: swap; }

Http2 (H2) Server Push

Preempt Loading Assets

<link rel="dns-prefetch" href="//example.com"> <link rel="preconnect" href="https://css-tricks.com"> <link rel="prefetch" href="image.png"> <link rel="subresource" href="styles.css"> <link rel="prerender" href="https://css-tricks.com"> <link rel="preload" href="image.png">

Brotli vs GZip compression

Adaptive Loading

import React from 'react'; import { useNetworkStatus } from 'react-adaptive-hooks/network'; const MyComponent = () => { const { effectiveConnectionType } = useNetworkStatus(); let media; switch(effectiveConnectionType) { case 'slow-2g': media = <img src='...' alt='low resolution' />; break; case '2g': media = <img src='...' alt='medium resolution' />; break; case '3g': media = <img src='...' alt='high resolution' />; break; case '4g': media = <video muted controls>...</video>; break; default: media = <video muted controls>...</video>; break; } return <div>{media}</div>; };

PRPL Pattern

<link rel="preload" as="style" href="css/style.css">

TLDR;

  • Google Chrome Lighthouse
  • GTMetrix
  • PageSpeedInsights

--

--

--

Love writing, learning, sharing and love being sarcastic :)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building a Poly browser using Sceneform

An Alternative Approach To Quickly Develop Real-Time Application

Become a Redux expert.

CS373 Spring 2021: Brian Wang, Blog #4

How to Organize React Files Before It’s Messed Up

//platform.twitter.com/widgets.js from Twitter https://twitter.com/techandgeek

How to Create Public And Private Routes using React Router

How to Create React Component Library and Publish to Private GitHub Package Repository

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
M Adnan A

M Adnan A

Love writing, learning, sharing and love being sarcastic :)

More from Medium

Creating web apps: the tale of a millennial JS developper

FRONT END DEVELOPMENT

Get the First, Last and Middle Elements of an Array using JavaScript

Building Custom Data Visualizations With Datadog UI Apps