Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
Web Performance

Site Performance Review 8/2014

Cory Rylan

-

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.

Content Breakdown for coryrylan.com (home page gzipped)
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.

JavaScript Breakdown (gzipped)
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.

CSS Breakdown (9.0% gzipped)
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.

HTML Breakdown (2.9% gzipped)
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.

Images Breakdown (48.3% 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.

Font Breakdown (39.8% gzipped)
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

Performance Stats
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.

Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Web Performance

Reliable Web Summit, High-Performance Web UI with Web Components

Learn how Web Components can provide a lightweight and consistent UIs to any web application.

Read Article
Web Performance

Testing Web Performance with Web Test Runner

Learn how to test both render and bundle performance using Web Test Runner and the Web Test Runner Performance library.

Read Article
Web Performance

Design System Performance with Clarity Core Web Components

Learn how to build high performance UI and Design Systems on the Web using Clarity Core.

Read Article