From: w3cplus

Reading to tail link: www.w3cplus.com/performance/performance-tools.html (click)

Original: https://css-tricks.com/performance-tools/

Translator: North and South (Undergraduate computer science major) I am crazy about being a writer, and I am impressed by the visual tension created by color and graphics. I like to teach various JS libraries and CSS. I hope to join a social company in the future, and I am extremely sure of the decisive position of “emotion” in social life, and determined to change the rapid iteration of social relations.

Thanks to the large number of Grunt and Gulp plug-ins, it is easy to visualize data on your site, and while it is difficult to understand these tools in depth, it is helpful to list them in categories.

Content Delivery Network (CDN)

CDN can help you distribute the resources of your site around the world, which can help improve the response time of your site, of course, which is not effective for users in specific regions.

CloudFlare

The power of CloudFlare is that it can become your DNS server (the CDN is just one component of all its services) so that all requests to your website go through it.

The design and development of CloudFlare’s CDN over the past 15 years has not always been conservative and conservative. Our proprietary technologies take full advantage of the latest technological advances, including but not limited to hardware, Web servers, and network routing. In other words, we innovatively built the next generation OF CDN. The new CDN is simple to configure, inexpensive, and promises better performance than any traditional CDN you’ve ever used.

MaxCDN

Css-tricks is currently hosting all static resources using MaxCDN. It seamlessly blends all of WordPres’s and W3’s cache resources, so we can move resources into the CDN without having to do anything special and keep the links accurate.



That’s a lot for a blog, considering the large files are mostly JavaScript, CSS and images, not videos.

Our CDN service is also a web accelerator and real-time control center. It was created so that both users and operations can get the most out of the next generation CDN.

CloudFront

Amazon Web Services (AWS) version of CDN.

Amazon CloudFront is a content delivery network service. It blends seamlessly into other Amazon Web Services offerings, providing an easy way for developers and businesses to distribute content to end users, all with low latency, high conversion speeds, and no minimum usage requirements.

CDNperf

The above CDNs don’t host any of your resources, they tend to host only the files you use most frequently. Although hosting resources and servers on a private CDN is not the best approach for online products, it is still fast and easy to distribute resources.

CDNperf helps you find the fastest and most reliable JavaScript CDNS to make your website faster and more vibrant.

The performance test

The following performance testing tools measure web site performance in a quantitative way, such as time to first Byte load times or render times. Some tools also check specifically to see if resources are cached and if multiple CSS or JS files are worth merging.

WebPagetest

WebPagetest is the gold standard for performance testing. It provides many quantitative indicators for performance testing, such as a basic score to evaluate the current level of page optimization; There is a screenshot showing what the page looks like when it loads; There is also a waterfall stream of browser loading resources…

Conduct web speed tests worldwide and provide detailed optimization suggestions based on the actual connection speeds of users’ browsers.

You can also add WebPagetest related services to the NPM module and command line tools by using API wrapper.

Webpagetest -mapper: Converts webPagetest test data into a readable document format.

WPT Bulk Tester: Test multiple URLs using Google Docs (if you have API keys, you can also do this using WebPagetest.org, or another publicly accessible instance).

Yslow

Yslow is based on Yahoo’s high performance web dogma, analyzing the performance of web pages and giving reasons for slow response.

Google PageSpeed

PageSpeed analyzes and optimizes tested web pages based on web best practices.

PageSpeed also has a COMMAND-LINE Interface (CLI) tool: PSI(PageSpeed Insights with Reporting)

During the build process, PSI can be used to test performance on both mobile and desktop, resulting in readable test results.

Where does my web spending go?

Estimate the cost of maintaining the site for each mobile user around the world.

Pingdom website speed test

Enter the URL address to test page loading speed, analyze and identify performance bottlenecks.

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.

Calibre

Calibre helps you track page load times, as well as page sizes. Question page (Janky Page)? Yes, Calibre will tell you directly which pages have problems.

GT Metrix

GT Metrix combines Google PageSpeed and YSlow to help developers create fast, efficient and fully optimized web browsing experiences.

perf.js

During development, the timing of performance is displayed on the page.

perf bar

An easy way to quickly collect and view web page performance, with preset quantization criteria and support for custom quantization criteria.

grunt-perfbudget

Grunt Task for evaluating performance. Grunt – PerfBudget uses a public or private instance of WebPagetest to test at a specific URL. It compares the test results to your expected performance expectations, and if it is less than expected, the task completes successfully, if it exceeds your expected performance expectations, it reports a failure and helps you analyze the reason for exceeding your expectations.

