"Imgix Page Weight Tool" which measures the weight of web page and gives advice for speedup

When uploading the image on the website, by preparing multiple size images or converting the file format, it will make the file size small even if it is small so as not to load the server, but this kind of plain The more work you will deal with the more images you handle. A service that performs such image processing related processing automatically and in real time is "Imgix"Service that measures important" page weight "when displaying web pages"Imgix Page Weight ToolSince we are offering, we actually measured it.

Imgix Page Weight Tool • Learn how to improve your site or app's speed.

How to use "imgix Page Weight Tool" is very simple, just access the above URL, enter the URL you want to measure "page weight" in the text box at the top of the page, click on "Weigh My Site" .

Then page measurement starts. The measurement time is about 1 or 2 minutes, but if you say "I can not wait!", If you enter the e-mail address in the red frame part and click "Submit", the measurement result will be e-mailed later It is also possible to obtain it.

So after the measurement is completed the following page opens. In addition to the measurement results, measures to speed page display are also proposed here. In addition, in the initial state, the measurement result of the mobile page is displayed, and the page measurement result of the desktop version can be seen.

As you look at the details, what is displayed at the top is "Total Page Weight (the size of the entire page)", "Weight is Images (ratio of image data among the entire page size," Load Time (The time it takes to load the page) "" Percentile in Weight (of page sizePercentile value) ". Measurement was made in GIGAZINE "I ate Tenya's "W hamburger bowl of rice bowl" tempura which had unheard of hamburger steak"The page size was 4.11 MB, of which 37% was image data. The loading time it takes to display the page is 4.6 seconds, and in the percentile order it is the 88th page display speed of 100.

This indicates that the graph on the left shows the percentage of the page size occupied by the image data. There seems to be 1.51 MB of image data. And the graph on the right says "It is possible to reduce the proportion occupied by images," according to imgix Page Weight Tool that image data can be reduced to 274 KB.

The graph below shows about 500,000 websites arranged from left to right in the order of "the image size in the page is small". The measured page (graph orange part) seems to be a considerably large size page as a whole. In addition, if we make improvement plan of imgix Page Weight Tool, it seems that size can be reduced to light blue part of graph.

And the part where two images are displayed side by side is the part showing improvement plan of imgix Page Weight Tool. In the original case Although the image displayed on the page is 560 × 420 size, we propose to shrink it to size of 375 × 281 because it is a page for mobile. And if you reduce the size, you can reduce the size per image by half or more.

In addition, there is an area written as "Quality" "Format" below this ... ...

Changing "Quality" makes it possible to check on the spot how much image data changes.

Furthermore, "Format" allows you to select formats such as WebP, PNG, PNG 8, JPEG, Progressive JPEG, JPEG 2000 and JPEG XR, and you can simulate how much the data size changes when you change the image format.

Then, when applying the improvement proposal of imgix Page Weight Tool that reduces the image size, it is "Image-by-Image Breakdown" which describes how much image data displayed on the page can be reduced in size . The percentage written on the right side shows how many% of the size could be reduced from the original data.

If you want to see the page measurement result of the desktop version, click "Desktop" at the upper right of the screen.

Then it will be displayed like this.

Comparing the desktop version with the mobile version, it becomes clear which one should be refurbished first.

"Imgix Page Weight Tool" is a service that shows how much you can reduce the image size and contribute to the rise of the page display speed by using imgix, but you can get enough information without planning to introduce it. People who care about the display speed of the websites that they are using, once you use it, the problem seems to be clear.

in Review,   Web Service,   Design, Posted by logu_ii