Scoring rules of YSlow, a webpage scoring plugin developed by Yahoo

YSlow is a page scoring plug-in developed by Yahoo USA. It is very good. From it we can see many shortcomings of our page and know how to improve and optimize it.
Carefully study the YSlow scoring rules.
There are 12 main items:
1. Make fewer HTTP requests. . We have 141 requests (15 JS requests, 3 CSS requests, 47 CSS background images requests), which is horrible. After thinking about it, why are these three types of requests listed as important adverse factors for page loading, while excessive IMG requests are not listed as adverse factors?
It turns out that these requests can be avoided.
15 JS and 3 CSS can be merged through a special method (the technical department has helped us solve this problem, thank you very much, hehe). After the merger, generally only one JS and one CSS will appear on the page (there are certain requirements for JS encapsulation).
But how to solve the 47 CSS background images requests? Why are pure IMG requests on a page reasonable, but too many CSS background images requests are a disadvantage? I thought about this for a long time, and finally figured it out. It turned out to be like this:
Generally, we use image CSS background to implement icons, column backgrounds, and image buttons on the page. Generally, the images used in this image CSS background are relatively small, so it is completely possible to merge these images into a relatively large image. In this way, there will be only one CSS background images request on the page, or at most 2-3. Later, I took a closer look at Yahoo's US page and found that they did the same thing. Although it takes a certain amount of time to regularly merge these icons, column backgrounds, and image buttons to facilitate CSS calls, it is definitely cost-effective and necessary. YSlow is also highly recommended.
2. Use a CDN Our score for this is F, the lowest. To be honest, I didn’t know what CDN was at the beginning. I found out later after checking GOODLE. The full name of CDN is Content Delivery Network. Its purpose is to add a new layer of network architecture to the existing Internet, publish the content of the website to the "edge" of the network closest to the user, so that users can obtain the required content nearby, solve the problem of Internet network congestion, and improve the response speed of users visiting the website. From a technical perspective, it comprehensively solves the problem of slow response time when users access websites due to small network bandwidth, large user visits, uneven distribution of network points, etc.
After reading the above explanation, I basically understood what CDN is. Later, I consulted the Chinese site SA and learned that our website has not yet been optimized for CDN, but it is said that we have more advanced technology to solve similar problems (the specific technology will be kept confidential). But after all, CDN is also a very good technology, so doing CDN optimization based on our advanced technology will definitely be better than it is now, hehe. It is said that SA will make CND at several locations next year.
3. Add an Expires header to set the expired HTTP Header. Setting the Expires Header can cache scripts, style sheets, images, Flash, etc. in the browser's cache.
In fact, we have also done this optimization on our website, at least the images have been optimized in this regard, but it has not been completed completely. Our CSS and JS have not been optimized yet, but an external advertising JS has done it, haha. In fact, setting the expired HTTP Header should be done on scripts, style sheets, and Flash. However, it is said that SA did not do this, but there is a certain risk, because JS and CSS have certain logic. If there is a cache on both the server and the client, if something goes wrong, it will increase the difficulty for us to find the problem in the future. However, I think the two can be weighed and coexist.
4. Gzip components compress our page content in Gzip format. Gzip format is a very common compression technology. Almost all browsers have the ability to decompress Gzip format, and it can compress to a very large ratio. The general compression rate is 85%, which means that a 100KB page on the server side can be compressed into about 25KB of Gzip format data and sent to the client. After receiving the Gzip format data, the client automatically decompresses it and displays the page.
Our website has basically achieved 100% of this, but our score for this item did not reach the imagined A level. The reason is our external links. For example, our homepage has an external advertising JS. The website that owns this JS has not been GZIP optimized, which has affected our website. Therefore, we are only rated B or C.
5. Put CSS at the top Put the CSS external link at the top of the page.
In fact, we generally follow this principle. If CSS external links appear below the page header as part of the logic, I personally think this is a mistake in itself. Fortunately, we have basically achieved this on all our pages, but some pages, such as the LIST page, still have CSS links linked to logic. The reason is to solve some product logic that is not reasonable in the first place. Therefore, we, the front-end web engineers, have the obligation to prevent these unreasonable product logics from destroying our page results and page loading speeds, and we cannot implement them just for the sake of implementation.

Previous Page 1 2 Next Page Read Full Article

<<: MySQL GTID comprehensive summary

>>: How to modify the root password of mysql in docker

Scoring rules of YSlow, a webpage scoring plugin developed by Yahoo

Three properties of javascript objects

Super detailed basic JavaScript syntax rules

How to move mysql5.7.19 data storage location in Centos7

Detailed explanation of Nginx version smooth upgrade solution

Docker commands are implemented so that ordinary users can execute them

Problem record of using vue+echarts chart

JavaScript implements checkbox selection function

Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system

Docker images export and import operations

A commonplace technique for implementing triangles using CSS (multiple methods)

Recommend

How to configure user role permissions in Jenkins

MySQL 5.7.21 decompression version installation Navicat database operation tool installation

vue-cropper plug-in realizes the encapsulation of image capture and upload component

Detailed explanation of the function and usage of keepAlive component in Vue

Detailed explanation of mktemp, a basic Linux command

Superficial Web Design

Summary of accurate calculations of various distances/scroll distances in a window

8 Reasons Why You Should Use Xfce Desktop Environment for Linux

W3C Tutorial (11): W3C DOM Activities

Native JS to implement paging click control

Research on the effect of page sidebar realized by JS

HTML form value transfer example through get method

React implements the sample code of Radio component

JS implements Baidu search box

How to write CSS elegantly with react