Build highly performant web sites like google/Netflix

Lazy Loading — assets

Chrome 75+ came up with an easy way to define native lazy loading for images and iframe so you can simply do the following

<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

Lets not confuse it with bootstrap responsive classes, that’s also very good and somehow you can say idea came from there but in bootstrap responsive classes, that scale image but what I am going to talk about is showing/downloading different sizes for different device so if web page is opened in mobile browser not just 240x240 version of image is shown but also downloaded that much instead of downloading whole image but scale it and shown only 240x240 version of it. that should surely reduce and increase performance based on the browser size.

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

I know you already know that the only reason I mentioned it highlights some very effective loss-less image compression algorithms like MozJPEG, OptiPNG, trust me I tried JPEG compression on an image from 2.7MB to 1.7MB (almost) and with MozJPEG it was only 0.7MB. Google released wonderful PWA for that which you can find online called Squoosh.app

Defer / Async script tag

Try to use Defer or Async for all of your scripts, no matter its internal JS or external JS files. It’s important to know when you define JS script reference at the end of the HTML document it doesn’t make any difference as already HTML parsing is done. Let HTML be shown from the first couple of seconds on your user browser as the moment some HTML shown on the page, users get busy reading those contents instead of waiting and cursing sluggishness of the page.

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

Trick the JS engine

The default behavior of browser engine is to fetch JS file and execute it right away and whilst it executes JS file it holds HTML parsing means nothing gets painted on a browser which we wanted to avoid, Ideally we want HTML to be parsed and then JS to be fetched and executed through a Service worker. How about we trick the browser engine and define JS file as a non-JS file so browser downloads it but don’t execute it and our service worker make convert that file to regular JS file for the engine to execute it. All you have to do is define script type=’ anything but script’ once you do that browser will consider it some asset file and only fetch it instead of executing it. Register your service worker to change type=”script” and Voila!! let the engine deal with it. Keep minimal and critical JS as a script, obviously, you shouldn’t be using defer to all or async to all files or can apply trick, as a developer you need to define which JS file is critical or needing during initial load and which are not.

Web Fonts swap

There are so many cool fonts being used but there is an issue with them when they don’t load for some reason, normally popular browsers like chrome and firefox awaits around 3 secs to load font and then display the text which is quite a long delay to wait but you can define font-swap in CSS to let browser display text with default font and swap once font file is loaded, which enables user to see some text instead of empty space

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

Http2 (H2) Server Push

It’s magical but it all depends on the kind of browser you use, as different browser handles it differently. It could save a number of round trips for a browser to fetch assets (images/CSS/js etc). As the name implies its server push, so when a browser does initial request, a server can push back more relevant files which could browser need in the near future, so without server push what happens

Preempt Loading Assets

Pre-fetching is a way of hinting to the browser about resources that are definitely going to or might be used in the future, some hints apply to the current page, others to possible future pages.

<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

Brotli is another compression method which is even better than GZip compression and reduces 15% more than Gzip compression. It doesn’t mean we don’t use Gzip anymore as Brotli is better in reducing the size but Gzip is still better with dynamic content compression due to its processing speed. Brotli used on static content compression-like CSS/js but on runtime request/response Gzip is a better option due to runtime performance for compressing/decompressing which is far better than Brotli processing time.

Adaptive Loading

Not everyone has access to high-end devices and good internet and even you get good internet at one place, you may not have good signal strength on every spot you be and if you do, consider yourself the luckiest person of this era. Idea is to render the content based on network status (strength) and hardware (CPU, memory) for that you can use certain libraries like React Adaptive hooks, the example below copied from Github

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;

Better performance means less bounce rate, more retaining users, more business, more revenue. There are few techniques I described which I found very effective, always use performance tools as they are very helping, I am mentioning some below:

  • Google Chrome Lighthouse
  • GTMetrix
  • PageSpeedInsights

--

--

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

3 Followers

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