Performance optimization

Such a term should be already a cliche, not only in the interview the interviewer will be and you break off the head, and leadership will be at work because web page loading speed is slow to knock your learning (call) acquisition (work), the front-end performance optimization, if need to do, if you need to do and what to do or how to find the optimal point?

Let’s explore front-end performance optimization

How to quantify whether a website needs to do performance optimization?

First of all, in the era of tool fragmentation, all kinds of tools are flying everywhere. How to find a convenient tool that can directly hit the pain point is the most important and primary task.

The following uses Chrome’s own plug-in tool for analysis

You can use the Built-in Chrome lightHouse tool for analysis. The scores are listed in three grades. And then optimize it according to different suggestions.

For example: Open up the Gold mining page and click on the Lighthouse plug-in in the developer tools

We can see several indicators:

  • First Contentful Paint First screen load time (FCP)
  • Time to interactive (TTI)Measures how long it takes for a page to fully interact
  • Speed Index Speed at which content is obviously filled (SI)The lower the score, the better
  • Total Blocking Time (TBT)Total Blocking Time (TBT) is the amount of Time that Long Tasks (all Tasks over 50ms) block the main thread and affect page availability. For example, if an asynchronous Task is too Long, it will block the main thread rendering. This is where you have to deal with that part of the task
  • Largest Contentful Paint Maximum visual element loading time (LCP)For SEO the most important indicator, if the user opens the page for a long time can not see the full page, then SEO will be very low. (For Google)
  • Cumulative Layout Shift Cumulative Layout ShiftEg: This index is higher when the image is of uncertain width and height. For example, asynchronous or DOM dynamic loading on existing content will also cause CLS to increase

The above six indicators can be a good measure of the performance of our website. Draw conclusions like the following and take action.

The picture below is a chart from analyzing your own project

  • Such as package volume (Webpack optimization, tree-sharking and on-demand plug-ins, and CSS consolidation)
  • Image load size optimization (using compressible images with lazy loading and preloading)
  • Http1.0 can be replaced with HTTP2.0 using binary headers and multiplexing. (Http1.0 was used for some images using CDN requests)
  • Images without width and heigth(or no parent container limit) can be messy when the page is redrawn and rearranged
  • Avoid heavy network load, such as image simultaneous requests and reduce the number of simultaneous requests
  • Static resource caching
  • Reduce unused JavaScript and defer loading scripts (defer and Async)

A thousand times, it is better to act once. Dev your project! Then compare to take, the effect is better!

How to optimize performance

Vue-cli has made the following optimizations:

  • With cache-loader, Vue/Babel/TypeScript compilation is enabled by default, and files are cached in node_modules/. Cache
  • Images smaller than 4K will be converted to Base64 and stored in JS files
  • The production environment extracts CSS into separate files
  • Extract common code
  • Code compression
  • Preload all js and CSS files

Optimization we need to do :(the optimization made below is based on analysis tools and refined according to their own projects)

  1. First, at the code level:

    1. Multi-image pages need to do image lazy loading + preloading + CDN request and compression.There will be an article on image optimization later...
    2. Components are loaded on demand
    3. For dom operations that have to be done, try to do them all at once. Avoid redrawing and rearranging pages by manipulating the DOM multiple times
    4. Extraction of common components
    5. Ajax requests can be reduced as much as possible, if ajax requests are slow, but must be requested. Then consider using itWeb Worker

  2. Package projects.

    1. Use the Webpack plugin for exampletree-sharkingRemove irrelevant dependency loading. Use terser to compress the code and add to the loader that takes longer to executecache-loader, which can be used the next time you packnode_modules/.cacheIn the
    2. Static resources are loaded by cache or CDN, and some dynamic files have cache expiration time set