When we talk about Web performance optimization, what exactly does it mean?

Consider the following scenario:

When you make a large page with several bulky plug-ins. Every time the code is packaged, it is very slow.

When you open a web page, you have to wait too long for it to come out, and it takes too long for resources to load and pages to render.

When browsing the page, the animation card will affect the user’s smooth operation experience.

Of course, there are many common scenarios, which are not shown here, so how to achieve these places, fast packaging, fast resource loading, fast page rendering, smooth experience?

Some methods are summarized here.

Packaging is fast

Use the HardSourceWebpackPlugin to take advantage of caching and reduce the second packaging time

When packing, be sure to filter the directories you don’t want to close

There are thread-loader, terser-webpack-plugin, and HappyPack plugins that use multi-process packaging. Note that when a project is small, multi-process packaging can actually slow down the packaging speed.

Fast resource loading

In terms of transfers (fewer downloads/faster)

  • Compress HTML, JS, and CSS at build time by compressing them into a file of the same format.
  • Images must take up some resources to transfer. You can compress images, or use SVG, Sprite, and font ICONS
  • Gzip can be turned on on the server and the data can be compressed again before transmission.
  • Lazy route loading for a single page reduces the volume of resources loaded for the first time
  • Components load lazily, reducing the volume of resources loaded for the first time
  • Image lazy loading, reducing the volume of the first load of resources

Improve server broadband

At the same time, an external CDN can be used to speed up transmission and reduce packaging time

Duplicate selector merge, duplicate attribute merge

DNS service optimization

When we open the search bar, DNS queries will be first, and you can pay for a better configuration of DNS.

HTTP Request Optimization

Keep-alive reuses it without breaking TCP links.

Reuse of resources

You can adopt the HTTP cache policy and put some necessary items in the cache to reduce the secondary load time

Add HTTP cache to CSS /js/img, HTML never cache

Fast page rendering

According to user habits, load CSS first and then JS

Put CSS styles in Heade and JS at the bottom of body

Lazy load, lazy component load, lazy image load.

It is recommended to load the CSS using link rather than @import

Implement the preloading of the second page

Experience smooth

Use transition and animation as much as possible, and use JS as little as possible

Use transfrom and opacity as much as possible (best performance without redrawing or backflow)

Reduce DOM add and subtract operations.