Site Performance Review 8/2014
Cory Rylan
- 3 minutes
So I decided to take a performance review of my own personal site after some optimization work and write about some of my findings. I did a average content breakdown on my home page and will cover a few other pages that load different resources.
I calculated all the resources for first time view on my home page with gzip. I do not include third party resources such as Google Analytics and Disqus because they are usually async and are outside of the developers control.
| Resource | Size | Percentage |
|---|---|---|
| HTML | 2.5kb | 2.9% |
| CSS | 7.5kb | 9.0% |
| JavaScript | 0kb | 0% |
| Images | 17.8kb | 20.9% |
| SVG | 23.2kb | 27.4% |
| Fonts | 33.6kb | 39.8% |
| Total | 84.6kb |
JavaScript
If you closely you will notice I have 0kb of JavaScript. Excluding Google Analytics this is correct. I have other JavaScript dependencies on my site I load only when needed. I use Disqus for blog comments. I also use Prism.js for code examples on my blog as well. On my Contact page I use JQuery & JQuery Unobtrusive Validation library for my contact form validation. Listed below is the content breakdown of all JavaScript resources on my site.
| Resource | Size | Percentage |
|---|---|---|
| JQuery & Validation (Contact) | 46.6kb | 90.1% |
| Prism.js (Blog) | 5.1kb | 9.9% |
| Total | 51.7kb |
CSS
I only have one CSS file that is minified. I use Sass as a preprocessor for my CSS. I generate a seperate CSS file for ie8 non media query support.
| Selectors | 695 | |
|---|---|---|
| Rules | 382 | |
| Total | 7.5kb |
Performance side note, because my CSS is so small I can inline this in the head of the document to get a faster paint time. This is because the server will not need to go get a CSS file to start rendering the screen. I have tried this and it does improve speed but I have not yet found a build process that I am happy with to automate this.
HTML
I have one HTML page requested from a prerendered view on the server. I do not
pull any dynamic content except on blog post comments.
| Resource | Size | Percentage |
|---|---|---|
| Home Page | 2.5kb | 100% |
Images
I have two images on my home page currently. I have one JPG and one SVG background. I do have images
on other pages of my site such as blog posts. All my images are compressed and gzipped.
| Resource | Size | Percentage |
|---|---|---|
| Image of myself | 17.8kb | 43.5% |
| Background SVG (gzip fails) | 23.1kb | 56.5% |
| Total | 40.9kb |
SVG
Performance side note, currently SVG images are not gzipping on my Azure host and I am working on a solution. This causes a extra ~15kb to be downloaded. If anyone knows of a solution please feel free to comment.
I load in two font sets for my site. The first is Roboto Regular for my base font. The second is a custom built icon set from Fontello.
| Stat | ||
|---|---|---|
| Fontello | 6.5kb | 19.2% |
| Roboto Regular | 27.3kb | 80.8% |
| Size | 33.8kb |
Performance tests can be skewed because if you request the browser to prefetch/prerender other pages in the background to make them load faster. I turned this off while running the tests. Prerendering doubled my load time because of loading resources for other pages even if the requested page was completely rendered. This skewed my page speed index score. This applied to webpagetest.org and not to Google Page Speed
| Load time | 1.689s | |
|---|---|---|
| Start Render | 0.996s | |
| Speed Index (3G connection) | 1291 | |
| Google Page Speed Mobile | 88/100 | |
| Google Page Speed Desktop | 95/100 | |
| 6 Requests | 84.6kb |
Overall my site has pretty good performance. My Page Speed Index is around 1291 on a 3g connection. My Google page speed mobile ranks a 88 out of 100 and desktop a 95/100. Good scores but definitely can be improved. My major performance issue currently is my SVG images not gzipping. I am guessing some type of config issue. My other major performance issue is CSS loading. I can optimize my CSS by inining in the head or defering the unnecessary parts. I also could defer loading of my web fonts to improve render time and make the site useable sooner. I'll be post a update after working on some improvements and see how much faster I can push my site.
