Optimization
We ran the same performance test as described in the performance testing wiki page on the feature-complete commit for two hours.
Clicking on the image will enlarge it
These results will give us a comparison base when page loading speed and page size is concerned.
Following two screenshots were fetched whilst doing a full page reload(Ctrl-F5) on the Feed view. That means that nothing was fetched from cache.
Clicking on the images will enlarge the image
Following two screenshots are from a normal page reload(F5) on the Feed view. Some of the resources are fetched from cache (HTTP 304).
Clicking on the images will enlarge the image
Using the Google PageSpeed tool, we received the following suggestions:
Google PageSpeed gave us the same suggestions for Desktop and Mobile environment.
However, for desktop, the Eliminate render-blocking JavaScript and CSS in above-the-fold content suggestion was listed in the Consider fixing category instead.
The improve performance we took the following steps:
- Enabled compressing HTTP responses.
- Compressed the Google login button image with Zopfli. Rest of the images were already compressed with Zopfli.
- Minify static resource files upon build.
- Bought a really large cluster in AWS Just kidding, we're just poor students with no moni :(
Here is the aftermath of the previously mentioned optimizations. These result tests were done on this commit.
We decided that we will not do anything for the Eliminate render-blocking JavaScript and CSS in above-the-fold content suggestion. The reason for this is that we'd prefer that the page's layout is set in the beginning of the page loading.
We load the Bootstrap's CSS in the master template's <head> element.
If this CSS would be loaded after the content has loaded, the layout would suddenly change. Thus, to avoid this, we decided to ignore this suggestion.
All in all, ignoring this suggestion does not have a significant performance effect as well.
The Desktop tab in the previous Google PageSpeed screenshot will also display Optimize images suggestion, referring to the Google login button image. However, in this case, it is indeed a false-positive as the compressed image is already 3.91 KB after the optimizing commit. It is not possible to noticeably reduce the size of the previously mentioned image without losing in quality.
After letting the same performance test run for two hours, we gathered the following results:
Clicking on the image will enlarge the image
From the previous screenshot, we can see that the average received content size is now roughly 8 times lower than it was prior to the optimization. Due to that, average response time has improved by ~50 milliseconds.
Following two images are taken from a full reload (Ctrl-F5). Due to smaller content size the performance has improved a little bit.
Clicking on the images will enlarge the image
Normal reload times remain roughly the same, since the elements are loaded from cache. Due to that, there is no noticeable difference.
Clicking on the images will enlarge the image