Digital agencies' best practices about modern web development, digital and inbound marketing.
Speed Could Make You A Winner Or Loser: Web Page Optimization Tips For HubSpot COS/CMS
The most dreaded moment for any marketer is when they have placed all the right things on the webpage for lead generation and the time taken by the page to load makes the user go in meditation mode. It hits the bottom line of your business very badly as your webpage fails to deliver message in a suitable time-frame.
Regardless of what your goals are, a fast site is an inevitable factor in every UX. A satisfying user experience is instrumental in higher conversions.
The Relation Between User Behavior & Web Page Speed
- 47% consumers expect a web page to load in 2 seconds or less.
- 52% consumers admitted that their site loyalty depended on the page loading speed.
- 14% begin shopping at another website when distracted as a result of slow loading speed.
- 73% of mobile internet users have encountered a website that was too slow to load.
In simple terms, the abandonment rate will rise drastically when the page speed is not given the due attention.
Web Page Speed In HubSpot
Inbound marketing propagates a user-centric experience and the whole HubSpot marketing system revolves around it. The marketing or the web development platform, everything is centred on providing an ultimate user experience that translates into marketing success.
Within the HubSpot marketing platform, the page performance section gives marketers all the information they need about a particular webpage from visits to leads generated. It also shows a warning error in case of long page response times.
The system won’t prompt you about where your page load is failing. In such a scenario, you will need a list of elements that could be optimized on the HubSpot COS/CMS for optimal page performance.
HubSpotters might still be skeptical about attaining the same speed optimization options as they get on other platforms. However, our monks are already living the HubSpot life and have figured out the way to breathe life into the webpages to ensure optimal performance. WebbyMonks have a defined checklist when it comes to optimizing any webpage.
- 1. Font optimization
- 2. Image Optimization
- 4. Optimization using CSS
- 5. Layout optimization for Mobile
- 6. Interactivity for desktop and Mobile
- 7. Content for Desktop and Mobile
Let’s have a look at each element to understand how we could optimize them on HubSpot COS/CMS:
- Font Optimization: Webfont optimization is crucial for the overall performance of a page. Some fonts tend to block the rendering of the text, however web-fonts is not the only reason for slow rendering. Optimized fonts could be used based on a judicious strategy on how they load and apply on the page. This could reduce the total page size and optimize the rendering. Hosting fonts on HubSpot is very simple as you could create a dedicated fonts folder on the HubSpot file manager. When you decide to use them, you could simply copy the path and use them in CSS files.
Image Optimization: There are two main factors that you need to oversee to attain optimal page performance:
- a. Image compression: Any free online tool could help you compress the image. However, you will need to ensure that the quality of the image is not compromised as it could negatively affect the UX. The reduction in the size of image is directly relational to the decrease in page load time. For all the images that you have uploaded on HubSpot, you could change the dimensions at page level directly from the tool provided on the page editor.
- b. Grouping multiple images: A web page with multiple images could take a lot of time to load. Hence, the CSS Sprite technique comes in to bring together all the images to make a single image. On HubSpot COS/CMS, editability should be taken into consideration as sprite technique could not be applied for images that could be updated or changed, for example the background image with editable feature. These images will change at all other places where they have been applied.
- a. Location: The tracking and analytics code should be inserted within the head tag so that event tracking is not missed. In order to enable quick loading of pages, place the code before the end of the footer so that all the elements of the page have loaded before calling the JS code.
- b. Minifying & Clubbing: Though HubSpot provides minified version file and enables their hosting, multiple files could be clubbed as one file in order to reduce the load time.
Layout optimization for mobile: All the pages build on the HubSpot COS/CMS platform, are automatically optimized for mobile devices. However, it is recommended to limit the layout on mobile devices by customizing it so that only the vital components are visible to the audience and they could interact with the website if they need to load more components. A load more functionality is a good option. This will reduce the load time and show the vital components of the webpage to the users.
Content optimization for mobile: Your website visitors might not be interested on every content on the page. Moreover, more content along with images takes time to load. Why not leave the decision on the visitors regarding the content they would like to consume. A small excerpt could be provided to visitors and if interested, they could simply click on the “Read more” option.
Interactivity for desktop and mobile: Interactivity does eat up the speed and it is highly recommended to use only those interactive elements that will guide the user throughout their journey on your website. The very common interactivity code they could have is either CSS or JS. Interactivity with CSS will be the lightest and fastest and the page loads very quickly. As compared to JS, interactivity built on CSS will help in keeping a check on the speed of page load.
With HubSpot COS/CMS, developers are able to achieve all the functions that are possible on other platforms. It might come naturally to overlook customizing for mobile as your websites are automatically made responsive. However, careful customization will optimize the page for mobile. HubSpot has made it hassle free for developers to make their pages perform well by providing features that they could utilize other than the code editor.
Latest posts by Dev Shah (see all)
- How to Provide Database Driven Dynamic Content on HubSpot Web Pages? - November 29, 2017
- HubSpot – Shopify Integration: An Inbound Touch for Your Shopify Store - November 9, 2017
- Are These Clear Indications That HubSpot COS Is HubSpot CMS? - October 27, 2017