In this blog post, we will identify the key points on how to improve your page speed and we will follow the steps that we implemented to better the page speed on our own website, Clickray.eu.

(Source: Statista)

We live in a time when having a website is inevitable for your business to flourish. By 2019, there were around 1.7 billion, and this number will surely continue to grow. If you want your website to stand out, a real challenge awaits you. Besides the appearance itself, you also need to ensure that it loads quickly, which will affect the number of satisfied users who are more likely to buy your products or fill out contact forms. In other words, the speed of your website translates into money - a good example is the Amazon website.

What is Page Speed?

Let’s begin by defining the page speed - it is the amount of time that it takes for a web page to load. A page's loading speed is determined by several different factors, such as the page file size, image compression and the site’s server.[1]

(Source: The Sempost)

If users have to wait a long while for the page to load, they often give up on entering the page and look for another alternative- meaning that people want to have everything for yesterday.

Analyzing your Page Speed with Google PageSpeed Insights

There are a few ways to measure your speed performance. One is through the Google PageSpeed Insights. It’s important to note that whilst your score on Google PageSpeed Insights is low, it is not an accurate reflection of the actual load time of your website. Google identifies opportunities for you to improve your site speed and measures your site against their own best practices.[2] The more opportunities you meet, the higher your score is. However, it doesn’t directly correlate with the overall speed or the ranking of your site.[3] Often, Google will present opportunities for improvement yet the page speed for the end-user is still very fast. Trying to make improvements beyond that can be an exercise in diminishing marginal returns in some cases.

Having said that, it’s important to take the recommendations advised by Google seriously and if possible action the items. It’s not always possible to action every single item suggested as you may not have the appropriate access to the resources, e.g., a script is called from an external service (like Twitter or Facebook). Generally, you’re best chances for increasing your scores are to consider the following:

1. 1. 1. 1. Implement Lazy Loading Images

Lazy Loading is a concept where you control the rate at which the images/videos/assets contained on your site are loaded. For example, there can be 100 images displayed below the fold that have to be loaded (taking time and bandwidth) when the first time someone visits your site. However, it makes no sense to load them as they’re not visible unless someone scrolls below the fold. Therefore, you can implement “lazy loading” to download the image as they come into view. There are a number of third-party JS libraries that can be considered to help you implement lazy loading across your HubSpot sites, such as LazyLoad or LazySizes.

2. Optimize Images

Where possible, I’d always recommend keeping images in the correct dimensions. For example, if you display an image at a width of 500px and then you upload an image that is 5000px wide. This takes longer to download and can impede page performance. It’s also worth considering using other types of image formats that offer better rates of compression, particularly WebP and JPEG 2000. It’s important to note that support for these file types is not provided across all browsers. Therefore, I’d recommend using a JS library like Modernizr to check if they’re supported and if so load them in that format. Otherwise, serve a fallback image in a traditional format like PNG/JPEG.

3. Reduce Third-Party Scripts

There are lots of amazing third-party tools out there that provide additional functionality to your website. It’s worth noting that the more third-party scripts you load into your website, the more it impacts page speed as they need to be requested when the page loads. It might not be realistic to exclude all third-party scripts you use but I’d certainly advise auditing what you are using and seeing if it’s necessary.

4. Load JQuery in the Footer

If possible I’d recommend loading the JQuery library in the footer of your website. Often when this is loaded in the head section, it can delay the rest of the page loading. Instructions on how to do this can be found here.

HubSpot & Page Speed Optimization

If you have a website built on HubSpot CMS, it also offers methods on how to optimize your site’s speed and performance. But there are also limits to what’s achievable with HubSpot in terms of speed. Its CMS was created in minds of less technical people, such as marketers and not necessarily developers, so it prioritizes analytics and ease of use first by allowing easy editing of pages (e.g., drag-and-drop modules), which requires a large amount of code in order to manage its functionality. The more code there’s on a page, the more weight the page has. These pages then will rarely achieve the perfect 100 scores. 

There’s a lot that HubSpot does natively to improve the page speed (e.g., text and image compression, SSL, JavaScript minification, domain rewriting, and many more)[4] but beyond hard-coding pages for maximum speed, there are certain limits to be aware of for a site that uses a lot of content and tracking. A battle for page speed is a trade-off between functionality designed for marketers and fast performance. That is why HubSpot, and another similar softwares, is very challenging to use when it comes to page speed. 

Alright, so we understand the best ways to improve your page speed. Now, that’s where HubSpot comes in. There are several functions that HubSpot has built into their system that will help you improve your page speed - that is what makes their CMS platform so great for building and maintaining a website. There are also other several factors that we, ourselves, need to alter in order to improve the page speed. 

