Is your HubSpot website slow and/or failing to generate leads? Chances are it's not optimised correctly. In this blog, Huble Digital's Senior Front-End Developer, Francesco Brizzo, shares best practice tips and his advice on how to improve your HubSpot website's speed.
How many times have you heard people complaining about their brand-new HubSpot website despite investing a lot of time and money into its production? You might have heard them complaining about how slow it loads or the fact it doesn’t generate any leads.
As avid HubSpotters, we at Huble Digital know that Growth-Driven Design (GDD) and Inbound Marketing are the answer to generating more high-quality leads. GDD allows us to develop strategically effective, prospect-orientated websites in less than 13 weeks, and Inbound ensures that our marketing collateral appeals to our target audience.
But while we have been there, done it and got the t-shirt, those just getting started with growth-driven website development might miss something incredibly important, which is ensuring their website is fast enough to generate leads.
"Is your website fast enough to generate leads?"
When I say “generate leads” I am not talking specifically about the conversion process, but rather how long a website page takes to load before it can be interacted with. The fact is that a slow website will affect the user experience, which in turn will reduce the website’s ability to convert visitors.
Page load time is an incredibly important metric to keep in mind, especially when it comes to optimising a website for mobile users. Furthermore, as mobile traffic exceeded that of desktop in 2015, and mobile traffic will represent two-thirds of all web traffic in two years, a mobile-optimised website is a must for every business.
But while, it’s common practice to build and create websites with mobile responsiveness in mind – it’s also important to test the website’s speed on something other than the office’s 4/5G connection.
Testing a website on a high-speed mobile connection produces a biased view of its performance. On high-speed connections we don’t notice the loading problems that might be evident on slower connections, and not taking this into account will result in deteriorating website metrics and the loss of potential leads.
Mobile speed is at least as important as mobile responsiveness, so websites should be developed with that in mind. You could have the best-looking website but if users cannot access, read, scroll through or interact with it, you will not get any conversions.
And that’s not all. If you care about SEO (well, you must 😊) be aware that a slow website could affect your ranking on Google as it is considered a clear ranking factor since the implementation of Google’s mobile-first index in 2017.
Now that I have highlighted just why website speed is important, I am going to share some best practice advice and actionable tips to help you increase your HubSpot website speed.
At Huble Digital, we recommend that HubSpot website pages load in under five seconds, so let’s see what you can do to achieve that.
Test. Test. Test!
Whatever you do, testing is important!
You should test a web page’s speed before putting it live and then keep an eye on it afterwards if you’re planning to add new content. Thankfully, there are a bunch of tools that you can use to test its performance.
Here are some of the most popular:
A Google tool that reports on the real-world performance of a page for mobile and desktop devices and provides suggestions on how that page could be improved.
Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimisation recommendations.
A Google Analytics report that lets you perform detailed analysis of individual page performance.
Image and video: handle with care!
The file size of an image and video will influence page load time, the larger the file the longer it will take for a web page to load. Here are some things you should avoid when working with images/videos for the web.
Do not upload the highest-quality version – High-definition images use a lot of details that are simply not rendered on a screen, so a 5 MB image will just slow down the web page it’s on. Instead, use smaller and compressed versions of your assets. The web has plenty of compression tools – such as tiny png and tiny jpg - which you can use to compress and optimise your images without a big loss in quality.
Do not use larger specs - Sometimes we upload images and video regardless of their dimensions because we know that the cascading style sheets (CSS) will screen-render them to the right scale. However, even if the stylesheet adjusts the image or video accordingly, it’s good practice to ensure images and video are sized to the dimensions you need (otherwise, you may end up having huge, banner-size images or video rendered in a small 150x150 box).
Do not use the wrong format – Image and video formats are not created equal, some formats should be used for quality, whilst others can be used to reduce file size. Always test between the different formats to find the best compromise between file size and quality.
Learn more about how to compress your HubSpot images in bulk.
Have you compressed your code?
Most of the pages across the web are built using the following three languages:
HTML - Hyper Text Markup Language, which sets the content and structure of a page (this includes things like headings, paragraphs, etc).
CSS - Cascading Style Sheets, which set style and presentation (this includes colours, fonts, spacing etc).
JS - JavaScript, which sets the way users can interact with your website (this includes things like navigation, widgets, forms etc).
Same as writing, coding languages can be written using various styles.
Think about the difference between a novel and a newspaper article; in a novel, you would provide the reader with as much detail as possible, whereas newspaper articles are often concise and to the point.
Writing code for mobile should be similar to writing a newspaper article; the shorter the code is, the less time it will take for a browser to download your web page. Mobile-friendly code should always be compressed.
Generally, you can compress the code by reducing the number of comments, irrelevant characters, redundant properties or unnecessary code. Alternatively, if you’re not the coding type, you can use an online compression tool depending (on the code you have used) like CSS Minifier and JS compress.
Have a taste of AMP
If you are considering testing Accelerated Mobile Pages (AMP) on your HubSpot website’s blog/news sections, now is the time.
Basically, AMP enables a series of design and coding principles that improve the user experience and browsing on mobile devices. By switching applicable web pages to AMP, you can have those pages load in less than two seconds. Check out this article if you want to learn how to enable Google AMP for your HubSpot blog.
A bit of back-end knowledge...
Please do not run away, I am not going to ask you to look after your servers. However, when dealing with a slow website, there are some technical concepts worth knowing in order to pass specific requests to your IT department:
Browser caching - When a user connects to your website, your website shares instructions on what web content the user’s browser can save locally so that data doesn’t need to be downloaded the next time they visit. This process is called browser caching. You can use browser caching to increase page load speed by storing all the static assets that you have, such as images or JavaScript, locally in the user’s browser.
Time To First Byte (TTFB) - Each website is hosted on a server (host), which means every time you connect to a website you send a request, the server acknowledges that request and sends the page back to you. This process, which normally takes less than a second, is called ‘Time to the First byte’. If there is a problem with your server, page load speed might be influenced.
Redirect Chains – Now and again you might need to set a HTTP 301 redirect to move web page visitors to a new page. However, if you do this multiple times for the same page, you may end up creating a loop. For example, you first redirect page A to page B, then you redirect page B to page C. This means that, if you jump on page A, you will be redirected to page B and then finally end up on page C. These long chains can really affect page load speed, so you might want to set each page to jump directly to the last one. For example, both page A and page B should point to page C.
Now that you have a good overview, you can take action and start testing your page speed.
Please note that, even if metrics such these might sound a pure technical problem, marketers should really care about as this will have an impact on your conversion funnel and metrics.
Is your HubSpot website slow?
Book a consultation with one of our experts.
