Preload layout.css and defer jquery-1.11.2.js for remove eliminate render-blocking resources list

Developer Support CMS Development
1

Hi Guys,

First: I’m trying to improve LCP and CLS, and I want to preload layout.css and defer jquery-1.11.2.js since is a bit blocking rendering content. Since absolute URL layout.css is added dynamic.

https://7052064.fs1.hubspotusercontent-na1.net/hubfs/7052064/hub_generated/template_assets/DEFAULT_ASSET/1740777433489/template_layout.min.css
how can I catch that url and preload.

Second: Add defer tag in my jquery-1.11.2.js file added from Setting > Pages > header. But I’m not be able to add defer or asycn tag into it.
Both files are coming in every page so thats why my LCP score goes down because of this URL. Please any one have idea how to resolve this issue or added preload and defer for mention URL.
Here is my link below:

Amit_Mallick_0-1740978687820.png
Amit_Mallick_0-1740978687820.png1366×768 137 KB

Amit_Mallick_1-1740978754902.png
Amit_Mallick_1-1740978754902.png1366×768 196 KB

Amit_Mallick_3-1740978969338.png
Amit_Mallick_3-1740978969338.png1366×768 165 KB

Thanks
Amit Mallick

2

Hi @Amit_Mallick

First - The layout.css file is part of HubSpot’s theme, which helps set up the page layout. If you remove it, the layout may break, so it’s better to keep it. If you don’t want to keep the jQuery file, you can delete it, but remember—any functionality that relies on jQuery will stop working. You’ll need to rewrite those parts using plain JavaScript. There are a lot of issues after the page loads. Try fixing whatever you can and then check how much the performance improves. For LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) issues, we’re sharing a reference link that explains what they are and how to fix them.

Second - If you want to add preload, async, or defer, you can do that in the base file or go to Settings > Pages > Header and add the necessary <style> and <script> tags directly.
Apart from our custom code, HubSpot also loads third-party jQuery and CSS files. Try to avoid adding extra third-party CSS like Bootstrap unless absolutely necessary. Use JavaScript instead of jQuery where possible—this helps improve page speed significantly.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

3

Thanks @GRajput
I just want to add preload in my layout file so that rendering block issue gone. Do you have any idea how to add rel=preload on layout.css file.

4

Hi @Amit_Mallick

You can add preload in your HTML or base file.
Just use the following code:

{% require_css "path/to/your/layout.css" with { preload: true, as: 'style' } %}

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!