How to make my first screen load 5.8x faster and reduce the size by 56% ?

5 min readMar 5, 2022

Summary content

Background of the project
Resource volume after packaging
Above the fold page loading speed
Compression: Image\CSS\JS\Fonts\Html
Tree Shaking
splitChunks
dns-fetch
CDN Acceleration

After more than a week of hard work, I reduced the packaged resources of the project by 57%, and the loading speed of the home page increased by 5.8x. The comparison data is given below for easy viewing. Then I will share my optimization method with you. I hope to provide some help to backdoor students.

Background of the project

The app is implemented by unity + embedded h5, App supports two kernels IE and Chrome. In order to facilitate data statistics, I directly use Chrome’s kernel mode to test the Finish and DOMContentLoaded data of the Chrome Network panel. IE kernel-mode For the early version of the H5 project, IE will crash from time to time, so it can only be counted by code.

Performance optimization results

First-page loading speed

Image Processing

Since the compression ratio of Webpack for image processing is not high, I use the image compression tool tinypng which has been with me for many years to compress

CSS processing

Extract the CSS file, the filename naming format adopts contenthash and uses CDN

There is a problem with chunkhash, that is, the CSS associated with js, as long as the js changes, the hash value of the packaged cs will also change, so we change it to contenthash

Compress CSS: css-minimizer-webpack-plugin

optimization: {minimizer: [new CssMinimizerPlugin()],}

JS Processing

Tree Shaking

math.js

//src/utils/math.jsexport function square(x) {  return x * x;}export function cube(x) {  return x * x * x;}

main.js

//src/main.jsimport { cube } from "@/utils/math";console.log("cube:", cube(5));

Change setting

mode is set to development (reason: for the convenience of viewing the packaged results)

2. Added usedExports

Result after packaging: unused code, marked

By setting the mode to production, tree shaking is already supported by default, so there is no need to configure it anymore

2. View packaged results

Compression: terser-webpack-plugin

...
optimization: {  ...
  minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],},

Fonts

Delete obsolete resources
Remove duplicate icons

Html

Just change the mode to production, the webpack5 built-in plugin compresses the HTML, so no need to do anything

Analyze packaged resources

Before performing CDN acceleration, we need to install webpack-bundle-analyzer, to intuitively share what the package we typed is occupying us resource volume

{  plugins:  [    ...    new BundleAnalyzerPlugin()  ]}

After packaging again, local service is automatically started, as follows:

Change element-ui\vue\vue-router\vuex, etc. to CDN form, package it again to see the bundle analyzer, and find that these modules are not displayed. (Hint: We can continue to optimize this graph)

Next, the extracted library is automatically injected into the template HTML file during the packaging process. For this, I wrote a separate plugin html-dynamic-injection (hint: I will write this plugin as a separate library later and publish it to npm)

CDN

Add configuration according to html-dynamic-injection, Automatically inject CDN configuration, style configuration, dns-fetch configuration, the format is as follows

Parameter Rules

Add configuration (hint: the following is only a partial configuration for demonstration)

Introduce plugin + use

Result after Packing

Supplementary note: It is important to inject resources into HTML

1. link configuration to head: fast DNS resolution domain name resolution

2. The style is configured to the head: load the style in advance to avoid the page showing the disordered style

3. Script introduces modules. The introduction location, defer, importance, async, pre-fetch, and pre-load will affect the loading order and speed. It is recommended to go directly to [MDN Web docs](https://developer.mozilla.org/zh -CN/docs/Web) carefully understand these parameters to deal with future website performance optimization

1. For example vue needs to be loaded first, so we put it in the head

2. For example element-ui is not displayed on the home page immediately, so we put it in the body

Specific demo: Portal

Summarize

Don’t stop, follow the industry: if the project is necessary and find the right time, update the project environment in time (for example webpack5 has built-in many plugins, code splitting, obfuscation, etc., all have default configurations, no Special requirements can not be configured)
If there is a requirement for CDN stability, it is best to use the company’s own CDN instead of a public CDN (reason: public CDNs are fast and slow, and are quite unstable)

Remaining problem

element-ui : Automatically injecting CSS into HTML is the same as manually introducing CSS into the HTML template. The imported content is exactly the same, but the result is that the manually introduced can be successfully loaded, but the automatic injection is not loaded. The specific principle has not been found. If you know the reason, please tell me, thanks

Thank you for reading so far, if you have any ideas, please leave me a message~

Above: If you find any problems, please leave a message and point it out, and I will correct it in time

# References