In December 2018 I decided it was time for a new facelift for my website SimpleWebDesign.net. The original wordpress theme had been running for almost two years but I wanted to completely overhaul how it worked.  The goal was it make less distracting, less clutter some and faster!

After much research I purchased the Markesia Theme on themeforest.

After about two days of setting everything up I had the HTML version up and running.  The only issue that I faced is that the Google Pagespeed Insight speed was slow.  I think the score was around 50 somewhere for the mobile version.  With Google rolling out Mobile first I knew I had to get that up to 80 or more at the minimum.

Here’s what I did to speed up the score.

Step 1: Converting Images to Webp

WebP was originally released by Google in 2010 and it’s a great alternative to the usual jpg.  You can a size difference of 30% to 60% when using WebP.  Plus WebP supports transparent images if you’ve been using PNG’s.

Support is limited to the more newer versions of browsers but overall the good news is that most browsers do support it.

Have a look at the two images below.  The one on the left is JPG and the one on the right is WebP.

To convert images to WebP you can do it manually or use a Photoshop Plugin.

The manual version is through the webbased tool from ezgif that’s aptly called Jpg to Webp (there’s png version there too!).

If you have photoshop then you can read up this tutorial by CSS-Tricks for how to use photoshop to save as WebP.

Step 2: Setup Browser Caching

Browser caching is basically the process where once you visit a website then the images, css files, javascript, fonts can be stored in cache.  That way the next time you request them again it’s already available.

In the htaccess file on your website you can setup how long you would like each type of file to have caching for. In other words how long should it use the cached version before requesting a new one.

And there will often be times when you need a script of update an image.  In cases like this setting expires allows you to let the browser know to expire the old image and use the new one.

There are two main ways to setup Browser Caching.

1. If you have WordPress then you can use any number of plugins that are available that support browser caching. There are even all in one plugins that will provide a combination of tasks to speed your website in addition to just the browser caching. Two of the most popular plugins are WP Smush.it & W3 Total Cache but you can compare more plugins and see which one is right for you.
2. If you’re not using WordPress and have a custom made website then you can setup caching and expires through your htaccess file.  Always be careful to backup your htaccess file before making changes to it.  I used the below code which supports different font types and also the webp format.

Step 3: Enable GZip Compression

When I implemented the caching above I specifically mentioned browser caching because this really is something that happens when YOUR browser first visits the website.  With GZip compression the changes occur on the server side so that when your browser requests a CSS file then it receives a compressed version, then your browser caches it until it expires.

GZip compression which won’t affect images but instead it’ll compress text based files such as css, html, javascript and other files that tend to have a lot of empty whitespace.

GZip compression can compress files by up to 70%.  And it’s very easy to enable.  You can use one of the plugins that I mentioned in step 2 or manually through your htaccess file.  Here’s the code below for gzip that I found over at GTMetrix Gzip Compression article.

Those are the main steps that I took to improve the my speed and thus my score.  You’ll see this score fluctuate up and down.  There are additional steps that you can take too which I’ll update below as soon as possible.

Do you have any tips on how to further speed Google Pagespeed Score? Post your comment below!