Below, we list several features of HubSpot as well as factors that we have control over. The table is based on HubSpot’s ​​”Site Speed and Performance: What You Can Do, and How HubSpot Helps” article. If you want to learn more about the specific built-in HubSpot factors and the ones that we, ourselves, can influence, click on the link above to read more.

So once you’ve got your website in HubSpot CMS, you don’t need to worry about HubSpot’s native elements that help to speed up your sites as they are done automatically. On the other hand, there are the elements that HubSpot doesn’t automatically run so you need to take care of them. Hereby, we present you a case study done on our own newly redesigned website, ClickRay.eu, to show you what easy steps you can take in order to speed up your pages. In our case study, we focused on the images that would help us increase the speed of our website by ​​deferring offscreen images (Lazy Loading) and optimizing images (size and format). Why? Because it simply presents the easiest route to improve the website speed without additional heavy-weight coding.

So, let’s get to it. The first step that we took in improving our website was to implement Lazy Loading. While comparing the two images, you can see we gained over 2s by implementing lazy loading (as pictured in the images below). Even though the number looks more, that actually makes a huge difference!

                       BEFORE IMPLEMENTATION                                           AFTER IMPLEMENTATION

Via Google PageSpeed Insights

The second step we took was to make sure that the image file formats are not only consistent but they are altered to WebP formats. Why? Displaying a large number of graphics on a page with an outdated format has a large impact on its quality. While throwing pictures with formats to the corner, such as .jpg, .jpeg or .png, you should definitely use formats such as JPEG 2000, JPEG XR or WebP which can reduce the file size by almost 90%. With a large number of photos, it really translates into a better user experience. Below is an example of how much you can save in image size and page speed simply by altering the formats (the savings depend on the number of images on a page, of course). 

Via Google PageSpeed Insights

The third step that we took was to properly size the images. Setting the correct values for the width and height of the images is also of no less importance. You should never set a higher value than the original photo as it will extend the loading time (see this link to learn more about properly sizing the images). It's also a good idea to keep the server response times fast (TTFB) for the main file since all other requests depend on it. You should take care of clean code because unused lines of code directly affect the longer reading time, which in turn leads to a delay in displaying styles or functions on our website (see this link to learn how to keep the server response times fast).

Via Google PageSpeed Insights

The last but not least step we took was to load jQuery in the footer. While all other elements do require knowledge in coding, this can be easily done by a non-tech person because it’s only about checking a box! For this, all we needed to do is go to the settings in our HubSpot account and follow this simple route: Tools -> Website -> Pages. Below the HTML codes, you will see a section for jQuery. Simply check the box to the left of "Load HubSpot's included jQuery library from your footer" and you’re all done!

It's also a good idea to keep the server response times fast (TTFB) for the main code-based document since all other requests depend on it. You should take care of clean code because unused lines of code directly affect the longer reading time, which in turn leads to a delay in displaying styles or functions on our website (see this link to learn how to keep the server response times fast).

How to load jQuery in the footer in HubSpot.

To sum up, if you want your website to load in the blink of an eye and for the users to visit your website more often and more willingly, you need to put some work into it. In the end, it will really translate into the number of finalized deals- the analysis does not lie. Hereby, I will show you how I managed to improve the loading speed of our ClickRay website by changing all the factors that I described above and all the factors that HubSpot improves for us from the get-go. 

BEFORE IMPLEMENTATION

AFTER IMPLEMENTATION

As you can see, the loading speed really has improved! I highly recommend you use the above-mentioned tactics and implement them onto your website. In the end, page speed really matters when it comes to gaining leads. And your leads won’t follow your path if the website is not fast enough.

Sources:

[1] Backlinko, "Page Speed and SEO", n.d. https://backlinko.com/hub/seo/pagespeed

[2] Ben Carver. "Your Pagespeed Insights Score Is Bad, and Why That’s OK". Pavlov Agency. 6 March 2019. https://pavlovagency.com/news/your-pagespeed-insights-score-is-bad-and-why-thats-ok/

[3] NDIC. "The Problems with Google PageSpeed Insights". 26 February 2018. https://www.ndic.com/2018/02/26/problems-google-pagespeed-insights

[4] William Spiro. "Site Speed and Performance: What you can do, and How HubSpot Helps". HubSpot CMS Blog, 13 August 2018. https://designers.hubspot.com/blog/site-speed-and-performance-what-we-do-and-what-you-can-do