preface

Well, I wrote a live chat demo with a front-end VUE and a back-end KOA. The access link is here

As a restless young man, I always wanted my visitors to feel comfortable and at home. So I used the Lighthouse tool in Chrome DevTool to analyze every aspect of the site (performance, accessibility, SEO, etc.) and made a wave of performance optimizations along the way.

Before optimization

We can see that performance didn’t even reach the pass mark of 60.

Take a look at the metrics data:

  • First Contentful Paint (FCP) measures the time it takes for any part of the page content to appear on screen (including background images) from the start of the page, in 4.3s
  • Speed index (SI), which measures the visible filling speed of web content, 5.6s
  • Largest Contentful Paint (LCP) measures the rendering time of the largest image or text block visible in the viewport, up to 13.4 seconds
  • Time to Interactive (TTI), which measures the time it takes from the start of a page to the load of its primary subresources and to reliably and quickly respond to user input.
  • Total Blocking time (TBT), which measures the total time between the first content drawing (FCP) and interactionable time (TTI), which may be blocked by the main thread so that it cannot respond to the user in a timely manner
  • Cumulative Layout Shift (CLS), which is a measure of the maximum layout offset score for each unexpected layout offset that occurs over the life of a page. The smaller the value, the better.

In the optimization

The performance optimization

1. Optimize the loading time of the first screen

The disadvantages of SPA are slow first screen and SEO. The usual solution is to change the server to render SSR, but it is really a bit troublesome.

It can obviously solve the first screen blank or SEO issues. However, it also introduces many problems. First, it requires engineers to master both front and back end knowledge. Second, consider memory leaks, running speed, concurrency stress and other issues in the node.js server environment. Node layer services can be described as “fragile”. Third, the development cost increases, research and development cycle becomes longer and so on. In general, it is the pressure to have a strong and stable infrastructure to support the server side.

For small projects, a few prerender-spa-plugin will do just fine. The prerender-spa-plugin will pre-render the pages that we want to route. Enabling puppeteer (Google’s official headless browser) to access a specified page routes to the corresponding HTML, and users respond directly to the HTML when accessing these pages.

// vue.config.js const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; module.exports = { ... configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/login '], the renderer / / this item only apply colours to a drawing the login page: new renderer ({inject: {}, renderAfterDocumentEvent: 'render - event, args: ['--no-sandbox', '--disable-setuid-sandbox'] // Run without sandbox. consider configuring sandbox. // https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md }) }) ] } ... }Copy the code

After build, we will find a login/index.html page in the dist folder, which is the pre-rendered page.

My project currently requires login, so only pre-rendering of the login page is meaningful, so I only pre-rendered the login page. Later I will reconstruct my website so that I can access it without login. This time I use prerender-spa-plugin just to accumulate experience for the future. You can render static pages according to your needs.

2. Optimize maximum content rendering time

The background image of the login page is actually 1.56MB. I found this image on the Internet and directly used the image URL on the Internet. First download it, compress it from 1.56MB to 195.44KB and save it to the server.

3. Enable gzip compression on nginx

Compress to the end, HTML/JS/CSS and other resources under compression.

// nginx.conf #gzip enable gzip on; gzip_buffers 4 16k; gzip_comp_level 3; gzip_vary on; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss application/javascript;Copy the code

4. Use http2

The advantages of HTTP2 are as follows: multiplexing, header compression, binary framing, etc. Http2 needs to be used under HTTPS, which I have already upgraded to, just one line of nginx configuration.

// nginx.conf
listen 443 ssl http2 default_server;
Copy the code

SEO optimization

1. Add Meta Description

Lighthouse prompts that Document does not have a meta description

The element provides a summary of a page’s content that search engines include in search results. A high-quality, unique meta description makes your page appear more relevant and can increase your search traffic.

To put it simply, adding a meta to your site description can make your page searchable. I’m just scribbling here.

<meta name="description" content=" Vue,koa,socket. IO ">Copy the code

The optimized

I’m satisfied.

conclusion

We’ve seen front-end performance optimization in a number of interview questions, but it’s as simple as it gets on paper, and as simple as it gets in practice, thanks to Lighthouse, Google Chrome’s powerful tool for evaluating performance. It allows us to make improvements as we go, but it’s just an indicator. To explore.

The last

Thank you very much. I wish you all good health and good food

vue-chat

koa-chat

“Reference”

Improve the single-page app experience with prerender-spa-plugin

Nginx enables Gzip compression

An error occurs during Linux installation or command execution