Mahdhi Rezvi translator: Front-end xiaozhi Source: blog.bitsrc

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

We can write beautiful, attractive websites, but if the site doesn’t load quickly into the browser, people will skip it. While there are many performance rules, it all boils down to load time.

According to Jakob Nielson, there are a few things to consider when building a web site:

  • Less than 100 milliseconds is the best loading speed

  • 100ms to 300ms feels good

  • One second is about as far as the user can go without being interrupted. The user will feel the delay, but it will be acceptable

  • 47% expect web pages to load in two seconds or less

  • 40% of users will abandon a web page if it takes longer than 3 seconds to load

  • Around 10 seconds is the limit of attention. Most users will leave your site after 10 seconds

As mentioned above, even on the worst network bandwidths, you need to make sure your pages load as quickly as possible. But this is easier said than done.

To help achieve this goal, several performance analysis tools are recommended.

1. PageSpeed Insights

This is a free service that analyzes the content of a web page and then makes suggestions to make that web page faster. It provides you with key metrics such as first content draw, total blocking time and more. Metrics are classified as Field Data, Origin Summary,Lab Data,Opportunities, Diagnostics, and Passed Audits. It also provides us with suggestions for further improvement.

2. Lighthouse

Lighthouse is an open source automation tool designed to improve the quality of web applications. You can run it as a Chrome extension or from the command line. You give Lighthouse a web site to review, which runs a series of tests against the page, and then generates a report on the performance of the page.

From here, you can use failed tests as indicators to see what steps you can take to improve your application.

Note: Lighthouse is currently heavily focused on Progressive Web App (PWA) features such as “Add to Home Screen” and offline support. However, the primary goal of the project is to provide an end-to-end review of all aspects of web application quality.

You can run Lighthouse in one of two ways: as a Chrome extension, or as a command-line tool. The Chrome extension provides a more user-friendly interface for easy reading of reports. The command-line tools allow you to integrate Lighthouse into a continuous integration system.

3. WebPageTest

WebPageTest is an online free performance measurement site that runs free website speed tests from multiple locations around the world using real browsers (IE and Chrome) and real consumer connection speeds. You can run simple tests or perform advanced tests, including multi-step transactions, video capture, content blocking, and so on. A wealth of diagnostic information will be provided based on the test results, including resource loading waterfall charts, page speed optimization checks and improvement suggestions, and each item will be given a final rating.

WebpageTest mainly provides Advanced Testing, Simple Testing, Visual Comparison, Traceroute four functions, we mainly focus on Advanced Testing.

How do I use WebPageTest

  • Fill in the URL to test
  • Enter Test Location and select from the drop-down list. Mobile devices (including Android and IOS) and PCS (by region, browsers supported by each region are different) are optional.
  • Supported browsers are optional
  • Click START TEST on the right

4. Pingdom

Pingdom: Online website speed detection tool is launched by a website monitoring service company. It helps users find out the causes of website speed and provides feasible solutions to improve website performance. It is very practical for users who have websites.

My favorite feature is the parsed summary, which gives us a summary of the site’s content and requests. I’ve found this to be very helpful in understanding what’s available on the web.

5. Sitespeed.io

Sitespeed. IO is an open source Web performance testing tool that measures the overall performance of Web sites and helps developers and testers analyze the loading speed and rendering performance of Web pages.

Sitespeed. IO tests by driving browsers such as Chrome and Firefox, then collects data from multiple pages on the developer’s site, analyzes these pages according to rules such as best practices, and outputs the results as AN HTML report.

Sitespeed. IO meets the three key features required for a complete Web performance testing tool:

  1. Use a real browser to test the Web site, simulate real users to request connections, and collect important user-centered indicators, such as response speed indicators and first visual presentation
  2. It can analyze the composition of the page and give corresponding performance feedback to increase the user experience friendliness
  3. By collecting and saving data composed of pages, it is easy to track and locate

6. Calibre

Caliber is a versatile performance monitoring kit that helps you monitor and audit your website’s performance. It also allows you to simulate real-world conditions by specifying the location of the test server, managing simulated AD preferences and even simulating mobile devices. It also allows you to set your budget and help you stay within it by providing you with performance degradations.

7. SpeedCurve

SpeedCurve allows you to track the performance of your competitors as well as your own.

With SpeedCurve, you can see the speed performance of a factor on different sites. For mobile users, who expect websites to load faster on their phones than they do on their computers, they tend to close pages quickly if they feel sluggish, so responsiveness is important.

SpeedCurve also provides comprehensive monitoring. Integrated monitoring simulates your site in a controlled environment. You can customize the options, such as network speed, device, operating system, etc.

8. SpeedTracker

SpeedTracker is a tool that runs on top of WebPageTest to perform regular performance tests on your site and visually show how various performance metrics change over time. This allows you to constantly evaluate your site and see how new features affect your site’s performance. You can also define budgets and get alerts via email and Slack.

Talented people’s [three] is the biggest power of wisdom to share, if there is any mistake or suggestion in this blog, welcome talented people to leave a comment, finally, thank you for watching.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: blog. Bitsrc. IO/performance…

This article continues to update every week, you can wechat search “big move the world” the first time to read, reply [welfare] there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.