Overview of front-end page optimization (4)

Through the previous articles, you should have mastered many methods to optimize your website. Now your website is loading very fast, but you must constantly monitor your website and understand its size changes. Otherwise, it may become a fat man after a while.

Today, each page has reached an average of 1.7 m, an increase of about 32% every year. You can use the following tools to check whether your website is in the form of overeating and free of charge.

1. pingdom

Pingdom is my favorite online testing tool. It will reveal the details you want to know. You can clearly see the current situation of the Website: weight, loading speed, code analysis, performance rating, developer suggestions, it also provides a historical timeline to help you view the results of your website slimming. If you only want to use one tool to complete all the checks, pingdom is no better choice.

2. Firefox Web Developer add-on

Web Developer plug-ins are Firefox's web development and debugging plug-ins. They are used in the form of toolbar to provide webpage (x) HTML, scripts, multimedia, CSS, cache, images, and other practical tools. So that we can easily obtain more information about the web page, so that we can further understand the current web page.

The Web Developer plug-in toolbar consists of the following parts: Disable, cookies, CSS, forms, images, information, miscellaneous, outline, resize, tools, View Source, and options.

3. gtmetrix

Gtmetrix uses Google's pagespeed insights and Yahoo's yslow to rate your website and provides feasible suggestions to help you improve your website performance.

After analysis, you will get a detailed test report. The website also provides a PDF report for download, which is very considerate. If you are running WordPress, there are also suggestions for WordPress optimization. As long as you register an account on the website, you can enjoy the free timed monitoring service.

4. Google pagespeed insights

Google has also developed a performance optimization tool: pagespeed insights. The purpose is to help webmasters optimize pages to achieve optimal rendering performance, especially for mobile pages.

According to data from Google Analytics, the average loading time of mobile pages is now more than 7 seconds. Although it has been greatly improved on mobile platforms, it still needs to be improved.

Pagespeed insights is easy to use. Go to the official website and enter your website URL to start analysis. It will help you enable compression (front-end page optimization raiders 1.1), use browser cache, clear JavaScript and CSS blocking on the content on the first screen, shorten server response time, optimize images, and compress JavaScript, compress HTML and so on. You will be surprised to find that it will help us solve many of the optimization solutions mentioned earlier in this series.

5. yslow

Yslow is a Firefox-based plug-in released by Yahoo. To install yslow, you must first install firebug, then download yslow, and then install it.

Yslow can analyze website pages and tell you how to optimize websites based on certain rules to improve website performance. Yslow can analyze any website and generate an overall report for each rule. If the page can be optimized, yslow will list the specific modification suggestions.

Yslow has 23 rules:

(1. Reduce the number of HTTP requests

(2. Use CDN

(3. Avoid empty SRC and href

(4. Specify expires for the file header

(5. Use gzip to compress the content

(6. Place CSS on the top.

(7. Put JS at the bottom

(8. Avoid using CSS expressions

(9. Place CSS and Js in an external file.

(10. Weigh DNS lookup times

(11. Streamline CSS and JS

(12. Avoid redirection. Avoid redirection with the Backslash "/" in the same domain. Use alias or mod_rewirte to create a cname for cross-origin requests.

(13. Delete duplicate JS and CSS

(14. Configure etags

(15. cacheable Ajax

(16. Use get to complete Ajax requests

(17. Reduce the number of DOM elements

(18. Avoid 404

(19. Reduce the cookie size

(20. Use a cookie-free Domain

(21. Do not use filters.

(22. Do not scale the image in HTML

(23. Narrow down favicon. ICO and Cache

6. browser developer les

If you do not want to use the functions provided by other platforms and want to analyze them step by step, the developer tools of firebug, chrome inspector, and other browsers can help you optimize them, these tools are becoming increasingly powerful.

7. pagescoring website speed test

If you want a fast and simple tool, website speed test is a good choice. It has a good name, X as its name. It displays the loading speed and size of all pages. The download time is for each file, which helps you easily isolate problems.

8. uptrends speed test

Like other optimization tools, it provides full-page test tools to help you test the loading time and complete HTML pages (images, frames, CSS style sheets, flash objects, RSS feeds and JavaScript files.

9. Page SPEED TOOL

The page speed tool is an exquisite tool that emphasizes the file size, resources, and download speed. Although the loading time test is only calculated as HTML source code, not all files, you can still get some complete data through a friendly interface.

10. Web page Analyzer

Web page analyzer helps you calculate the page size, composition, and download time, and provides optimization suggestions for the test results. Set the website opening time to simulate different network speeds. The goal is to bring your page back to 14.4 kb.

Summary

Now, the series of page optimization is all over, and so many tools are listed at the end. People with phobias cannot help. If you don't know which one is useful, we recommend that you use the fourth one, Google's pagespeed insights, because its functions basically cover the optimization solutions listed in these chapters. Finally, I hope these four articles will be helpful to you. Programmers are good people, best wishes ~

Overview of front-end page optimization (4)