Optimizing Website Performance

I’m on a performance kick. I did the Treehouse Front End Performance Optimization course. I read some great articles at The Practical Developer about the web being too slow and their own journey of making their site hella fast. So I did an optimization project for my website: aetas caelorum.

Results

Initial page load got 10x faster. Load time went from ~3 seconds (3,000ms) to ~1/3 of a second (300ms). These were averages after several tests to load the page (cleared cache) in Chrome devtools.

Google PageSpeed Insights also showed a noticeable jump from 55 and 65 on WordPress, to 89 and 92 (out of 100) on Github Pages, on mobile and desktop respectively.

Wordpress: 59 requests, 2.1 MB transfer, 3.15 seconds

Github Pages: 13 requests, 795 KB transfer, 318 seconds

WordPress on Bluehost, Genesis Framework, Minimal Pro Theme
Github project page, minified, single-file index.html and reduced image sizes

Background

aetas caelorum is a Latin phrase meaning “the age of skies”. It was the name of my video game clan (when I was 14). I kept the name and built a philosophic website for fun.

Content aside, this website was originally hosted on Bluehost with Wordpress, and used the Genesis Framework and Minimal Pro Theme from Studio Press. Neat looking, but overkill for a simple webpage. I can build basic webpages myself and don’t need to rely on WordPress anymore, especially since I don’t need the database and CMS.

It bothered be how slow my page loaded. So I made it a mini-project on web performance.

Moving away from WordPress

Step 1 was moving away from WordPress. My website was static content. I didn’t need a backend, or all the fancy WordPress stuff. So I replicated the HTML, CSS, and a tiny bit of JavaScript in codepen.io, which is a great place to start my small projects.

jQuery to JavaScript

I have a pet peeve. It’s when the copyright year is wrong. © 2014 shows lack of attention. On my sites, I use JavaScript to keep the year updated automatically. In the past, I used jQuery to accomplish this. For this project, adding the entire jQuery library seemed excessive. So I challenged myself to do this with plain old JavaScript.

After 10 mins of Googling, and searching Mozilla MDN, I got it! 2 lines of JavaScript and jQuery replaced. The point here, is to consider writing your own JavaScript instead of importing an entire library for one, or a couple, features.

Single file

I hear computers like looking at one file, instead of many. I also came across Francine Lee’s website. She uses a single index.html file with styles and JavaScript in the head, not linked externally. I like that idea for basic websites. So I did the same.

Minify

I took Francine Lee’s single file method a step further and minified my HTML and CSS. This is a common process for production. I used Minify Code to go from 3,792 to 2,671 bytes. That’s 30% savings. Now, my site is really small, but there is proportional value in minifying larger websites. You can use tools like gulp, grunt, or webpack to build minifying into your development process.

Image sizes

My website has several images. I took them with a fancy digital camera at a ridiculous resolution, which was fun. But in the name of web performance, I reduced all the content pictures to 300X300 to match the width for each “content card”. I reduced the jumbotron to 1200X900. These reductions meant big savings in download times over their originals.

Github Pages

Github Pages became the new home for my static site. I trust Github’s speed and reliability over Blue Host, that held my old WordPress version. Setup was a snap with git and a gh-pages branch. I used the CNAME file and redirected the URL too.

Conclusion

This was a fun web optimization project for me. The results were not unexpected or ground breaking. But a good exercise and reminder to keep the web fast.

I encourage you to consider optimizing your own website with some of these strategies. Start by entering your URL into Google PageSpeed Insights. I bet you can gain a lot more speed!