PageSpeed Insights: A DIY Story
by Aryeh Powers
Page load speed has been playing a larger and larger role in user experience and SEO, as a result. This past year, I attended the SMX Israel conference and heard Google’s Gary Illyes comment on the incredibly low attention span (8 seconds) of Gen Y and Z adults. Mobile user experience, in particular, has become increasingly more relevant in Google’s indexing of your website. On November 4th, Google announced the advent of mobile-first indexing, that they would be looking at the mobile website version first, when considering how to index your website. On the topic of page speed and mobile website usability, I would add that it’s common sense that a good mobile web experience (as opposed to a desktop experience) should include faster loading websites.
More recently, I set out to see how I could increase the page speed and other visual aspects of my website, to give visitors the best user experience possible. And, since I like to understand and wrap my head around the process and mechanism behind advantageous speed increases, I opted to try to use as many non-plugin options as possible. Using the following tools (and website resources listed just below), I was able to boost my Page Speed Insight’s mobile score from 52 (approx.) to an 87:
- Photoshop (for making less dense images)
- webpagetest.org (for monitoring progress and looking at the page load breakdown)
- cssminifier.com (for minifying my CSS files)
I also want to call out 2 other sources that used when researching best practices. Patric Sexton’s Varvy website has been a great resource for more technical edits – in particular, these 2 webpages really helped me figure out what to do with my .htaccess page:
And finally I’d like to give a shoutout to the Brian Jackson of Key CDN, who wrote a great article on WordPress website speed optimization that led me to install the Autoptimize plugin.
So, here’s what I did:
- Given PageSpeed Insight’s suggestion, I switched my home page images from high quality JPEG and PNG images to lower quality condensed PNG images (In my opinion, they still look fine). This increased my mobile score from 52 (approx) to 56 (approx). Note that if you run the home page in PageSpeed insights, I may still be able to cut down some of my image’s sizes.
- Next, I edited my .htaccess files using techniques I read on Varvy.com (articles listed above). These changes resulted in my mobile score hovering around the 66 mark.
- Not finding the right “organic” way to load the files after rendering the website, I finally caved in and installed the Autoptimize plugin (which I found from in the Key CDN article). Upon activating and customizing (through a relatively uncomplicated process) the plugin, I was able to effectively bring my mobile score into the green with a mobile score of 87 and a User Experience score of 100/100.
Some of the methods above may or may not work for your website. Regardless of how you choose to move forward with enhancing the usability or speed of your website, be sure to back up your files and to have the proper test environment set up beforehand. It can be really frustrating to see an error message on your live site after making changes, so be careful. Have fun and good luck!
Tags: pagespeed insights, user experience