C M Pandey original, authorized translation by New Frontend.

In this post, I will share how I got my portfolio website to load in 0.8 seconds.

1. Don’t use too large a DOM tree

My portfolio site contains 487 DOM elements, and the DOM tree is 13 deep, with a maximum of 20 child elements per layer.

A DOM tree that is too large will slow down the page:

  • memory

    Application in excessive DOM tree query selector (such as document. QuerySelectorAll (‘ li ‘)) will save more than one node reference, this could take up a lot of memory.

  • Network efficiency and loading speed

    A large DOM tree with many nodes (some of which are not visible at first load) can slow down the load and consume the user’s network traffic.

  • Runtime performance when a user or script interacts with a web page

    The browser needs to recalculate node positions and styles, so rendering is slow when the DOM tree is too large. If the style rules are complex, rendering performance worsens.

2. Don’t use heavy network loads

The payload of my portfolio website is only 764 KB.

The network load size of your site should be less than 1600 KB. To do this, you can do the following:

  • Deferred requests, loaded on demand.
  • Minify and compress network loads.
  • Set the compression level for JPEG images to 85.

Never forget that more network load brings more traffic costs.

3. Don’t use GIFs

PNG or WebP for still images. Consider using MPEG4 or WebM video format for animation content. GIF image storage efficiency is low and display effect is poor.

You might say you need:

  • Automatically play
  • Loop for
  • Played quietly

HTML5’s video tag does exactly that:

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>
Copy the code

4. Preload key requests

Assuming that the page is loading a JS file that itself gets another JS file and a CSS file, the page will not display fully until these resources are downloaded, parsed, and executed.

If the browser could initiate these requests earlier, it would save a lot of time. Fortunately, preloaded links can do this.

<link rel="preload" href="style.css" as="style">
Copy the code

5. Use less redirection

Redirects slow down the loading of web pages. When the browser requests a redirect resource, the server returns an HTTP response. The browser must then make another HTTP request to get the resource from the new address. These extra network roundtrips can slow the loading of resources by hundreds of milliseconds.

Instead of redirecting mobile users to the mobile version of the page, redesign the site to be responsive.

6. Pre-connect to important third-party sites

Use PreConnect to tell your browser to connect early to important third-party sites.

<link rel="preconnect" href="https://www.google.com">
Copy the code

This code establishes a connection with the site and tells the browser that you want to start the process as early as possible.

7. Use efficient image coding

A compression level of 85 for JPEG images is good enough. You can also optimize the image size in several ways:

  • Compress the image.
  • Use CDN to optimize image.
  • Avoid giFs.
  • Responsive image.
  • Load images on demand.

8. Extremely simplified JavaScript files

Extreme simplification refers to the process of removing whitespace and non-essential code to create smaller code files.

Extremely simplified JavaScript files can reduce load and save parsing time.

JavaScript Minifier is an online tool that can greatly simplify JavaScript.

9. Extremely simplified CSS files.

CSS files have more Spaces than other files. Extreme simplification will definitely save some bytes. For example, color values can be drastically reduced to equivalent shorthand forms, such as #000000 and #000.

The CSS Minifier is an online tool that simplifies the CSS.

10. Adjust the image resolution

I bet this is one of the most frequently mentioned tips for website optimization. Because the image size is generally much larger than any script file, try to avoid using images that are too high resolution.

You should never upload an image with a resolution greater than the screen render size, it makes no sense.

You can change the resolution of the image directly, or use:

  • Responsive image.
  • CDN support for image optimization.
  • SVG icon.

Photo by Aron Visuals