内容简介：As you can see, it is clearly evident that you need to make sure your pages load quickly as possible even on the poorest of network connections. Easier said than done.To help you achieve this ultimate goal — here’s my list of recommended tools for performa
8 Performance Analysis Tools for Front-End Development
Recommended tools to test and analyze your frontend code performance.
Jul 23 ·7min read
You can have the most beautiful and engaging website in the world, if it does not load quickly on the browser, people would tend to skip it. Although there are many performance rules out there, at the end of the day, it all comes down to load time.
According to Jakob Nielson , here are things you should remember when building your website.
- Under 100 milliseconds is perceived as instantaneous.
- A 100ms to 300ms delay is perceptible.
- One second is about the limit for the user’s flow of thought to stay uninterrupted. They will sense the delay, but they can manage.
- 4 7% of consumers expect a web page to load in two seconds or less
- 40% of consumers will wait no more than three seconds for a web page to render before abandoning the site.
- 10 seconds is around the limit for keeping the user’s attention. Most users would leave your site after 10 seconds.
As you can see, it is clearly evident that you need to make sure your pages load quickly as possible even on the poorest of network connections. Easier said than done.
To help you achieve this ultimate goal — here’s my list of recommended tools for performance analyst.
Don’t forget to share and reuse your JS components to keep the right balance between high-quality & performant code (that takes time to produce) and reasonable delivery times. You can use popular tools like Bit ( Github ), to publish components (vanilla JS, TS, React, Vue, etc.) from any project to Bit’s component hub , without losing too much time over it.
1. PageSpeed Insights
This is a free service that analyzes the content of a web page, and then generates suggestions to make that page faster. It provides you with key metrics such as First Contentful Paint, Total Blocking Time and much more. The metrics are categorized as Field Data, Origin Summary, Lab Data, Opportunities, Diagnostics and Passed Audits. It also provides you with suggestions for further improvements.
PageSpeed works entirely on performance and uses a mix of lab and real-world data to build a comprehensive report on the speed of a website. Below is the PageSpeed Insight result for my portfolio website . As you can see, there is not enough real-world speed data for the summary.
Pasting individual URLs isn’t feasible at the enterprise level. This problem can be solved by running Automated Google PageSpeed Tests with PageSpeedPlus. It scans the complete site for you every week and provides the results in a user-friendly report. You can also check the PageSpeed API here .
2. Lighthouse
Lighthouse is an automated open-source tool that helps analyze various perspectives of a web page like Performance but also further items like SEO, Accessibility, Best Practices and whether the site meets the requirement of a PWA.
You can simply run this tool in Chrome developer tools, from the command line or even as a Node module. All you have to do is to provide a URL and Lighthouse runs a series of audits and tells you how the site performed. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
Another great use of Lighthouse is integrating the API into your own systems to run the audits programmatically. For example, if you wanted to prevent releases that don’t meet SEO and Performance standards, you could use the Lighthouse to run the tests on demand.
3. WebPageTest
This is a free tool that allows you to test your website speed using browsers such as Chrome with real user connection speeds. You have options such as Advanced Testing, Simple Testing, Visual Comparison and Traceroute. You have a lot of options such as multi-step transactions, video capture, content blocking and much more. Your final results will produce rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks with suggestions for improvements.
Web page test also provides the page statistics on the first view and repeated view along with the details of server responses.
4. Pingdom
Pingdom is another powerful analysis service that provides you with tons of functionality. It provides a comprehensive summary of server responses of the page requests, page load time, size and the request analysis. You are able to analyze your site from locations all over the world. You are provided with suggestions to improve your page score as well.
My favourite feature is the filtered summary where you are given summaries about the website content and requests. I found this very helpful to get an overall idea of the content being served on my web page.
5. SiteSpeed
SiteSpeed is an open-source set of tools that allow you to monitor and measure the performance of your web site. You can get started with a docker image or by installing the NPM package. As there are several tools being provided, you should be able to choose a tool that suits you best. You can find out more about the tools on the official website .
Although SiteSpeed is free, it will cost you to set up the servers and keep them running. If you do not own servers, SiteSpeed recommends you to get a Digital Ocean optimized droplets with 2 vCPUs or on AWS c5.large, storing the data at S3.
6. Calibre
Calibre is an all in one performance monitoring suite that helps you monitor and audit your website’s performance. It also allows you to simulate real-world conditions by specifying test server locations, managing ad preferences of the simulation and even mimicking mobile devices. It also allows you to set budgets and helps you stay within them by providing you with performance regressions.
It also comes with much more features that cannot be explained in this short article. I highly suggest you check out their website .
7. SpeedCurve
SpeedCurve captures real user data and reflects on the actual client’s experience of our website. It also allows you to compare your site with your competitors by providing a benchmark feature. This would allow you to keep ahead of the competition at all times. You are also able to generate filmstrip of the actual loading progress of your site.
SpeedCurve also provides you with Synthetic monitoring. Synthetic monitoring is a simulation of your website in a controlled environment. You are able to customize options like the speed of the network, the device, the operating system and much more.
8. SpeedTracker
SpeedTracker is a tool that runs on top of WebPageTest and makes regular performance tests on your website and shows a visualisation of how the various performance metrics evolve over time. This allows you to assess your website continuously and to see how your new features impact the performance on your website. You can also define budgets and get alerts via email and Slack.
This tool is being used by big names such as BBC, University of Connecticut and Red Bull TV.
You can do quite a lot with the help of the above tools, but to make your website up to the standard, you might need to take things a step up. I found this awesome article by Vitaly Friedman that literally covered the A-Z on website optimization on the front-end. I highly suggest you have a look.
Happy Coding!!
以上所述就是小编给大家介绍的《8 Performance Analysis Tools for Front-End Development》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
大数据架构商业之路
黄申 / 机械工业出版社 / 2016-5-1 / 69.00元
目前大数据技术已经日趋成熟，但是业界发现与大数据相关的产品设计和研发仍然非常困难，技术、产品和商业的结合度还远远不够。这主要是因为大数据涉及范围广、技术含量高、更新换代快，门槛也比其他大多数IT行业更高。人们要么使用昂贵的商业解决方案，要么花费巨大的精力摸索。本书通过一个虚拟的互联网O2O创业故事，来逐步展开介绍创业各个阶段可能遇到的大数据课题、业务需求，以及相对应的技术方案，甚至是实践解析；让读......一起来看看 《大数据架构商业之路》 这本书的介绍吧!
