Before, I would use Dev Tools for element inspecting. After I went through Code School’s Chrome DevTools, I wanted to use what I learned and see if I could optimize my website. When I access my site’s home page, I always notice slow load time. In the Network tab of Chrome Developer Tools, I get this analysis:Oh. Looks like it’s that 10 MB image that first loads up taking almost 5 seconds to load! An easy fix – I used GIMP to change the image format from PNG to JPG and also scaled the image by a factor of 0.75. Here’s the result:
85% decrease in file size and around 70% decrease in load time – cool beans. There wasn’t anything else taking long as far as network performance was concerned and no errors either. Next, I look at the timeline of the home screen. Using the Events tab under Timeline, I record the instance when my home page loads and then stop. Nothing seems out of the ordinary but I do run into this:
Between each line, 200ms elapse. So in this case, 500 ms was spent on that 10 MB image I had (and look at that time on just decoding!). Let’s see the results after I decrease the size of that large image.
I say the time is now around 200 ms – not too bad. In this image, you can see instances in the graph of low FPS. Honestly, I don’t notice much of a performance issue when the images load up. The yellow bar is a function being called, namely the JS function that runs the slideshow of the images. You can see that in the image below.
Although I don’t have a screenshot of it, I noticed that there was more than 10 JS files being called at once and a browser can only handle so many requests at a time. Interestingly enough, the time duration of the JS requests were very minute and thus did not have too much of a performance impact on my home page. That’s because all the scripts being used are minified (except a jQuery file). But, I would like to consolidate those scripts into one file someday so only one request is being called rather than multiple ones. Here’s Google’s own closure compiler service and is a great solution for my case.
Under frames in the second to last image, you see Memory. In this tab, you can see how much your computer’s RAM is being used in Chrome. Let’s see…
Oh no – as you can see, Chrome’s memory use is increasing slightly. As far as I know, that can only mean one thing: a memory leak.
Let’s see what’s happening. We go here to check:
And here’s that snapshot of my homepage:
The culprit here must be that function that is detached from the DOM tree.
I also want to see my CPU usage:
Nothing out of the ordinary here. I would be worried if there was a function near the top in this table.
Also, Google has a page speed extension for Chrome that gives suggestions for improving your site (which I didn’t use until the end of my own analysis). Here’s what it told me:
I noticed that I had a plug-in activated that I didn’t need at all. Nothing serious except the optimizing my home page’s images (it’s weird because I don’t know how to fix what it’s telling me to do). I also learned I had some plug-ins that I thought I disabled still running, so that was easy fix.
This was great giving my site a decent brush up. Why don’t you try checking if your site needs optimizing?