Core web vitals and CMS Hubspot

[AlexanderData]

Tengo una consulta y espero que la comunidad pueda ayudarme.

El CMS de hubspot cumple las condiciones y las métricas de CWV (Core web vitals) y donde las establece dentro de sus metricas de media y como ayuda el CMS a esto.

Estas son las metricas que utiliza CWV:

Largest Contentful Paint (LCP)--> Good 2.5s | Needs improvement 4s | Poor >4s
First Input Delay (FID)--> Good 0.1s | Needs improvement 0.3s | Poor >0.3s
Cumulative Layout Shift (CLS)--> Good 0.1s | Needs improvement 2.5s | Poor >2.5s

---------------------------------------------------------------------------------------------------------------------------

I have a query and I hope the community can help me.

The hubspot CMS meets the conditions and metrics of CWV (Core web vitals) and where it establishes them within its average metrics and how the CMS helps this.

These are the metrics that CWV uses:

Largest Contentful Paint (LCP) -> Good 2.5s | Needs improvement 4s | Poor> 4s
First Input Delay (FID) -> Good 0.1s | Needs improvement 0.3s | Poor> 0.3s
Cumulative Layout Shift (CLS) -> Good 0.1s | Needs improvement 2.5s | Poor> 2.5s

[fvigeant]

We're considering abandoning HS CMS becuse it performs poorly on google core vitals. For example we cannot control: 

1) unused javascript =>  it is not possible, because most of the js files are default in HubSpot 

2) eliminate any render-blocking resources => dependent of Hubspot

[dennisedson]

Hey @AlexanderData, 

Not totally clear on what the exact query is, but I can confirm that the introduction of the CMSHub has allowed for developers to be in more control of aspects of the site that they were not able to control previously.  

Here is a great community post that started recently that jumps into page speed specifically on HubSpot.  I encourage you to read and if you have any additional thoughts, participate in that thread! 

Here is a knowledge base article that is a good resource and is constantly evolving.

Speaking specifically to how Google treats the CWV,  it appears that they are adding page speed and mobile friendliness are the two largest aspects that will be including in their algorithm.  

A few quick tips

1: Remove the default version of jQuery in the settings.  If you need jQuery, use a more up to date version and make sure it is loaded in your footer

2:  Take advantage of the functions that HubSpot provides.  One that comes to mind (and one that I could not live without) is the resize_image_url function

3:  Try to limit third party scripts as much as possible

I hope that I am sending you in the correct direction with this response!  

Best,

[Ntbrown]

@dennisedson I think what they're getting at is HubSpot is still an extremely poor CMS for anyone even remotely cocnerned with performance and web performance metrics. (So.... everyone). The CMS hub in no way fixed this and has a very long way to go.

Why? Because, it's near impossible to acheive decent scores in the metrics he listed simply due to the way hubspot is structured. The recommended way to acheive those is....

1. Inlining critical css

2. Async loading any css that isn't critical / deferring non-critical resources that cause render blocking behavior

3. As you mentioned minimizing 3rd party scripts and extreneous javascript which... is really quite an ironic suggestion considering HubSpot inherently loads a half megabyte of extrenous cruft just for the CTAs and tons of other things to function not to mention the seconds this adds to page load (full actual load times).

4. Optimizing everything above the fold and async loading everything below it (images, iframes, ...). Even newer css properties that help do this now.

Nobody can do any of this and a ton of other things I didn't even bother mentioning until HubSpot significantly expands their developer expereince. Until then.... any site built here will just be supbar in an entire range of metrics.

Why? Well for starters even attempting to fix 1. is basically downright impossible unless anyone wants to manually add it on every change / update since no build pipelines or internals are exposed to be able to programatically do things like this. Sure there's the local dev tools, but that still isn't a solution. Others follow similarly.

To even begin to fix 2 / 3. You have to hack the entire head the {{ standard_header_includes }} by regexing half of it away and custom rendering anything you stripped out for performance opts. An entire host of other things.

4. And other similar things are possible but are still a massive headache. Image optimization onl goes so far in HubSpot because... again lacking features.

To draw an analogy.... Using HubSpots CMS for performance and a "good" website by todays standards is like drag racing in a prius.