How to Increase Your PageSpeed Insights Score On Your HubSpot Website

A few years ago, Google started including site speed as a ranking factor in its algorithm. More recently, Google started using mobile site speed as a ranking factor specifically for its mobile search results—which is much stricter on performance metrics. This year, Google has said they will be launching the mobile-first index. All this to say, website performance is more important than ever, especially if you want to rank (or keep your ranking) on that first page of search results when that mobile-first index rolls out.

I think it's safe to assume that the way the benchmarks are set up on Google's own performance tool, "PageSpeed Insights," is similar to the way site speed is measured in Google's search algorithm. So, let's make sure our site pages have as high of a score as possible!

What is the Highest PageSpeed Insights Score Possible on a HubSpot Site?

We can figure this out by creating a new coded template with nothing but the bare minimum required in order to be a valid HubSpot page. Here is the answer:

There you have it, folks. The highest possible PageSpeed Insights score on a HubSpot hosted page is 71 on mobile and 89 on desktop. It's not perfect, but now we at least have a goal to shoot for. The reason for these scores is the fact that HubSpot loads jQuery and it's main CSS file public_common.css synchronously in the head, rather than asynchronously or after the content. (HubSpot will soon be rolling out automatic CSS and JS file concatenation so this score will improve over the next few weeks automatically, woot! 🎉🎉🎉).

How To Achieve the "Perfect" Score on Your HubSpot Website

Here are all the factors that are used in PageSpeed Insights, and how to optimize for them on a HubSpot site:

Remove Render Blocking JavaScript and CSS in above-the-fold content

First off, all of your website's JavaScript files should be placed in the footer. Things like HotJar, Google Analytics, and any other .js files should be moved from the header to the footer.

Secondly, you should defer any non-critical stylesheets so only the content above-the-fold is styled. To defer a stylesheet, you should use rel="preload" in your external stylesheet link. As preload is a newer feature in CSS, you should also include this polyfill to support older browsers. HubSpot adds a third file to the head—layout.css—for templates built using the visual builder. For the best possible score, have your developer use coded templates that don't require that file.

Avoid Landing Page Redirects

Let's say you changed a page URL from example.com/my-gnarly-page to example.com/my-awesome-page, and then later to example.com/awesome-page. This will create a redirect chain that causes two redirects to occur before the page can load. Fix this by linking directly to the current URL and updating your URL Mappings destination to the final URL.

Enable Compression

HubSpot takes care of this for all HubSpot hosted resources—thanks HubSpot 🙌 . If you're loading 3rd party resources, or loading static resources (such as CSS or JavaScript through the design manager), then you may want to consider moving them to your HubSpot file manager to take full advantage of HubSpot's CDN, if possible.

Leverage Browser Caching

This is pretty much the same advice as above. HubSpot takes care of this for you on all resources loaded from the file manager. If you're loading 3rd party files or static files through the design manager, consider moving them to the file manager.

Optimize Images

Unoptimized images are the primary reason for slow websites. If that's the case, the first thing you should do is resize the image so the width matches the maximum width displayed on your site. As a rule of thumb, a width of 1920 pixels for full-width background images and a width of 800 pixels for content images. Once resized, run the image through an image optimizer such as ImageOptim or FileOptimizer.

For more in-depth recommendations on improving your site's image performance, I highly recommend reading the Essential Image Optimization ebook from the Google engineer Addy Osmani.

Minify CSS

If you're using the design manager for your CSS files, then HubSpot will minify your file for you as long as there are no errors in the sheet. If your stylesheet file does not automatically end with .min.css, then you most likely have an error in your stylesheet that needs fixing. Additionally, if you use the file manager, then make sure to minify your files before uploading.

Minify HTML

This is another one of those things that HubSpot takes care for you 🎉 🎉 🎉.

Prioritize Visible Content

This will show up when you have too much stuff in the head of your site. This is generally fixed when you move your JS files to the footer and make sure all the files are being minified and compressed.

Reduce Server Response Time

There's not much you can do here besides making sure you aren't using any crazy HubL queries. For example, if the page is powered by HubDB, be sure you're only querying a max of 100 rows or so. Otherwise, server response time will start to increase dramatically.

Minify JavaScript

If you're using the design manager for your JS files, then HubSpot will minify your file for you as long as there are no errors within it. If you're script does not end with .min.js, then you most likely have a syntax error that needs to be fixed. If you use the file manager, then make sure to minify your files before uploading.

The Results

Following all of the advice above, it is possible to optimize a HubSpot page that achieves that "perfect" score, and here is the proof:

Go forth, optimize, make your website pages blazing fast🔥🔥🔥 , and be proactive when it comes to Google algorithm changes in 2018!

NOTE: PageSpeed Insights recently updated to version 4 which includes "Speed" in addition to the general optimizations covered here. Stay tuned for tips on improving your PageSpeed Insights speed score.