background

Took over a family project, front-end monitoring statistics show that the first screen loading is not up to standard, so there is no time to explain, let’s go

No picture, no truth

Post a few before and after comparison pictures

Before optimization

The optimized

How do you do that

CDN– The nearest kilometer to the user

Enable CDN storage and accelerated DNS preresolution

<meta http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="dns-prefetch" href="//static-a.demo.com"/>
<link rel="dns-prefetch" href="//static-b.demo.com"/>
<link rel="dns-prefetch" href="//static-c.demo.com"/>
<link rel="dns-prefetch" href="//static-d.demo.com"/>
<link rel="dns-prefetch" href="//static-e.demo.com"/>
<link rel="dns-prefetch" href="//static-f.demo.com"/>
<link rel="dns-prefetch" href="//static-g.demo.com"/>
<link rel="dns-prefetch" href="//static-h.demo.com"/>
Copy the code

Take full advantage of eight asynchronous threads

Reduce the first screenDOMThe number of

The above first

Before optimization

The optimized

Changes required to reduce the number of DOM

  • The home page has several pop-up boxes displayed according to network requests and user interaction, withv-ifreplacev-show
  • Can be usedbackground-imageDon’t use itimgThe label

Compress the images needed for the home page

  • withpandaThe compression
  • Small picture turned intobase64

Only for user interactionSDKDo asynchronous loading

Make use of Webapack’s Magic comment

handleClick () {
  import(/* webpackChunkName: 'MYSDK' */'mysdk').then(({ default: MYSDK }) = > {
    new MYSDK({})
  })
}
Copy the code

Production Environment RemovalsourceMap

subsequent

First screen loading is always better and is a technical point that can be continuously improved