lighthouse
In front-end development, there are always some project optimization issues. But to optimize is to be better than before. So this “where did we go from here” thing? So we need to find some metrics, and if we have metrics, we can judge what we call optimization. As I studied today, I found a handy little tool — Lighthouse. Can give you a performance rating of your page, more interesting is this widget, can give you some HTML, CSS, JS, cache handling, image tips. Here I tested two urls to provide a reference
League of Legends website B station
Test case
B stand test
Lol official website test
The test results
The first of lighthouse’s recommendations is that league of Legends is officially too slow to load, which means too big:
An image is over 500 kilobytes, which is quite large. But about this discussion here, we a small FW or don’t put this point at the goose factory things, maybe someone else has his consideration… However, we can see that the first four suggestions are all about pictures. If you can reduce the size, in fact, as far as I am concerned, it is much better than you do a lot of minor code optimization and structure optimization. After all, it adds up to more than 30 seconds, which is also a big part of the optimization.
Method of use
There are two ways to use Lighthouse, either directly in the Chorme or through a Node
1. Use Lighthouse in Chrome
F12 Open developer mode, go to Lighthouse, and click Generate Report
2. Operate Lighthouse using Node
First download Lighthouse globally using NPM
npm install -g lighthouse
And just use it
Lighthouse (XXX) uses the League of Legends website as an example lol.qq.com/main.shtml
Attach the Github for Lighthouse, and check it out for other details
Github.com/GoogleChrom…
TinyPNG
This is what? In fact, it is a compressed image site. We just saw how amazing the images on the League of Legends website are. So when we optimize the picture, in addition to converting the picture format JPEG, PNG, GIF, Webp, we can also reduce the size of the picture by this direct compression of the picture, although the picture is reduced but it will not affect the clarity of the picture oh. This site supports only two formats, PNG and JPG, but feels like that’s about right
TinyPNG url
TinyPNG
Test case
Let’s go with the biggest image on the League of Legends website584kb
Trash talk time
Well, that’s all for today’s sharing. The reason for writing this is that I happened to see it and tested it and found that a lot of websites probably and probably should have handled it poorly (right?) . Several of them had these problems. B station and CSDN seem to be ok? Then I realized that TinyPNG, a website with compressed pictures, was used in my previous study, which was quite consistent with my measured results, so I came up with it together. Please correct any questions