Sitespeed

Sitespeed. IO is an open source tool based on best practices and some quantitative criteria such as load timing to help developers analyze the load speed and rendering performance of web pages. It collects data from multiple pages from developers’ sites, analyzes these pages according to rules such as best practices, and outputs the results in HTML or in numerical form to Graphite.

speedgun

The site allows you to collect performance data for any public site using speedgun.js. It runs five times and displays a friendly graph to help the developer understand the current page loading process.

gulp size

Displays the project size.

Browser toolbox plug-in

Chrome Developer Tools

In Chrome’s developer tools, there are two very useful tabs for evaluating performance: Audits and Network.

The Audit panel is used to analyze loaded pages. It can provide optimization suggestions to reduce page load time and speed up page responsiveness.

The Network panel shows resource requests and downloads in a dynamic manner in real time. Although identifying and locating these requests takes a little more time than simply loading the page, these costs are important to guide the performance optimization of the page.

Firefox Developer Browser

The browser was created for developers and is focused on serving developers’ workflows. For the first time ever, services such as build, test, and extend will be brought together in one place.

For more information, see Network Monitor on the MDN.

Page performance

This extension works in Chrome and can quickly analyze the performance of the current page. If the browser has multiple tabs open, the plug-in automatically analyzes the performance of the current page.

review

PerfAudit

We review page loading and rendering performance. We are duty-bound to provide fast, stable, and accurate pages for objectionable slow response and problematic pages.

Perfmonkey

PerfMonkey makes it incredibly easy to track page rendering performance.

SVG and pictures

ImageOptim

ImageOptim is a free app that reduces image size and speeds up loading without sacrificing image quality. It optimizes compression parameters and removes unnecessary headers and non-essential color configurations.

It can also be integrated into Grunt and Gulp.

SVGO

SVG Optimizer is a nodejs-based SVG vector graphics optimization tool.

If you need an interactive interface instead of a CLI, you can download this APP.

SVGOMG

SVGOMG, short for SVGO’s Missing GUI, is intended to expose major problems with SVG files, without the full configurability of SVGO.

Manually optimize SVGs

Like other graphics files, SVG should be optimized before it goes live. There are many tools like Raymond that can help you do this, but the best way to do this is to understand the details and do some manual optimizations.

Triamge

Triamge is an extended platform GUI and CLI tool for optimizing image files on websites. It uses a combination of OpTIPng, PngCrush, AdvPNG, and JpegOptim, optimized for file type (PNG and JPG are already supported in the latest version).

CSS

CSS Triggers

This site is used to show which CSS properties can influence the layout, rendering, and other combinations of actions of the browser.

More information on CSS-Triggers can be viewed here.

CSS Stats

The web application presents CSS statistics in a visual form for a developer’s project.

CSS Shrink

CSS compression tool. Because CSS is the core file for page rendering, it must be kept light for quick response and rendering.

uncss

UnCSS is a tool for removing unwanted CSS from scripts. It can review multiple files as well as javascript-injected CSS.

It can also be integrated into Grunt and Gulp.

Critical path

Extract and integrate key CSS in HTML.

HTML

HTMLMinifier

HTMLMinifier is a highly configurable, well-tested, javascript-based HTML compression tool with built-in code review classes.

gulp-htmlmin

Gulp plugin for compressing HTML.

grunt-contrib-htmlmin

Grunt plug-in for compressing HTML.

JavaScript

uglifyjs

JavaScript parsers, obfuscation, compression, and beautification toolsets.

It can also be integrated into Grunt and Gulp.

You probably don’t need some jQuery plugin

JQuery and its ancillary tools are excellent projects, and they tend to make development easier and faster.

On the other hand, if you are developing a library, you need to think about whether you really need to rely on jQuery. Maybe you just need to introduce a few lines of code, instead of introducing a library to implement something. If your library is only for advanced browsers, you may be able to do this by calling the browser’s built-in functions.

Further reading

  • Usertiming API

  • Jank Free

  • Scrolling performance

  • Mobile web performance auditing

  • Gone in 60 frames per second

  • Udacity course on rendering performance

● This article is numbered 312. If you want to read this article in the future, just type 312.

● Enter m to get the article table of contents

Did this article help you? Welcome to join the front End learning Group wechat group: