Видео

Thanks a lot!

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.

Unfortunately, there's no direct solution to this. The library that Webflow is using for rescaling images (responsiveness) is old and buggy. I'm working now on a new lazy load & image rescale tool. Hopefully will be done shortly. But at the moment, you can try: 1. Click on the image inside Rich. 2. Click on the gear icon 3. Go to the Size and set to fixed width and height. 4. Save and re-run Lighthouse.

​@@lumiousmedia Thanks for the idea, and good luck with the tool!

Sam, send me a read-only link please on my email chris@thelumious.com. Might collapse for different reasons, including your browser.

I haven't built this feature yet. I'm sorry. Right now, the only way to delay an animation (or play after another) is to use the stagger feature.

Sent you an email.

Thanks

@@lumiousmedia Hey, same problem here :( Do you have a solution to share with us ? Thanks

@@fayazchatharoo I think May was able to find the solution. Can you share a read-only link with me via email? chris@thelumious.com

@@lumiousmedia Figured it out as well : every attributes needs to be put in place : "form-step", "form-button" and mostly "multi-step", otherwise it breaks the entire process

Really strange. I did not applied any changes. Can you send me a link or screenshot here: chris@thelumious.com

@@lumiousmedia Hey Chris, appreciate your response. I have reset everything for now, because I had to launch a google ads campaign to the landing page I mentioned. I will try setting everything up again this weekend. Ill go through the tutorial once more and will email you in case I get the same problem. Thanks again!

Can you send a link? Might happen because you don't have the full cache enabled in CF. So, sometimes, your browser hit a cached version that do have the purified CSS, and sometimes it doesn't hit. But I'll need your site link to tell you for sure.

Thanks

Glad it helped. If you'll spot any bugs, let me know.

Great to see it's working. Thanks for your support

Thanks, man.

I have to agree. Too many strategies and too many over-optimizing. Go through a 2000+ words article jsut to see how to do X thing which literally takes a sentence to write.

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.

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

@@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.

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

I'm using VWO. It depends on the product/business. I mainly work with SaaS companies. I ab test big things like: - Main headline (also called the offer) - Main menu navigation and traffic funneling - CTA text - Sales/ demo video. I split test one item at a time to see which change count for conv. increase, against at least 1k visit. Soon you realize 60-75% of all traffic are JS console issues, bounces, people staring like crazy at the screen, quick tab switching, and basically things you can't hypothesise.

yeah man, you're right. Especially if you want to visually explain a set of features that belong to a solution. Grad it helped you out. Tried using wf custom element but looks like there's more than jsut adding the wf tab classes.

@lumiousmedia I actually had very similar solutions, for marqee (mine was CSS + JS for cloning track/CMS - due to limit for CMS per page) and for tabs (almost the same) and the same with GSAP reusable animations. I "hate" webflow native IX, interaction management is kind of a nightmare at scale - once you start understanding GSAP) so i removed them all and start build on GSAP. But I'm a designer and then a webflow dev, so my scripts aren't that well organized :D I'm switching to yours! 🖤

@@arkadiuszpalki Yep, I'm also with GSAP. Clients don't touch the interactions, and we as devs must work with whatever it's easier and scaleable. Also found IX a nightmare. Especially when you have 5 different link blocks that have the same interaction. You then need to thing about using global classes to trigger animations, and when it comes to scale - it's hard. But I think WF will launch their own IX engine relying on gsap, just like Framer did. I wanted to build out a Webflow App which is a gsap replacement interface for webflow IX. Still thinking if this is a good app to have :D

Not at the moment. I'll do an update over the weekend and send you a reply

Check back Monday morning

@@lumiousmedia has this been added?

@@stevenhilario382 not yet. have it on my backlog this weekend. I wanna do multiple extra features at once. Will chime you in once published.

You're welcome

Great to see it worked for you. And thanks for your support.

@@lumiousmedia is there a way we can control the speed on mobile?

I found a solution. duplicating the ticker and using a dynamic attribute to control the speeds in the component settings.

@@scotthumphrey2336 nope. Haven't built that out. But the code uses the width of logo container. So, if you set a fixed width to your logo container, it will use the same speed. I'll build a mobile speed too closer to the end of the month. Working right now on publishing my CSS framework.

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?

Thx for the support

Yep, most of the solutions could be easily adapted to any CMS. What's the solution you're interested in and the CMS?

@@lumiousmedia so... I work for an agency that creates websites with wordpress and prestashop. But sometimes we have clients with sites built in Magento. Also, I'm not a developer, but I do SEO. Therefore my goal is to provide as detailed information as possible. In particular, I very often encounter render blocking resources, unused CSS and third-party scripts that burden the main thread.

@@nicolaboccuto3669 got you. You won't be able to use the code I've provided in the video for anything outside Webflow. You can change the code to make it work. However, witha little bit of work - it's possible to fix the 'unused CSS' and 'render-blocking' issues in WP, PS, or Magento. Webflow does not allow to edit the main CSS and JS files. WP does. So for me, it would be easier to fix it on Magento or WP, than on WF. Let me know if this make sense.

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

Yeah, agree with you. And maybe we could increase the quality of our services. At this point, I'm not worried about the reactions (emoji) and they kinda...look cool. Attention-grabbing, you know :D

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?

usually ,the reason why it's not moving is bc of the structure. Send me the clone over email

It depends on the business and the stage you're in: - If you're a service-based and just got started, just find one part of your service where client can see result. For example, if you offer SEO - you can update your client's old articles so they see immediate results after a week. Once you have some results, ask them for a simple 1 minute video review. - If you have a product, but no users yet - make your product free to get started, and land people on an LP that contains a free 15 minutes training. Unless you have a few clients that can do a review, you'll have to do parts of your product for free and train people through the process so you build authority. What kind of business and stage you're in?

thanks Chris for responding. I'm working for a hospital chain for about a year, handling programmatic advertising and beyond, and want to do the same for private practices on the side. However, I can't be the face of my brand to establish trust (non-compete agreement), which makes it challenging without testimonials. Saw your website, loved the stats section-(red flags & solution). Thinking of doing something similar without mentioning specific brands.

@@Hamdouche.M well, even in the hospital chain you can still use social proof. For healthcare, marketers hire professional actors that dress as doctors. It's something you probably saw. All healthcare product ads have an actor that plays a doctor or a famous figure. Marketers use something that is called authority. They use the title (M.D) and the image of a doctor to convey authority and likeability.

Thanks, my man. Yeah, I probably was in the same boat as you. Just didn't liked that my client have to clone the logos, and then understand how to work with the CSS...you got the picture.

Nope, does not have logic. But the multi step is built on parsley.js which comes with conditional logic events. If you're a dev, you can expand the form to include conditional logic. The reason why I did not included conditional logic is bc it would be hard for a non-dev to control it. It's better if you use an embed form that already comes with cond. logic like Typeform, GHL, Hubspot, and so on. Hope it helps.

​@@lumiousmedia Thank you for your response, I really appreciate it!!

Yep, works too only if the video is not bigger than 30 MB. But if you have small one, let's say up to 3-4 minutes long - I guess it works. I'm hosting mine from CF bc sometimes webflow have bugs with these background video components.

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.

@@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?

VWO. I was using Google Optimize but they sunset it. THere's also Optibase but it's not yet there in terms of features. Been using VWO since 2018. never failed. They also have a free plan if you wanna conduct a test against 50k visits which is more than enough for a quality A/B test campaign. Ohh, not affiliated btw. Just like the tool.

@@lumiousmedia Thanks for the feedback. You have very useful content, don't stop!

you're welcome