Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Web performance optimization skills of what the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, with a certain reference value, I believe you will have some gains after reading this Web performance optimization skills, let's take a look at it.

1. Use text compression

Using text compression, you can minimize the number of bytes transmitted over the network. There are several compression algorithms. Gzip [1] is the most popular, but Brotli [2] is a newer or better compression algorithm. If you want to check if the server supports Brotli, you can use the Brotli.pro [3] tool.

If your server does not support Brotli, you can install it according to the following simple guidelines:

Nginx on Linux [4]

Apache [5]

NodeJs-Express [6]

This is the first optimization tool you can get for free, and most hosting platforms or CDN provide compression by default.

two。 Image compression

Uncompressed images are potentially huge performance bottlenecks. If the image is not compressed, it will consume a lot of bandwidth. There are several useful tools that can be used to compress images quickly without losing visible quality. I usually use Imagemin [7]. It supports multiple image formats, you can use [8] in the command line interface or use the npm module [9].

Imagemin img/*-out-dir=dist/images

You can use the npm module in packaged programs such as webpack, gulp or grunt.

Const imagemin = require ('imagemin'); const imageminMozjpeg = require (' imagemin-mozjpeg'); (async () = > {const files = await imagemin (['img/*.jpg'], {destination:' dist/img', plugins: [imageminMozjpeg ({quality: 60}),]}); console.log (files);}) ()

In general, files of 4MB size can be reduced to 100kB. You can view the demo code [10] in Github.

Unit file size, uncompressed file size file size reduction percentage Bytes4156855 Bytes103273 Bytes-97%MB/kB4MB103 kB-97%3. Picture format

Using modern image formats can really improve performance. WebP images are smaller than both JPEG and PNG, usually 25% smaller than 35%. WebP is widely supported by browsers [11].

We use the imagemin npm package and add the WebP plug-in to it [12]. The following code outputs the WebP version of the image to the dist folder.

Const imagemin = require ('imagemin'); const imageminWebp = require (' imagemin-webp'); (async () = > {const files = await imagemin (['img/*.jpg'], {destination:' dist/img', plugins: [imageminWebp ({quality: 50})]}); console.log (files);}) ()

Take another look at the file size:

Per file size, uncompressed file size reduction percentage Bytes4156855 Bytes58940 Bytes-98%MB/kB4MB59 kB-98%

The results show that compared with the original image, the file size is reduced by 98%, and compared with the compressed JPG file, WebP compresses the image more obviously. The WebP version is 43% smaller than the compressed JPEG version.

4. Image lazy loading

Image lazy loading is a technique for loading images that are not displayed on the screen at a later time. Loading immediately when the parser encounters an image slows down the loading of the initial page. With lazy loading, you can speed up the page loading process and load the image later. You can easily do this using lazysizes [13]. You can put the following code:

Change to:

The lazysizes library handles the rest of the work and can be validated using a browser. Open your site and find the image label. If the class changes from lazyload to lazyloaded, it means that it works properly.

5. Cache your resources: HTTP cache header

Caching is a way to quickly improve the speed of a website. It reduces the page loading time for regular users. If you have access to the server cache, it is very easy to use.

You can use the following API to cache:

Cache-Control [14]

ETag [15]

Last-Modified [16]

6. Inline critical CSS: defer non-critical CSS

CSS is blocked by rendering. This means that the browser must download and process all CSS files before drawing pixels. This process can be greatly accelerated by inlining the key CSS.

You can follow these steps:

Identify critical CSS

If you don't know what your key CSS is, you can help through Critcal [17], CriticalCSS [18], or Penthouse [19]. These libraries are used to extract CSS from HTML files visible in a given viewport.

Here is an example of using criticalCSS.

Var criticalcss = require ("criticalcss"); var request = require ('request'); var path = require (' path'); var criticalcss = require ("criticalcss"); var fs = require ('fs'); var tmpDir = require (' os'). Tmpdir (); var cssUrl = 'https://web.dev/app.css';var cssPath = path.join (tmpDir,' app.css') Request (cssUrl) .pipe (fs.createWriteStream (cssPath)). On ('close', function () {criticalcss.getRules (cssPath, function (err, output) {if (err) {throw new Error (err);} else {criticalcss.findCritical ("https://web.dev/", {rules: JSON.parse (output)}, function (err, output) {if (err) {throw new Error (err)) } else {console.log (output); / / Save it to a file for step 2}});}});}); inline key CSS

When the HTML parser encounters a style tag, it immediately processes the critical CSS.

Body {.} / *. The rest of the key CSS * / delay unimportant CSS

Non-critical CSS does not need to be dealt with immediately. The browser can load it after the onload event so that the user does not have to wait.

7. JavaScript asynchronous and delayed loading

JavaScript is blocked by the HTML parser. The browser must wait for the JavaScript execution to finish parsing the HTML. But you can tell the browser to wait for JavaScript to execute.

Load JavaScript asynchronously

Through the async property, you can tell the browser to load the script asynchronously.

Defer JavaScript

The defer attribute tells the browser to run the script after the HTML parser has finished parsing the document, but DOMContentLoaded will be triggered before the event occurs.

Adjust the location of inline scripts

The inline script is executed immediately, and the browser parses it. Therefore, you can place them at the end of the HTML, immediately before the body tag.

8. Use resource tips to speed up delivery.

Resource hint [20] can tell the browser what pages may be loaded in the future. The specification defines four primitives:

Preconnect (pre-connected)

Dns-prefetch (DNS prefetch)

Prefetch (prefetch)

Prerender (pre-render)

In addition, for resource prompts, we use the preload [21] keyword for the link attribute.

Preconnect

The following code tells the browser that you want to establish a connection to another domain. The browser will prepare for this connection. Use the pre-connect link tag to reduce the load time by 100-500 ms. So when should I use it? Put it bluntly: when you know where to get something but don't know how to get it. Things like hash style files (styles.2f2k1kd.css).

Dns-prefetch

If you want to tell the browser that you are going to establish a connection to a non-critical domain, you can pre-connect with dns-prefetch. This will save you about 20-120 milliseconds.

Prefetch

With prefetching, you can tell the browser to download the entire site as indicated in the link tag. You can prefetch pages or resources. Prefetching is very useful in speeding up the site, but be aware of situations that may slow down the site.

Problems may be encountered on low-end devices or when the network speed is slow because browsers are always busy with prefetching. You can consider using prefetching with adaptive loading, or you can use intelligent prefetching with quicklink [22] and Guess.js [23]:

Prerender

When using pre-rendering, the content is loaded first and then rendered in the background. When the user navigates to the pre-rendered content, the content is displayed immediately.

Preload

With the preloading feature, the browser will be prompted that the referenced resource is important and should be obtained as soon as possible. Modern browsers are very good at prioritizing resources, so preloading should be used only for critical resources. Consider preconnecting and prefetching instead, or try using instant.page [24].

9. Use Google Fonts

Google Fonts is very good. They provide high-quality service and are widely used. If you don't want to host your own fonts, then Google fonts are a good choice. But you should pay attention to how to achieve them. Harry Roberts [25] wrote an excellent article on how to use Google Fonts to speed up websites [26]. It is strongly recommended to read.

If you just want to know how to use it, you can integrate Google fonts through the following code snippet, but thanks to Harry.

10. Use service worker to cache your resources

Service worker is a script that the browser runs in the background. Caching is one of the most commonly used functions, and it is also the one you should use most. I don't think it's a matter of choice. Caching through service worker allows users to interact with your site faster and can access your site even if they are offline.

This is the end of the article on "what are the tips for Web performance optimization?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what are the skills of Web performance optimization". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.