Hey, my name is Chris, and if you want to get formal, I'm the founder of Lumious. Since 2016, I've been mastering Webflow development, site speed, technical SEO, conversion rate optimization, and much more. If you're a marketer struggling to learn Webflow or a web designer that's looking to grow - stick with the content on this channel.
Another comment - I noticed that I'm getting a 92 on the devtools version of lighthouse but a 41 on the lighthouse-metrics website. Why the discrepancy? Should I be worried?
How long after making these changes will I see a large increase in lighthouse metrics score? I did go up 10 from 51 to 61, but shouldn't I expect more? I still see the eliminate render blocking and reduce js issues on lighthouse 18 hrs later.
Great tutorial. However, when following the last step of setting sls/tls to encryption mode "full" (originally "flexible"), I get a sls certificate error on my site. Moving it back to 'flexible' resolves the issue, but then I guess I'm losing out on the efficiency we set up here to begin with? How can I move it to full encryption without the cert error? **EDIT: it seems that I accidentally clicked 'full (strict)' instead of 'full'. Works now
@@lumiousmedia Yes, like Relume? Is it good? You said on your website that you use pre-made components to streamline the design process. Is that your approach? BTW, I’m waiting for the next video. It’s been a month!
@@Hamdouche.M I'm working on two apps now for Webflow. That's the reason I've stopped uploading. But I will resume soon ;) I've used Relume. However my clients found it difficult to remember all the ins of Relume, like the CF approach and classes. I'm using now my own framework.
@@lumiousmedia Hi , thanks for the fast answer. I have a SSL certificate activated on on my root host, have full SSL enabled in CF and have SSL enabled in webflow. Yesterday i tried with another phone and there it showed safe. But i deleted my cookies and history, tried with wlan and with mobile data and on my phone it still shows “not safe“. So there might be the chance its like that for other people too. Just tried it on computer incognito tab and it says “safe“.. Maybe my phone is just fucked up lol
@16:50 Looks like Webflow has updated their IDE and it now puts the custom code INSIDE the <head> tag (not at the top of <body>). Not sure yet if this will cause issues for those following along?
Have i done everyting correctly if after all steps from the video i still se in the pagespeed insights the website-file next to my home-purified file? Should there be still file from webflow?
Good question. If you done everything correctly , you should see no CSS file served from the webflow but instead from your CF account. Could you throw your website URL?
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 <head> and <body> opening? (Asking because I see that your Webflow project <head> code area is empty). 2. I tested without installing the GTAG code on <head> 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!
Bro your playlist about optimizing Webflow to Google's Core Web Vital is so good! Subscribed, liked and now commented to just appreciate your work. Your are such a good story teller? The delivery and presentation is clear, generous and to the point. The value we're getting is tremendous, thank you so much. Wyatb!
Thank you so much, I really need this help. I can't tell you how many hairs I've pulled out over these problems. I'm very, very grateful to you!. THX again😃
hey so i tried this followed the steps on the notion and changed the dns settings and now it says that the site can't be reached. i wanted to purify the css as the next step stated but when i enter my url it says the page isn't working.
Hi Chris, Thanks for the video! Do you have any ideas on how to manage the issue with images inserted via Rich Text for the CMS? I have blog posts with many different images and I'm trying to find a solution for sizes that will work on both desktop and mobile.
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 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
Thank you for the tutorial Chris. I have been going through the tutorial step by step, but run into an issue when setting up the Worker. After adding the worker routes, I load up my web page but end up with a blank black page that says "Hello World".
@@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!
So i'm not sure whats happened on my site. Sometimes the site loads fine. Sometimes I get javascript errors. Sometimes it fails to load the purified.css. Then I reload again and it works. Then I check an hour later, and it isn't working again. Also I do still get that "eliminate render blocking resources" and "reduced unused CSS" in my google pagespeed tests/lighthouse. Maybe i've missed something, but I have gone back and fourth and everything seems to be fine on my end. However, I think I will just delete the purified CSS and revert back to just using cloudflare alone without the other changes. I've noticed improvements just by using cloudflare alone. This seems to be more stable for my end. Thanks though.
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.
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.
@@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.
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
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.
I just found your channel. Pure gold! Shame on webflow for not being able to do this natively, these tabs are amazing to use as a complex, in-depth explanation of products, I love this pattern and hate that I have to code it by manualy every time and it's not visible in the designer :D
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
Great tutorial and works so much better than trying to build directly in webflow which I have had many issues with. Is there anyway to prevent in ticker from stopping when you hover over it?
This seems solid man, thanks for sharing. I've had a lot of frustration with solutions that only use HTML/CSS, they always seem to break as soon as you add or remove logos. One thing I had to do so it work well on mobile was remove the lazy load, before that it was glitching. Thanks again.
@@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?
I saw that your playlist of tutorials are closely related to Webflow. Is it possible to adapt the solutions you propose to other CMS (wordpress,prestashop,...)? It's probably a trivial question 🙃 Thanks in advance!!!
@@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.
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!
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent) mask-mode: alpha Custom properties for the fade option (this is in the clonable but not in the docs so I put it here as well). Thanks!
