Web site test Performance tool

Hey, guys, it's time to wrap up the weekend! Thanks to a large number of Grunt and Gulp plugins, we can easily visualize the data on our website, although it is difficult to understand these tools in depth, but it is also helpful to list them in categories.

Content distribution Network (CDN)

A CDN can help you distribute your site's resources around the world, helping to improve the responsiveness of your site, which, of course, has little effect for users in special areas.

CloudFlare

The power of CloudFlare is that it can be your DNS server (a CDN is just one component of all of its services), so all requests to your site will pass through it.

CloudFlare's CDN has been designed and developed over the past 15 years and has not been conservative and entrenched. Our patented technology leverages the latest technological advancements, including not limited to hardware, Web servers, and network routing. In other words, we have innovated to build the next generation of CDN. The new CDN is easy to configure and inexpensive, and its performance must be superior to any traditional CDN you use.

MaxCDN

Css-tricks is currently using MaxCDN to host all of the static resources. It seamlessly blends all of the cache resources of Wordpres and W3, so we don't have to do anything special to move resources into the CDN and ensure the accuracy of the links.

For a blog, considering that the big files are mostly JavaScript, CSS, and pictures, rather than video types, this loan takes up a lot.

Our CDN service is also a website accelerator and real-time control center. Create it so that users and operations can get the most out of the next generation of CDN.

CloudFront

Amazon Web Services (AWS) version of CDN.

Amazon CloudFront is a content distribution network service. It seamlessly integrates into other Amazon Web services offerings, providing developers and businesses with a simple way to distribute content to end users, with low latency, high conversion speeds, and no minimum usage requirements.

Cdnperf

The CDNs above do not host any of your resources, they tend to only host the most frequently used files. Although it is not the best way for online products to host resources and servers to a private CDN, this approach is still fast and easy for distributing resources.

Cdnperf can help you find the fastest and most trusted JavaScript CDNS, making your site faster and more vibrant.

Performance testing

The following performance testing tools use a quantitative approach to test the performance of the site such as the first byte load time, or the rendering time. Some tools also check to see if resources are cached and whether multiple CSS or JS files are worth merging.

Webpagetest

Webpagetest is the gold standard for performance testing, which provides a number of quantitative indicators for performance testing, such as having a basic score to evaluate the current page optimization level, one that shows the visual effects of page loading, and a waterfall stream where the browser loads resources ...

Based on the real connection speed of the user's browser, Web page speed testing is conducted worldwide and detailed optimization recommendations are provided.

By using API Wrapper, you can also add webpagetest related services to NPM modules and command-line tools.

• Webpagetest-mapper: Converts the webpagetest test data to a readable document format.
• WPT Bulk Tester: Use Google Docs to test multiple URLs (if you have API key, you can use webpagetest.org to do this or other publicly accessible instances).

Yslow

Yslow 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 test pages based on Web best practices.

Pagespeed also has a CLI (Command line Interface) tool: PSI (pagespeed Insights with reporting)

In the build process, you can use the PSI to test the performance of the mobile and desktop side, resulting in well-readable test results.

Where does my website cost?

Evaluate the maintenance costs for each mobile user's spending on the site around the world.

Pingdom website Speed test

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

Speedcurve

Speedcurve allows you to track your competitors ' performance and track your performance. When using Speedcurve, you can see how quickly a factor is performing at different sites. For mobile users, they want the site to load faster than the computer on the phone, and if they feel slow to load, they tend to close the page quickly, so the responsiveness of the site is important to them.

Calibre

Calibre can help you track page load times and page sizes. Question page (Janky page)? Yes, Calibre will tell you directly which pages are in question.

GT Metrix

The GT Metrix combines Google pagespeed and YSlow to help developers create a fast, efficient and fully optimized web browsing experience.

Perf.js

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

Perf Bar

A simple way to quickly collect and view Web page performance, provide pre-set quantitative criteria, and support custom quantization standards.

Grunt-perfbudget

The Grunt task used to evaluate 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 is completed successfully, and if you exceed your expected performance expectations, it will report a failure and will help you analyze the reasons for exceeding your expectations.

