This article is not long, mainly to clarify two small things. These two little things, basically covering 80% of the web performance optimization system (not all), let you see some of the phenomena behind the essence.
preface
It all started with that stupid server I bought. It was cheap, 99 PCS, but it only had 1 Megabyte of bandwidth.
Today I give you a network bandwidth (hereinafter referred to as “bandwidth”) knowledge, you may think I do front end, I have nothing to do. But this flatterer matter, one day can produce delicate 🤏 relationship with you. The purpose of this article is to analyze front-end performance optimizations such as Sprite graphs, reducing HTTP requests, routing asynchronous loads, transferring images to CDN, compressing static resources, and so on, by explaining bandwidth and the limited number of concurrent requests in the browser.
Bandwidth profile
I thought I might not be accurate enough, so I went to Google to see if there was a good definition. Hoo hoo ~ ~ ~ blah blah blah blah. Here’S a quick summary from an example in the encyclopedia.
“If you compare urban traffic roads to networks, there will be one lane, two lanes, four lanes, eight lanes. You drove a car, on the road, lane, two-lane, four lanes, the lane, the last to arrive at the destination.”
Several key words appear in the above scenario:
- Urban transportation: Network
- Width of the entire lane: bandwidth
- Single lane, two lane, four lane, eight lane: bandwidth size
- The car you drive: Information transmitted over the Internet
Bandwidth is used to transmit information, information must have a specific value, we call it digital information flow. The unit of digital information flow is bit (bit) and the unit of time is s (second), so bandwidth is described in bit/s (bit/ second). Imagine a download speed of 1 bit/s per second. Today’s telecom broadband Internet access runs at speeds between 512 K bit/s (kilobits per second) and 10 M bit/s. Ethernet is even faster, with speeds above 10 megabits per second.
KB is actually not the same as KB, a lot of data is not strictly different, in fact this is not rigorous. Capital B is different from lowercase B. Capital B stands for Byte. Little B for bit, bit. 1 B = 8 b
That is to say, we usually handle the 100 M broadband, the conversion is:
100 MB b/s = (100 x 1024) K b/s = (100 x 1024/8) KB/s = 12800 KB/s = 12.5 MB/s
Bragger force, my home deal with is 100 M broadband, how did I not find 12.5 MB/s network speed (directly hold your breath, China Mobile you give me out).
Found later, misunderstanding a 😂. The above calculation is only in the ideal state, but in reality, due to “user computer performance, network equipment quality, resource use, network peak, website service capacity, line loss, signal attenuation” and other factors, will cause the actual network speed is not as fast as the ideal.
It’s a ferocious operation, and by the end of the day, my pathetic 1-megabyte server is transmitting data at 128 KB/s (in ideal conditions).
Limits on concurrent browser requests
So with bandwidth, let’s see how many network resource requests a browser can make concurrently in the same domain. In Google Chrome, for example, it’s six. I found an authoritative figure for 2008 😱 (surprising) :
Image from: Address
Notice that I said a keyword concurrency in the same domain above. If you ask me what a co-domain is, you can drop the front end. .
Starting point
After understanding the above two knowledge points, I began to point.
Sprite figure
Why do Sprite pictures? In a Sprite diagram, there are dozens of small ICONS in the case of many ICONS. If all of these ICONS are loaded in single images, let’s say the home page needs 100 of these little ICONS and 100 images loaded at the same time. Google Chrome concurrent request is 6, you say not to fry (of course not so exaggerated, I said to exaggerate a little, to scare you).
Reduce HTTP requests – add caching, etc
Why reduce HTTP requests? It’s not the server bandwidth and the number of concurrent browsers that are there. If there are frequent concurrent requests, multiple people complete a large number of concurrent requests at a certain time, and the server bandwidth is small (the lane is very narrow), traffic congestion will occur. (Of course, load balancing and starting multiple processes can solve this problem).
Asynchronous route loading
The purpose of asynchronous loading is to reduce the size of static resources for the first load, so that no other page resources are needed to load the first page. The purpose of reducing the volume of static resources, one is the network speed is slow, loading will be very slow; The other is that static resources are too large, and the server bandwidth is small, the response time will be long.
Transfer image resources to CDN
Picture resources to CDN, the purpose is not to grab resources in the main domain of the website. As mentioned earlier, the number of concurrent requests under the same domain of Google Browser is 6, knock the blackboard!! You put the picture resources in the main domain, it will go to the network resources ah. So you’ll see a lot of sites, like Nuggets, that put images in a CDN link under another domain. It might even be in multiple domains.
Compress static resources and subcontract
Compression of static resources and subcontracting operations is to consider that the amount of information transmitted by the server bandwidth is limited per unit of time, so after compression, the volume of resources per request is smaller, and the natural speed will be faster.
There are so many more. I’m not going to mention them. Go to the Nuggets search box and type in “performance optimization”.
conclusion
Web page performance optimization extensive and profound, I also just stand in my point of view to analyze this problem, have deeper insights of the big guy, can be in the comment area to teach one or two, don’t be the kind of, if the words of the Yin Yang qi, I don’t tell you directly (escape).