Web Performance Basics (Overview, Code Optimization, Caching, Images, CDN)

Always keep performance in mind during development.

How Browser Render Content:

The PRPL pattern — is used to build scalable, fast modern web apps with great user experience.

Photo by Austin Distel on Unsplash

Code Optimization

How do you generally improve performance?

JavaScript Optimization

Ideal JavaScript Loading

JavaScript loading: Best Practices

Difference between <script>, <script async> and <script defer>.

<script>

<script async>

<script defer>

Minifying and uglifying JavaScript

Lazy-loading JavaScript modules with import()

What is JavaScript Webpack?

A static module bundler for the front-end development of JS applications -> bundle your styles (bundle your JavaScript files together) — It takes all the code from your application and makes it usable in a web browser.

Webpack Examples

Similar bundling vs modules: Snowpack, Parcel, Rollup

Dynamic Programming (Caching — Storing Assets)

Server-side Caching

Browser Caching

Automatic Browser Caching

CDN caching

Extend the caching strategy provided by your host and CDN.

A CDN is a content delivery network connected to your hosting server.

As an example, Cloudflare, a popular CDN can be configured to automatically generate and save WebP versions of all images on your site, and then serve them to browsers supporting that image format.

Optimizing Delivery

Compress data with Gzip and Brotli (Brotli takes longer than Gzip)

Link: preload, preconnect, prefetch, prerender

Preloading vs prefetch

Bottlenecks

By far the biggest bottleneck for any modern site or service is the IMAGES

Improve image performance:

Image format options

Automated Image Optimization

from HTML to CSS to JavaScript, and images and everything else can and should be compressed and optimized as much as possible to make the physical data transfer as small as possible.

HTTP/2 and Multiplexing

HTTP/1.1: Synchronous loading (slow), need to be parallel connections to the server to pull down the server => Head of line blocking, where the first file, the HTML file, holds back the rest of the files from downloading.

It also puts enormous strain on the internet connection and the infrastructure, both the browser and the server, because you’re now operating with six connections instead of one single connection.

HTTP/2, we have what’s known as multiplexing. The browser can download many separate files at the same time over one connection, and each download is independent of the others. That means with HTTP/2, the browser can start downloading a new asset as soon as it’s encountered, and the whole process happens significantly faster.

--

--

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
Hanwen Zhang

Full-Stack Software Engineer at a Healthcare Tech Company | Document My Coding Journey | Improve My Knowledge | Share Coding Concepts in a Simple Way