Original my blog: support original it 😄 nuxt page access speed optimization

Today on the Internet to query how to improve the site visit rate, see one of the page access speed also accounts for a large proportion, so to see how their site open speed, then open chrome browser -> clear cache -> Open Google Debugging tools -> open the web.

A little slow!!

Open Google Debug tools to see exactly what’s loading slowly!

Clearing the cache every time is too much trouble! You can use Chrome’s Traceless mode to reload every time!

The front-end optimization

The first is dealing with things that load slowly! But nuxT packaging, js most of the time is changed, can not see what JS, click on the load of resources, according to the code is probably guess what things!

Moment, I don’t know why this thing is so slow, it’s not that big, my code has its own formatting tool, so I remove this JS.

The second element is element-ui. Since we selected element-ui when we created the project, the template code created by default uses global loading, which loads the unused stuff, so we changed it to load on demand.

Install the babel-plugin-Component first

yarn add babel-plugin-component 
Copy the code

Then changenuxt.config.jsRemove the elder-UI CSS and the babel-plugin-Component loads on demandModify build, add

babel: {
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
Copy the code

Then modify the plugins/element-ui.js before the modification

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })

Copy the code

The modified

import Vue from 'vue'
import {
    Card,
    Message,
    Image,
    Dialog,
    Tag,
    Icon,
    Row,
    Col,
    Timeline,
    TimelineItem,
    Divider,
    InfiniteScroll
}
from 'element-ui'

import locale from 'element-ui/lib/locale/lang/en'


const components = [
    Card,
    Message,
    Image,
    Dialog,
    Tag,
    Icon,
    Row,
    Col,
    Timeline,
    TimelineItem,
    Divider
]

const Element = {
    install(Vue) {
        components.forEach(component => {
            Vue.component(component.name,component)
        })
    }
}
Vue.use(InfiniteScroll)
Vue.use(Element, { locale })
Copy the code

The two after the optimization, on a visit, found the speed is better, but still not very soon, then look at the request of time, detection element, the UI icon library loading slowly, wasted my 1.2 s, currently used in the project and not many, just one or two places, then remove the icon, the image directly, and explore the use of SVG in the future.

When you remove this, you get a big increase in speed. That’s about as far as front-end optimization goes, since the project isn’t very complex.

The back-end optimization

Configure a resource compression for Nginx:

# Configure compression acceleration page to open gzip on; Gzip_min_length 2k; # set the minimum bytes of gzip_buffers allowed for page compression. Gzip_http_version 1.1 = 4 times the size of 16K; Gzip_comp_level 2; Gzip_types text/plain Application/X-javascript text/ CSS Application/XML image/ JPEG image/ GIF image/png; Gzip_disable msie6;Copy the code

Test the

curl -I -H "Accept-Encoding: gzip, deflate" "https://oitboy.com"
Copy the code

If red is displayed, the configuration takes effect.

Ps: Google PageSpeed Insights is a great free tool for testing websites

There are mobile terminal and PC terminal detection

The areas that need to be optimized are listed below