5 min. reading

How to Speed up your Website with Google TestMySite?

Site speed from 10 seconds to 5(3) seconds! How did we achieve it?

Vy
Speed up your website

Google recently launched a tool called “Think with Google Test my site.” It simply crawls your site with a slow 3G mobile browser and checks how fast the site loads by giving some bold conclusions. We ran a little campaign on social media where we picked the site of one of our clients and optimized it so Google would like it. Check it out on our social media for more details: twitter or Instagram.

Want to know how to make a page load faster?

According to Google, the result before starting the optimizations was quite sad: 10 second loading time and a 29% estimated visitor loss! That’s quite a strong statement, and we’re not exactly sure how Google came up with those numbers. However, numbers are numbers and we had a clear goal: make it load faster. And we liked this challenge. Here is what we learned while doing it:

Firstly, we made sure all items listed on Google’s PageSpeed Insights were addressed:

Step 1: Optimize images

Let’s start with the easiest – Google wants us to optimize the images. The easiest way to do it is by using free online tools, including Compressor.io, TinyPNG, and ImageOptim.

It’s also very important to resize the images in the dimensions used on site. For example, if you are using 200x200px images on your pages, the images should be sized on your server this way. There are tons of free online tools to resize the images, like the following: ResizeImage. When you run the PageSpeed Insights tool, it optimizes your images and allows you to download them. However, optimizing them with first tools described brings better results.

Step 2: Minify HTML, CSS and JS

Secondly, we need to minify HTML, CSS and JS files. This can be done using Gulp while the site is still in development mode, or you can still recompile it. Alternatively, you can download optimized CSS, HTML and JS files for Google PageSpeed Insights tool. Finally, if you are using one of most popular content management systems, you can use a plugin:

Step 3: Leverage Browser Caching

The third step is a bit more challenging. It’s called “Leverage Browser Caching,” and it has more than one way to be dealt with.

  1. If you don’t want to spend extra money on a hosting upgrade, one of the most cost effective ways to leverage browser caching is to add a few lines to your .htaccess file (we are assuming you are on Linux server running Apache)

    
    # Setting expire dates for cache
    <ifModule mod_expires.c>
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 2592000 seconds"
      ExpiresByType image/jpeg "access plus 2592000 seconds"
      ExpiresByType image/png "access plus 2592000 seconds"
      ExpiresByType image/gif "access plus 2592000 seconds"
      ExpiresByType image/svg "access plus 2592000 seconds"
      ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
      ExpiresByType text/css "access plus 2592000 seconds"
      ExpiresByType text/javascript "access plus 216000 seconds"
      ExpiresByType application/javascript "access plus 216000 seconds"
      ExpiresByType application/x-javascript "access plus 216000 seconds"
      ExpiresByType text/html "access plus 600 seconds"
      ExpiresByType application/xhtml+xml "access plus 600 seconds"
      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"
    </ifModule>
                    
    <IfModule mod_headers.c>
      <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf|svg)$">
        Header set Cache-Control "max-age=2678400, public"
      </filesmatch>
      <filesmatch "\.(html|htm)$">
        Header set Cache-Control "max-age=7200, private, must-revalidate"
      </filesmatch>
      <filesmatch "\.(pdf)$">
        Header set Cache-Control "max-age=86400, public"
      </filesmatch>
      <filesmatch "\.(js)$">
        Header set Cache-Control "max-age=2678400, private"
      </filesmatch>
      <filesmatch "\.(woff)$">
        Header set Cache-Control "max-age=2678400, private"
      </filesmatch>
    </IfModule>
    
    
  2. If you are using a server with cPanel, it’s a great way to add nginx plugin, because this gives some serious boost while loading static content.
  3. Finally, you can upgrade your hosting with CDN (content delivery network). It’s a great way to improve your website performance but it can be quite expensive in some cases. Here is great explanation on how it works:
  • In some rare cases, these optimizations won’t solve all your problems. For example, third party scripts, like Google Analytics, can still be listed as an issue of Google's Leverage browser caching. To solve this issue, use the following code snippet instead of a regular one that Google Analytics provides:

  • 
    <script>
      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
      ga("create", "REPLACE THIS WITH YOUR CODE", "auto");
      ga("send", "pageview");
    </script>
    <script async src="https://www.google-analytics.com/analytics.js"></script>
    
    

Step 4: Eliminate render-block resources

I hope you still enjoying this process. We’re almost finished!

Eliminating render-block resources above the fold can be a tricky. If you are on Joomla or WordPress, the plugins mentioned above might do the job, but otherwise you might need to move all JS files from document head to the end of your document body, then make all unused CSS resources load with a delay, and only keep those necessary to show the first fold content. An alternative solution is to add a loader screen instead of delaying CSS resources. You can find some cool free light weight loaders here.

Step 5: Enable Gzip compression

Finally, we need to enable compression.

To enable gzip compression simply add these lines to your .htaccess file:


#Gzip
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  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 font/woff
  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
</IfModule>
# End Gzip

# If mod_deflate doesn’t work on your server you can use mod_gzip
<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Final step: server and SSL

To this point, we followed common best practices. Our results turned out great on Google PageSpeed Insights tool. But what about “Think With Google Test my site tool” that gave us very sad statement about losing our visitors? The most challenging aspect of this was server response time, which plays a huge role in site loading time (or first byte of content, as other site speed tools call it).

If your site is hosted on decent $10 /month linux hosting with apache, an average server response time is about 1-plus second(s). What helped us to beat this number was adding the Nginx cPanel plugin mentioned above, which reduced our response time to 0.3 second, which is quite good. We achieved a 3 second load score by ThinkWithGoogle and “low” in visitors lost. Alternatively, you can get more expensive hosting like Rackspace or a similar solution that provides better performance. If money is not an issue, you can even add CDN (content delivery network) to it, which will always provide the best performance, even if the traffic to your site is heavy.

More problems occurred when we added SSL, which is recommended by Google to protect sensitive information. Google is starting to tag sites as “Not Secure” on Chrome beginning October, 2017. By making our site secured, we got back to a 5 second load time and we could not do much about it. It seems like having the setup like we do: Linux Cloud hosting with cPanel and Nginx plugin and site running Auto-SSL signed by cPanel, we can’t achieve a better loading time.

There are ways to boost SSL on the server by removing outdated cryptographic algorithms, and we walked that extra mile but it didn’t make any noticeable impact to the site. You can experiment yourself with this list.

Conclusion

Our conclusion is that a 5 second load time is an optimal solution, because you’re balancing between user experience, server cost and security. More than that, using Google PageSpeed Insights tools, the site gets 91/94 points, which is great result for CMS driven website.

This was also a good exercise to practice because you can learn techniques to apply to other websites.

Share this topic:

Most recent

The Essentials of Effective Ecommerce Success
4 min. reading

Essentials to Ecommerce Success

Angle180 had the privilege of being featured in the FabShop Magazine Direct. This edition came out in September 2017 and featured an article titled, "Keeping up with e-commerce".

Continue reading

Let's work together

Got an interesting project and would like to work on it with us?

Get in touch