PageSpeed Insights: A DIY Story

pagespeed insights image

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)
  • jscompress.com (for minifying my Javascript files)
  • Autoptimize Plugin (for getting rid of above the fold Javascript and 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:

  1.   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.
  2.   I then minified my CSS and Javascript files using the websites listed above. This drove up my mobile score to 60 (approx).
  3.   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.
  4.   At this point I was stuck. I saw that there was an enormous amount of kilobyte’s (mostly from Javascript and CSS files) being processed by Google bot before the rendering of the page. I wasn’t sure how to push these files to a post-page load location. I then looked more closely at the Key CDN article above. First, I read that WordPress, as a package, includes a snippet of code which forces Google fonts to be loaded before the website is rendered. I then located the code in my functions.php file and simply deleted the code. This in turn boosted my mobile score to a 68 (approx). Despite the boost in ranking, there was still a lot of information being processed before the page load that I wanted to relocate.
  5.   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: ,

<<            >>