Hi, I’m cleaning up my site and noticed two things with CTAs:
They all have an inline style=“border-width:0;” embedded.
They all call <script src=“current.js”> after.
How can I remove the unnecessary style=? and
How can I remove the script call and include it once per page in the site template?
@ScottWelch happy to help get the CTAs updated.
Assuming you’re referring to Legacy CTAs - there is a setting within the CTAs that allows you to add inline CSS.
From the CTA tool, select the CTA you want to Edit, scroll down below the Button Content and Button Style, then expand the Advanced Options:
This is where you can remove any CSS that was added to an individual CTA.
I also recommend rebuilding your CTAs with the new CTA tool and replacing them for each location where you’re currently using them.
As far as the JS, I’d have to see a live link with more than one CTA to see how the template is coded to determine why it’s loading the script more than once.
Thank you for the response, Jennifer. I understand having the editor to add css. I’ve noticed that for each of the legacy CTAs, it appears to create a css block that gets hoisted to the top of the page. not so bad. Most of the CTAs I’m working with have that - however, it appears that the module block adds the inline border-width:0 even when nothing was added to the block editor.
To be clear, will moving the legacy CTAs to the new CTAs help cure this? Also, for page performance, will the new CTA only include the current.js script call only once per page if I have several CTAs on the page? (most pages on this site have multiple since one is embedded into the global header). It gets called immediately following each CTA.
example url: Virtual Operations Center | TwinThread
You’re welcome @ScottWelch, and thanks for sharing the link.
I took a look at the CSS for your CTAs compared to other sites and it looks like the legacy CTA tool had an option to set border-width, which when left unset, defaults the CSS to 0 px.
It’s definitely CSS bloat, unfortunately, I couldn’t find a way to remove it - with that said, one line of CSS is likely not the culprit of performance issues, even with multiple CTAs on the same page.
The new CTAs aren’t running the same script as legacy CTAs - I don’t have a page with multiple, but checking the source code for the pop-up, it is loading individually…however, it is ld+json and lightweight compared to the old script. It’s unique per CTA rather than containing a huge amount of excess code.
My recommendation would be to test swapping out a single CTA on the page to compare the performance before and after. Then swapping all of the CTAs on the same page to further compare the results before deciding whether to implement across all pages.
With that said, I ran this page through Google Lighthouse and you have MUCH bigger fish to fry than the CTA script and CSS when it comes to performance - I wouldn’t spend a lot of time on CTAs before resolving the other issues first that will have a much bigger impact.
Your Largest Contentful Paint (LCP) is 8.6 seconds on mobile:
This has to do with how the background image is handled - it’s still there even though it’s not fully visible like it is on desktop.
Hiding this image on mobile would have an immediate impact.
On desktop it’s not as big of an impact:
It’s set to a background image and the file size is relatively small already:
it might seem counterintuitive, but if you set the background image to be the full height of the viewport, Google will view it as a true background image and not ‘relevant’ content so it won’t impact LCP.
LCP is your biggest opportunity:
I would prioritize LCP, FCP, Speed Index, then CLS when optimizing this page.
Hope this helps, happy to help further if you have questions!
Jennifer - thanks so much for the depth and detail. I’m certainly looking at a solution to reduce LCP, FCP, and layout shift that can be repeated and maintained by my teammates. We’re tackling least to most complex and building for sustainability as content and pages are added over time. Thanks again!
