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.
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.
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
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 <IfModule mod_deflate.c> <filesMatch "\.(js|css|html|php)$"> SetOutputFilter DEFLATE </filesMatch> </IfModule> #CACHE FOR 1 WEEK <filesMatch ".(css|jpg|jpeg|png|gif|js|woff)$"> Header set Cache-Control "max-age=604800, public" </filesMatch>
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.
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.
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.
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.