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.
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
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
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.
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 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.
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!