Category Archives for "Web Design"

How I Increased My Google Pagespeed Insight Mobile Score To 88

In December 2018 I decided it was time for a new facelift for my website 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.

JPG Version (45 KB)

JPG Version of Website Design

WebP Version (24 KB)

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 & 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.
AddType application/ .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others / Font
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  ExpiresByType application/ "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year" 

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.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

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!