This content originally appeared on Bits and Pieces - Medium and was authored by Alicia Jones
Recommended tools to test and analyze your frontend code performance.
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.
- 47% 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.
Read more about these statistics over here and here.
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.
GitHub - teambit/bit: A tool for component-driven application development.
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.
Front-End Performance Checklist 2020 [PDF, Apple Pages, MS Word] - Smashing Magazine
Happy Coding!!
Tip: Build & share independent JS components with Bit
Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends & microservices, or simply share components between applications.
Bit: The platform for the modular web
Related Stories
- 14 JavaScript Code Optimization Tips for Front-End Developers
- 10 Top Visual Studio Code Extensions in 2020
- How to Publish React Components
Resources
PageSpeedPlus
Techbeacon
Dzone
Blog article by Jacob Tan
8 Performance Analysis Tools for Front-End Development was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Alicia Jones
Alicia Jones | Sciencx (2021-08-17T14:10:23+00:00) 8 Performance Analysis Tools for Front-End Development. Retrieved from https://www.scien.cx/2021/08/17/8-performance-analysis-tools-for-front-end-development/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.