How to improve your Hubspot page speed using 5 simple techniques.
Introduction
As you may know, google recommends page should not load for more than 2 seconds. Search engines, particularly Google, place heavy importance on site speed. So we all want our websites to perform better and load faster. But most of the time when you end up working on your website pages and when you check the page speed they are not on your expectation, especially the mobile performance. So we will let you know how you can improve your website speed by using basic techniques.
Page improvement is a vast subject so we are not covering everything here because we are trying to make it.
We assume here you are a HubSpot user and if not you will still get benefit from this article. In this article, we will cover the following items:
- Lazy loading
- Optimized images
- Small layout changes you can do to improve mobile performance.
- Animations
- Integrations
1. What is Lazy loading?
Lazy loading comes around when you want to defer your images so the browser loads them when they are needed to show on the page. Let’s make it simpler when you have lazy loading set on any image and the is big your page loading will not stick loading that image page while deferring that image and showing that after page load.
Add lazy class to your image in Hubspot
It's easy HubSpot gives an option in the image fields you can set it on using the lazy load options. Make sure you set it on for all the big-size images. This will increase the overall page performance.
2. What is image optimization?
Image optimization is the process of reducing image size without losing image quality.
Optimize your website images
You can use online apps for it or do it yourself using adobe photoshop. We are adding a link here to an online image optimizer https://squoosh.app/
You can also use the HubSpot image editor to reduce the image size by setting the exact width and height on which the image is showing on the page.
3. How you can improve page speed using layout changes?
You can rearrange or remove elements to increase page speed on mobile.
What changes you can make to improve mobile speed?
Most of the time big banner images affect the mobile speed score. So to get rid of this problem you can simply hide the image only for the mobile by adding a simple CSS query.
Let’s say you have a banner with the image form and banner title and you are showing the image as the first item what you need to do is show the image as the last item. Small layout changes can increase page speed because texts and forms load faster than images.
4. Animations affect the page loading speed too.
There are different types of animation libraries out there some of them are lightweight but some of them put a negative effect on your page speed so try removing them and checking your page.
5. Integrations
Not all but some of those add third-party scripts to your pages. How do third-party scripts affect your pages? Actually, scripts are added to the head of your pages and obviously, if you have extra network requests for loading scripts then the page load time will increase.
Conclusion
By implementing the things above you can improve your website speed. As we mentioned in the beginning there could be many reasons why your page is loading slowly.
If your desktop performance score is above 85 and your mobile is above 65 then you are good, there is room to increase more but we are giving you an average number. Please note that follow HubSpot’s recommended testing tools.
In the article above Hubspot recommends the following tools for testing. Some of them are paid.
- Google PageSpeed Insights
- https://tools.pingdom.com/
- https://gtmetrix.com/ ( We highly recommend this tool it’s better than the google page speed insights )
- https://www.webpagetest.org/
- https://sematext.com/synthetic-monitoring/
- https://www.uptrends.com/tools/website-speed-test
Contact Us
If you are still having trouble finding out the reason which is affecting your page speed.
Contact us at team@expandable-solutions.io for a free consultation. We are Hubspot-certified developers and solutions providers.
