Blog

My Website Optimization Journey - Part 3 - Speed

media/posts/page-speed.jpg

Welcome to another exciting edition of “Making My Website Suck Less”. Since I started this journey to re-align my goals and bring my website back from the depths I had gone from beyond page 11 when searching for “web design” green bay wi” to somewhere around page 6 depending on the day and time.

Honestly, it's hard to know if my efforts are the reason for the improvement or the constant updates and changes these past weeks. I can tell you that before my second child was born, and before I neglected my website in favor of client projects and raising my children that generally, I would show up on the 2nd or 3rd page for the same search phrase. So regardless of how I got here I still have some work to do.

In Part One I finished some pages that had been neglected or that I felt didn't represent my abilities properly. In Part Two I fixed some missing meta tags and changed others to better reflect the content of the page.

This time we're going to use Google's Page Speed Insights to see if we can't optimize the pages for mobile browsing since it is now a ranking factor. I'm using the about to be retired old version because it has more information and I really wanted to take a good look under the hood.

Page speed optimization also helps me to procrastinate rewriting my major content pages if I'm being honest.

Speed

My site runs on a content management system that I have been developing for years and although I have taken great lengths to make it responsive I never actually checked it's performance before. I have checked to make sure it works on different device sizes and had some ideas about image optimization and placing javascript at the end of the document instead of the header but that was about the extent of my performance testing.

I wanted to start with the home page because it has the least number of things that could be wrong. Additionally, since the code base is shared across multiple pages I could correct any glaring issues right away and create less work and have less rechecking on the deeper pages. Turns out that was a wise decision. Here's a screenshot of my mobile and desktop results for my home page.

With this score and the suggestions below it appears as though most of my assumptions during the development phase were correct and I don't have that much to fix. I do have a 100% usability score on mobile but there are some things that could speed up the page a bit so let's get to it.

Mobile Version

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This I really can't do anything about. The two files it has flagged are my CSS sheet and the @import for Google Fonts.

I looked into it a bit and the solutions I came across were:

  • Split up the style sheet
  • Load only what's needed before each section of a page
  • Paste the contents inline

It would take much more work to implement these suggestions than what I felt was worthwhile for the few milliseconds of load time. I minified my CSS sheet (which was also a suggestion) so I decided to be happy with that.

Leverage browser caching and enable compression

Honestly I thought these were turned on already but after testing the site for caching and compression I realized they weren't. No problem. An easy fix.

My server runs on Linux so all I had to do was add these lines to my .htaccess file and the issue was corrected.

#COMPRESSION

	<filesMatch "\.(js|css|html|php)$">
        SetOutputFilter DEFLATE
    


#CACHE FOR 1 WEEK
<filesMatch ".(css|jpg|jpeg|png|gif|js|woff)$">
	Header set Cache-Control "max-age=604800, public"

Optimize images

There were two things going on here. The images from by articles were displaying at 800 pixels and shrunk down to fit the space provided. Turns out there was an issue with the code that was not using the correct size for mobile devices. I corrected the code and those images disappeared from the suggestions.

The other were my social media icons. They are not large images but they were using more colors than needed which made the file larger than it needed to be. I reduced the number of colors in Photoshop by making them 8-bit files instead of the default and re-uploaded them.

Desktop Version

My desktop report card wasn't looking so great but once I made the above corrections the suggestions for the desktop had been resolved. Here is a screenshot of my results for my home page after my changes.

The Rest

Most of my issues with the other pages were resolved by making the changes to the home page. Really all that was left was to optimize some images here and there.

Local Data

Since my pages are now optimized to the best of my ability I wanted to add one last thing before I quit for the day.

Since I am not trying to necessarily get clients from far off continents or even the other side of the country I added Schema.org data to the footer of my website so search engines know my precise location. This has a small benefit with local search results which is really where I would like to show up. It has nothing to do with page speed, but it took only a few minutes and needed to be done.

So there you have it. Just some more tweaks that didn't take too long to better align my website with current search expectations.

Next time we're going to go over the real meat of this excursion and see if these pages, written in 2013, still align with my business goals. I think it's long overdue.