Recently, I spent some time to optimize the first screen of our company’s PC terminal home page. Here is the final optimized loading speed (with Chrome caching disabled)
Ben fat still remember before the Denver nuggets popular recommended an article called “performance optimization only 3 steps, do you understand, it summarizes 3 methods, Ben fat feel very good ha. The first is the number of key resource bytes, the second is the number of key resource connections, and the third is the key render path.
This fat to our mall home page made a preliminary analysis. This optimization starts from key resource bytes + key resource connections, reduces the original first screen resource from 85 requests to 40, and reduces the original first screen resource size from 2.3m to 800K. Finally, the domContentLoaded time was reduced to an average of 400ms and the Load time was reduced to an average of 600ms, which initially achieved the effect of opening the home page in seconds (of course, there is still a big gap with Taobao tmall). Below this fat from 4 aspects to record the optimization steps in detail, respect to this article, to make a summary.
1. Lazy loading of the carousel plug-in
Like this mall home page round broadcast map, in Tmall, Taobao, JINGdong and other largest mall platform that is certain to have, our mall is no exception. The round – cast plug-in here is originally wrapped in its own JS. However, as the operational demand increased, you can see from the above that there are currently 9 events, which means that there will be more requests and render 9 large images of 1920*450 at the beginning, and anyone who does a Web front end knows what that means. So the first thing Ben thought about was how to make the next eight lazy loads.
Swiper is easy to configure image lazy loading, so is not your own plug-in to remove the famous swiper, that is 5 minutes, less time and effect, is not very easy?
However, if you do, the opportunity to improve yourself that you have come across is gone.
As a result, Ben wants to add the same lazy loading function as Swiper to the plugin he wrote before.
Lazy loading actually means that the default default does not display resources such as img SRC attribute, so the IMG will not send requests, so lazy loading can be done when appropriate to request the corresponding img resources.
We can place the image path in data-src(or any other custom attribute that doesn’t apply to SRC) when rendering the image in the plugin, and then control when to request the image resource in the plugin code. Let’s think about it. This kind of rotation asks for new images when the user clicks on the left, right, or the dot below or plays automatically. All we need to do is change data-src to SRC in these events. But for the first image, we need to do something special. We can change its data-src to SRC from the beginning. Below is a screenshot of the code snippet
A. First image processing
B. Lazy loading image processing
When the user clicks on the left, right, or bottom dot or autoplay, all three of these events call the move method, so you only need to change one place.
2. Delayed loading of statistical code and customer service code
The home page usually has some statistics code that you can’t live without, but you don’t need to load it on the first screen.
So it’s very simple, we just put all of this code in the onload event, and then we use setTimeout, which is a magic trick, and we set a time like 2000ms, and then in Google Browser Network you’ll see that there are N resource requests at the beginning, After about 2000ms, M more requests occur (these are requests for auxiliary code such as statistical code), but the Load time does not take into account the Load time of these auxiliary code requests.
This method, Ben fat can make a limit inference, if Ben fat change the delay time to infinite, then it will never affect the page first screen time, have similar ideas can talk about this method.
3. Use font ICONS wisely
The front page appears to have 6 requests, but in fact there are 12, with different ICONS when the mouse moves in. And is the background operation can be configured. It should be noted that the first level of classification, like here, does not change for a period of time (at least a month), and every time you change the front end, you have to change the style to fill the parent container. So it shouldn’t be configurable, it should be front end control.
At this point, Ben came up with the idea of replacing the requested images with font ICONS. Here’s how to use font ICONS.
www.iconfont.cn/, this is Ali’s font icon website…
This time, Ben used the original Unicode application of font ICONS.
Unicode is the original use of fonts on the web, with the following features:
1. Best compatibility, support IE6+, as well as all modern browsers
2. Support the method of font to dynamically adjust font size, color, etc.
3. But because it is a font, it does not support multicolor.
The steps for using Unicode are as follows:
Step 1: Copy the font face that lives below the project
Step 2: Define styles that use iconFONT
Step 3: Pick the corresponding icon and get the font code
Many other application method, you can refer to www.iconfont.cn/help/detail here…
4. All resources except the first screen are loaded lazily
First take a look at iQiyi home page loading, because this is the fat use of iQiyi home page loading strategy.
In addition to the first screen, the loading diagram is displayed at the beginning of the following resources, and the whole resources are loaded when the user’s eyes come into view, such as THE HTML structure, image resources, JS resources, etc. Note that CSS is uniformly loaded at the beginning. This can be seen in the screenshot below
The data-block-URL above is the rendered structural address of the channel. Iqiyi uses the way of INC to store resources.
There is no feeling this way of loading and picture lazy loading want to, just the picture URL cache channel resource URL, is not a kind of code is different, the idea is the same feeling!
In this paper, the