Sitespeed

Sitespeed.io is an open source tool based on best practices and some quantitative criteria for loading timing, helping developers analyze Web page loading speed and rendering performance. It collects data from multiple pages from the developer's site, analyzes the pages based on rules such as best practices, and outputs the results as HTML, or sends them to Graphite in numerical form.

Speedgun

This site allows you to use Speedgun.js to collect performance data for any public site. It runs five times and displays a friendly illustration to help developers understand the loading process of the current page.

Gulp Size

Displays the item size.

Browser tool box plugin Chrome developer tools

In Chrome's developer tools, there are two very useful tags for evaluating performance: audits and Network.

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

The Network dashboard dynamically displays requests and downloads for resources in real time. While differentiating and locating these requests can take a little more time than purely loading the page, these consumption is important to guide the performance optimization of the page.

Firefox developer Browser

The browser is created for developers and focuses on the workflow of service developers. For the first time in history, services such as building, testing, and scaling are being integrated.

For more information, see Network Monitor on MDN.

Page Performance

This extension is applied to the Chrome browser, which allows you to analyze the performance of the current page at a speed. If the browser has multiple tabs open, the plugin automatically analyzes the performance of the current page.

Review Perfaudit

We review the loading and rendering performance of the page. For objectionable response slowness and problem pages, we have an obligatory mission to provide fast, stable and accurate pages.

Perfmonkey

Perfmonkey makes the rendering performance of the tracking page incredibly simple.

SVG and Picture Imageoptim

Imageoptim is a free application that reduces image volume and increases loading speed without sacrificing image quality. It optimizes compression parameters, removes useless header information, and does not have the necessary color configuration information.

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 the APP.

Svgomg

SVGOMG is the acronym for SVGO's Missing GUI, designed to expose the main problems of SVG files without having a complete configurable svgo.

Manual optimization SVGs

Similar to other graphic files, SVG should be optimized before you go online. While there are many tools like Raymond to help you with this optimization, the best way to do this is to get a deeper understanding of the details and do some manual optimizations.

Triamge

Triamge is a platform-based GUI and CLI tool for optimizing image files on your website. It combines optipng, Pngcrush, Advpng, and Jpegoptim, and is optimized according to the file type (PNG and JPG are already supported in the latest version).

Csscss Triggers

This site is used to show which CSS properties can affect the layout, rendering, and other combined operations of the browser.

For more information about Css-triggers, click here to view.

CSS Stats

The Web app displays the statistics about CSS in the developer project in a visual manner.

CSS Shrink

CSS compression tool. Because CSS is the core file for page rendering, it must be lightweight and easy to respond to and render quickly.

Uncss

UNCSS is a tool for removing useless CSS from a script. It can review multiple files, or it can review the CSS injected by JavaScript.

It can also be integrated into Grunt and Gulp.

Critical Path

Extract and integrate the key CSS in HTML.

Htmlhtmlminifier

Htmlminifier is a highly configurable, well-tested, JavaScript-based HTML compression tool with a built-in Code review Class tool.

Gulp-htmlmin

The Gulp plugin for compressing HTML.

Grunt-contrib-htmlmin

The grunt plugin for compressing HTML.

Javascriptuglifyjs

JavaScript parser, obfuscation, compression, and beautification toolset.

It can also be integrated into Grunt and Gulp.

You may not need some jQuery plugins

JQuery and its affiliate tools are very good projects, and using them often makes development work easy and fast.

On the other hand, if you are developing a library, then you need to think about whether you really need to rely on jQuery. Perhaps you just need to introduce a few lines of code, and you can abandon the introduction of a library to implement some functionality. If your library is for advanced browsers only, then you may be able to invoke the browser's built-in functions directly to implement the relevant functions.

This article according to the @Robin rendle "performance Tools" translation, the entire translation with our own understanding and thought, if the translation is not good or there is no place also please peer friends pointing. If you want to reprint this translation, please specify the English source: https://css-tricks.com/performance-tools/.

Web site test Performance tool