Web performance optimization is an old topic and a very important part of front-end page development. The slower the page loads, the greater the probability of user churn, and performance and interaction directly affect the user experience. The following are some recommended web performance optimization aids, hoping to be helpful to everyone.
1、Lighthouse
Lighthouse is an automated tool open sourced by Google to improve the quality of web applications. You can run it as a Chrome extension, or from the command line. When you provide Lighthouse with a URL to review, it will run a series of tests against the page and then generate a report on the page's performance. You can refer to failed tests to see what you can do to improve your application.
The Chrom extension will present the report to you in a very user-friendly graphical interface.
2、Speed Racer
SpeedRacer is a performance testing tool that runs scripts in Chrome and generates detailed performance reports.
SpeedRacer is a tool that directly uses the browser to actually test performance. In actual work, it can be used in conjunction with other tools that simulate user access traffic to evaluate performance.
3、Yellow Lab Tools
Yellow Lab Tools is a web performance and front-end quality testing tool. Unlike other tools, it has some unique features not seen on other tools, such as JavaScript interacting with the DOM on page load and other program code validation issues.
Yellow Lab Tools is biased towards a tool that finds bad practices, and will get a score based on page weight, number of requests, DOM, bad Javascript, bad CSS, etc. and shows how the DOM interacts with each other as the page loads.
4、Web Tracing Framework
The Web Tracing Framework is also a collection of libraries, tools, and visualization tools from Google for tracing and investigating complex web applications. It can help spot performance issues, track regressions, and build smooth 60fps web apps. It will allow you to spend less time testing your code.
5 、 shallow-perf budget
grunt-perfbudget is a Grunt task for evaluating performance. It uses a public or private instance of WebPagetest to test at a specific URL and compares the test results with your expected performance expectations. If it is less than expected, then the task completed successfully, if it exceeds the expected performance expectation, then it will report the failure and help you analyze the reason for exceeding the expected performance.
perfbudget: {
default: {
options: {
url: 'http://google.com',
key: 'API_KEY_HERE',
output: 'wpt-results.json'
}
}
}6 、 Sitespeed.io
Sitespeed.io is a set of open source tools based on best practices and quantitative criteria such as loading timing to help developers analyze the loading speed and rendering performance of web pages.
Sitespeed.io collects data from multiple pages of a developer's site, analyzes those pages according to rules such as best practices, and outputs the results as HTML, or as a numerical value to Graphite .
