WEBFLOW WEB VITALS: Optimize scripts & third-party code

[@gkisela]

Hey Bro, I have 3 quick questions! For this method, is it enough to just put the code you gave on footer or do we also need to install the GTAG and follow their instruction to copy paste their code and opening? (Asking because I see that your Webflow project code area is empty). 2. I tested without installing the GTAG code on and although it did work as intended in which my script only run after I interacted, but I 'm still seeing the addressed problems on CWV. (Is it because I didn't install question no.1?) 3. I tested the project with this method on my iPhone with Private mode on, and it can't work? I tested with setting a timeout to for script to run even if no interaction after 5s. It worked on non private tabs, but on private it just couldn't. Is this just me? Thank you so much!

[@ognjenknaus2193]

I can't see the containers loading if I use the script. I am testing with Tag Assist Companion

[@janneparri]

It never occurred to me that one could lazy load GTM. This is awesome!

[@lumiousmedia]

😀thanks man. There are other options like creating a custom event when someone interacts with the page - but I find that method harder to manage.

[@rohitjawale766]

How about page load animations using gsap? It won't work if we added hero section animation using gsap

[@lumiousmedia]

Would those page load anims help with conversions? You asked a great question, but I do disregard page load animations as I don't see it a valid point for boosting SEO or conversions. If you still wanna have page load anims, I recommend not lazy loading gsap (put it straight to the footer code). I also recommend avoiding page load animations as these increase the first input delay, FCP, and overall UX. Indeed, it looks sexy, but hey...we're not here to make sexy sites. We're here to turn sites into salesmen. Right?

[@genwowowow]

Hi! Do you have a solution where we could also lazy load lottie files to prevent excessive DOM size performance hit?

[@lumiousmedia]

Not yet, buy you gave a great idea! I think it's possible with lozad.js. basically lazy load an entire div when it gets into view.

[@BorhanMediaWebdesign]

Thanks for the Video, do i still need to install the Google Tag Manager via the Head Code provided by the Tag manager?

[@lumiousmedia]

Nope. The solution in this video lazy load GTM. This works also good with any cookie cookie you have. If you put your GA4, and other tracking scripts as a tag inside tag manager - these scripts will only fire up when someone interacts with the page. But, if you still need some tools to load in the head like VWO for split-testing - I would then add these scripts in the head, without lazy loading them through GTM. Let me know if this make sense.

[@sachinRao15]

Awesome insights :)

[@randolphnovino3750]

do you have guide for wordpress sites? this is a very interesting approach

[@lumiousmedia]

for wp it's easier as you have full control over the server (unless you use a wp subscription). There are a few plugins that auto-minify and fix the critical CSS. One of my favs are WP rocket.

[@randolphnovino3750]

@@lumiousmedia does the GTAG process will work. can you provide a basic overview of the process just in case.

[@lumiousmedia]

@@randolphnovino3750 yep, I'm using this lazy-load thing on all my client's sites. And gtag works perfectly. Some might argue with me saying you need gtag to immediately fire up, but you know what? I tend to disagree here. Especially after Google Consent V2 which now gives us even mixed and inaccurate data. I should have a video soon on how I integrate gtag, GTM, and GA all combined.

[@matiasgarces2465]

Awesome! I have been looking for this solution for a long time. Question: This solution appy for any kind of framework? Ruby On Rails?

[@lumiousmedia]

Matias, it applies to frameworks that do use external scripts/code. If your code is bundled, chances are this won't work. I've made the video mainly for simple website hosting platforms like Webflow, WordPress, or any out there that allows to control the custom scripts you add on site. Does this answer your question, my man?

[@AbhayThakkar]

Thank you!

[@lucianokovacevic]

Thanks for the help! Is there a chance you just clarify this part on 05:04 where you take the script and then paste it in the minifier tool? How can we find the script using Chrome insights and which one should we use? I'm new to web vitals (non-developer) and haven't really done this js optimization before.. Everything from here is a bit puzzling.. This would help a ton!

[@lumiousmedia]

Sorry for late reply. Here's the loom: www.loom.com/share/093e0520077d49c88dc4d02ef551785f Let me know if this answer your question

[@ugamochi]

thanks! !

[@lumiousmedia]

You're welcome

[@bst-football]

What about adsense codes and also can normal jquery codes be added to the tag manager?

[@lumiousmedia]

Yep, you can easily have adsense codes. And actually I'd highly recommend using this bc it will help you with the CLS. AS for the jquery, just make sure the code uses ES5 syntax. GTM does not allow ES6. They are plenty of converters online, but I usually just ask chatGPT to convert it for me. Let me know if this helps.

[@bst-football]

@@lumiousmedia thank you for your quick respond, have up to 3(ads) adsense codes in each page and they are placed manually at different section of the page, please how can this work with tag manager then?

[@lasyyca]

I dont have GTM, do i only need to create account and paste a code or ?

[@lumiousmedia]

Yep, you'll have to create a GTM account. That comes free

[@lasyyca]

@@lumiousmediaand that's it. I dont need to do anything on him because i saw some stuff on your manager?

[@akilorosky]

if I have GSAP loading animations would they still work with this method?

[@lumiousmedia]

Yep, they would work but only when you start interacting with the page, like hover.

[@akilorosky]

@@lumiousmedia thanks!

[@akilorosky]

@@lumiousmedia just so I'm understanding correctly, if I need GSAP to animate items in at the time of page load then it won't work but anywhere else is fine?

[@lumiousmedia]

@@akilorosky yep. If you animate initially (especially text), you will have issues with accessibility. I made the plugin to work after the DOM is ready so browsers and crawl bots could the text. I will probably build a data attribute that makes animation play on page load, but for now - I highly recommend you animate items below the fold, or at least add a page loader wrapper. Let me know if this make sense.

[@frankdrolet9439]

I"m pretty sure you're wrong when saying that Webflow doesn't minimize the code since there is an option to turn on and off minimizing CSS and Javascript within Webflow

[@lumiousmedia]

Nope, Webflow does not minify custom code. You have to manually minify it