✨ Storage address: fe-performance-Journey ✨

Does the front end need performance optimization?

Performance optimization has always been an important part of front-end engineering. A lot of data [1][2][3] show that performance optimization of website applications has a positive impact on improving user retention and conversion rate. It can be understood that improving the performance of your website is improving your business data (and even your business revenue).

Performance optimization includes front-end optimization and back-end optimization in a broad sense. Back-end optimization focuses more on increasing resource utilization, reducing resource costs, and improving stability. Front-end performance optimization is more directly related to the user experience than back-end performance optimization. From the perspective of user experience, the optimization reduction of loading time of front-end service 5s by 80%(1s) is greater than the optimization reduction of response optimization of back-end service 50ms by 80%(10ms). So a lot of times, experience-related performance bottlenecks are at the front end.

How to learn about front-end performance optimization?

As a front-end engineer, you all have a certain level of performance awareness and have your own Arsenal of optimisations, such as lazy loading, resource consolidation, reflow avoidance, etc. Although everyone has their own ideas on performance optimization, most of them are scattered in a few points, which is difficult to form a complete system. There are also many high-quality materials in the industry, such as Yahoo’s performance optimization 35 [4], but performance optimization as a systematic engineering, it is not easy for people to learn systematically.

There are so many steps in the process from the user visiting your website application to the user browsing information and interacting with it, and every step is a potential performance problem and an opportunity to improve our performance. Therefore, front-end performance optimization requires you to analyze the system, and even the business, from a holistic perspective.

So how can you better tease out and understand performance optimizations? Recall that every interview would be asked, “What happened between typing XXX in the address bar and the interview?” Performance tuning can also be viewed from this perspective.

From the start of the visit, the user may go through a “query cache -> send a request -> wait for a response -> page parsing -> download and process various static resources -> runtime -> preload (waiting for subsequent requests)” – our “performance optimization journey”. Web applications can encounter performance issues at each of these sites, and of course there are ways to optimize them.

So this performance Tuning tour will follow this path and introduce common performance problems and tuning techniques in each step. This helps you fully understand and master front-end performance optimization by combining it with the Web application access process.

Here’s the overall outline:

If we’re ready, we can start

The itinerary of the trip 👇

At present, all the content has been updated to ✨ fe-performance-Journey ✨ warehouse, and the content will be synchronized to the nuggets one after another. If you want to read the content as quickly as possible, you can go directly to the repository and browse the articles.

Like friends can star, will continue to update more performance optimization related content.

  • First stop – cache
  • Second stop – Send the request
  • Third stop – server processing
  • Fourth stop – Download and parse pages
  • Fifth stop – page static resources
    • JavaScript
    • CSS
    • The picture
    • The font
    • video
  • Sixth stop – Run-time
  • Stop 7 – Preload
  • The end of the
  • TODO:
    • Performance indicators
    • Performance monitoring

The resources

  1. Driving user growth with performance improvements
  2. How Fast Should A Website Load in 2019?
  3. How long will you wait for a shopping website to load?
  4. Best Practices for Speeding Up Your Web Site (Yahoo)
  5. 17 Things People Absolutely Hate About Your Website
  6. Why Performance Matters