Mobile – Before
Mobile – After
Desktop – Before
Desktop – After
Technical and Design Solutions
How we achieved such a significant increase in performance with the same (sometimes more) content on the page:
Custom Theme
All themes in the marketplace are full of features (like a Swiss Army Knife) designed to accommodate as many different use cases as possible.
With a Custom Theme we do one job, and one job well. We customize the code to make the content more consistent (within the brand envelope) and fast.
Custom Modules
Similar to the themes, the marketplace modules are designed to be as flexible as possible, for as many customers as possible.
We coded custom modules to do single jobs effectively and efficiently. Custom modules work quickly and easily, and they optimized for as many devices as possible using a "responsive" (mobile friendly) design.
Custom Templates
We created a complete set of Custom Templates for each theme:
- Homepage – this page is usually unique
- General Page – we remove all the superfluous templates with default content
- Landing Page – a typical Landing Page has no menus, nor distracting footers, so the visitor is not distracted.
- Landing Page with menus – this Landing Page is similar to other site pages but doesn't appear in the sitemap, nor Google (unless it has inbound links).
- Thank You Page – a Landing Page with menus, always hidden from search engines.
- Blog Listing Page – a collection of Blog Posts, filterable by tags.
- Blog Page – a single Blog Post, typically with a sidebar for related content.
- System pages – 404 Error page, 500 Error page and other system pages.
Image Compression
We used specialized tools that compress images significantly, without compromising quality. HubSpot does a good job of optimizing images and uploading pre-compressed images, without metadata, makes the images even faster.
Icons vs Icon Fonts
Loading Icon Fonts (e.g. Fontawesome) in your website slows down the page and can create Cumulative Layout Shift (CLS). We prefer to optimize individual SVG files and lazy load them as images to improve performance.
Branding vs. Creativity
When designers create brands they spend hours creating a set of layouts, colors, fonts and styles to represent your brand. With a Custom Theme we can implement the designers Style Manual so you can quickly create content that’s on-brand. This also saves time for the content creator because the fonts and colors are preset.
Website Theme Guide
As part of the Custom Theme Webalite delivered a page, in the HubSpot CMS, showing all of the features of the theme including Templates, Custom Modules, Colors and Typography.
This guide makes it easy for the team to see what’s possible in the HubSpot CMS.
Content Migration
Because the previous theme used older HubSpot Templates (before Drag and Drop Templates) each page was manually upgraded to the new theme.
During the migration we were able to ensure all the existing content was transferred and the styles updated.
Responsive Design
We implement a Custom Theme that automatically adjusts to different device sizes (responsive) so people using the HubSpot CMS can focus on creating excellent content rather than juggling technical issues.
We recommend Responsively.app to test designs simultaneously, on different screen sizes, before testing the design on real devices.
Frequently asked questions about HubSpot and Core Web Vitals
Why aren’t all the numbers in Core Web Vitals Report 100% after the upgrade?
- You can get a perfect score by simplifying everything and reducing content until you have very little left on the page – we worked on a balance of content, design and user experience.
- We chose to use external systems for analytics, social media and advertising e.g. HubSpot, AdWords, etc. All these external scripts slow down the page, but the benefits outweigh the performance drop.
- We like to balance ease of use for the content creator so they can easily add content. For a technical expert it is possible to make the page faster but the time involved typically outweighs the gains.
Why are the speeds different for Mobile and Desktop?
The download speeds, and processing speed, on a mobile phone are significantly less than a desktop. Google will always prioritize mobile performance, and content, because most people view web pages on their mobile phone (even if your website has significantly more desktop traffic).
Why do the speeds vary at different times?
The speed tests vary and represent the actual inconsistency of the internet. While this is frustrating to work with, it’s completely normal. The Real Time data gives you a better picture of what visitors are experiencing.
What is the Real Time data?
Google uses Real Time data, from real users (that have given consent), that use the Google Chrome Browser. The data shows the actual experience of visitors using Google Chrome.
This data displayed is the average from the last 28 days so it will take a while to update after a website redesign.
Why does the Cumulative Layout Shift (CLS) differ from Mobile to Desktop?
The website uses a narrow font, which must download before it can be rendered (the first time you view the page – after that it's cached). On desktop the download speed is much faster, and it renders faster, so there is less perceptible change.
How can I check my website?
Visit Page Speed Insights and enter your URL to see a real time display of your page's analysis.
How can I optimize my website?
If you would like to discuss your website and how to optimize it for visitors and search engines please book a meeting with Mike Eastwood.
Webalite is a certified HubSpot Partner Agency & App Partner
