使用Google PageSpeed Insights分析网页性能

页面速度的最佳实践基准是低于3秒。
网页加载慢的6个主要理由

什么是Google PageSpeed Insights

它会通过引擎加载URL2次。
Google PageSpeed Insights quantifies your webpage performance for mobile and desktop devices. The tool loads your URL twice, with a mobile user agent and with a desktop user agent.

A PageSpeed score of 85 to 100 is a sign that your website has a good performance. But, if you want to become the number one search result in your industry, you’ll have to turn “good” into “excellent”.

怎么用Google PageSpeed Insights优化

Image Optimization

It is one of the most common suggestions in the PageSpeed Insights report. If you click on the “Show how to fix” button, PageSpeed Insights will provide you with an additional report on the images that need optimization.

这种问题有两种解决方式. 第一种方式是使用 ImageResize 或 TinyPNG 压缩图片 并上传。These tools can compress the image file size up to 80% without sacrificing too much of the quality and details of the images.

另一种方法是减少图片分辨率。For example, if you only need a thumbnail of the image that is 300 x 300px, why would you want to insert a 1200x1200px for it only to appear smaller on the page? You need to have smaller images where you want smaller images and larger where you need them if you want your page to render fast.

Minimizing CSS & JavaScript

Here, Google tells you that you have to minimize or eliminate render-blocking CSS & JavaScript files from your webpage. Again, clicking on “Show how to fix” will display a full report of the code on your page that slows down your page speed.

The minifying and elimination process is done successfully by reducing the file sizes by eliminating unnecessary white space, characters, and comments from CSS and JavaScript files. That comes as a result of the programming practice of leaving lots of space and comments during the coding process. Often, they increase the size of your CSS and JavaScript files。

If you have programming skills, you can fix this yourself. In the screenshot of the detailed report above, you might notice the “Remove render-blocking JavaScript” and “Optimize CSS Delivery” links above the files. Click on them and Google will provide you with detailed guides on how to fix the problem step-by-step. Google also offers you optimized files that you can download and use them yourself or hire a developer to insert them in your page.

Use CDN and WebP for Your Content

An easy way to increase your website performance is to use a CDN (Content Delivery Network). The process of integrating a CDN doesn’t have to be hard.

Content Delivery Networks work by taking assets from your webpage server and caching them on their own servers. When the user requests to visit your website, the static content will be delivered via CDN rather than by your site.

It results in faster page loads because CDNs are globally distributed servers and act as a proxy that assesses the server that is located close to your web visitor and delivers faster loading content as a result.

According to Google, WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality.

Using WebP formatted images can lead to significant increases in page speed. If your webpage is experiencing performance issues or low traffic, converting your images may help optimize page performance. For more information on the WebP image format, go to Google’s WebP most frequently questions guide.

BUT，CDN is too expensive for most company。

Use Browser Caching

Browser caching is another technique that can have a significant effect on improving your page performance. If you have lots of files and resources on your page, retrieving them requires time. Each image and element needs to be loaded, and browsers have to deal with HTML and heavy coding as well. It is an ongoing process, and it happens every time someone loads your webpage.

Minimizing HTML

Minifying HTML is another important website speed optimization technique that is crucial if you want your page to be ranked higher in Google search results. It is the action of removing unnecessary and duplicated HTML data without affecting how the browser processes the rest of your page.

Enabling Compression

This suggestion is triggered when PageSpeed Insights detects that some of the compressible resources are served without gzip compression.

Enabling gzip compression can reduce the size of the transferred response, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages. For more, read Google’s detailed guide on how to enable compression.

参考：https://devrix.com/tutorial/analyze-web-page-performance-using-google-pagespeed-insights/