Using Google Chrome Inspect Element to Analyze the website

I'm developing my new profile website. I want to reduce the loading time of my page. Google Chrome also provides the tool to help developer to analyze the websites.  So it's time to play with the "Google Chrome Inspect Element to Analyze the website"

1. I want to see how each element take time to load.

then I go back and modify some images and code. This is the result.
For the images I use the Photoshop "Save as Web" feature to help me consider which option is the best for my website. Actually, I will reduce the quality of the images down to 60-80% depend on each images.

This will greatly reduce the image file size but it still look beautiful. Furthermore, there are other options e.g. reduce the number of colors, reduce image size, use the vector file and more. This Technics are depend on each images. In the example below, You can see that jpg format gives the better image quality compare to .gif at the same file size. I think jpg is great for photo while gif is great for a image with small amount of color.

We also can see how long of each action on Browser.
Some scripts give same action/result but take shorter time.

This is a very useful for my case!
Its give a recommend on performance e.g.
Remove unused code
Put a specific width, height.

We can live edit the source and see what happen to the website. We can also see the deeply info of almost every element in the website.

Another interesting feature is we can see what happen in iPhone6 or any series of phone. It also has options on internet speed too.

 We can add a customize phone model or internet speed.

These are some of the options that we can play with it.

Popular posts from this blog

เทคนิค ชนะ เกมเศรษฐี 14 ตารวด!!! ( Let's get Rich )

Easy way to download whole youtube play list and convert them to mp3