![Chris T.](/img/default-banner.jpg)
- 22
- 13 359
Chris T.
Приєднався 5 лют 2024
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.
What's My 12-Month SEO Plan for SaaS Startups
In today's video, I'm sharing what is my 4-12 months SEO plan for a SaaS startup.
Recently Google made a lot of changes into their algorithms. And this pushes SEO strategies to a new level.
With a SaaS product, your SEO battle plan needs to be focused around your competitors, free tools hub, and How To guides.
If you'll get any questions, drop them in the comments section below.
Recently Google made a lot of changes into their algorithms. And this pushes SEO strategies to a new level.
With a SaaS product, your SEO battle plan needs to be focused around your competitors, free tools hub, and How To guides.
If you'll get any questions, drop them in the comments section below.
Переглядів: 74
Відео
4 Ways To Rank Higher in Google
Переглядів 1634 місяці тому
Today's video is about the 4 pillars I'm using with every SEO campaign. This is a universal formula if you're struggling with creating a content plan, publish, and win rankings.
How To Optimize Conversions
Переглядів 1324 місяці тому
One of the many reasons why companies fail to increase their conversion rates mainly is related to how well they know their customers. In today's video, I am talking what is my way of optimizing any conversion goal you have in mind. How to be 90% above your competition. And make the process fun. If you'll get any questions after watching the video, feel free to drop them in the comments section...
How I Design a SaaS Pricing Page for Conversions
Переглядів 2084 місяці тому
In today's video, I'm sharing what is my process of not only designing a high-converting SaaS pricing page, but also what are the principles behind the successful layouts and what you can test out part of your A/B test campaign. I've seen a lot of Hotjar recordings over the pricing pages, and always wondered why people quit and then come back after 30 seconds. I realised that users compare pric...
WEBFLOW CLONEABLE: Logo Ticker & Carousel That Works with Any Content
Переглядів 1,3 тис.4 місяці тому
Hey everyone! In today's video I want to show how to create a logo ticker/carousel in Webflow that works with any kind of content you put inside. There are lot of websites that do use logo carousels and chances are you want to implement it too. I was always looking for a ticker that's easy to integrate and won't require duplicating logos or doing other CSS/JS wizardy: a simple carousel anyone c...
SaaS Conversion Rate Optimization (CRO): Let's Fix Clay.com
Переглядів 2645 місяців тому
Hey everyone! In today’s video, I want to tackle on different kind of subject. And that’s conversion rate optimization. Web design and Webflow developing will always be about something more than just publishing. We’ll have clients asking if we can provide actual results using services like SEO (Search Engine Optimisation), ads, email marketing, and of course - CRO campaigns. With this video, I ...
WEBFLOW SITE SPEED: How to Optimize Videos
Переглядів 1,6 тис.5 місяців тому
Hello there. In this video we'll talk how to optimize one of the assets that impact your Webflow site speed. And that's videos. By default, browsers do not lazy-load videos. And when it comes to open up a page that is video-heavy, this plays a huge role on how fast your users can get started, complete a form, or download something from your Webflow site. 👇 Cloneable that shows how the solution ...
WEBFLOW WEB VITALS: Optimize scripts & third-party code
Переглядів 1,3 тис.5 місяців тому
Hey everyone! In this video we're going to cover how to optimize probably the biggest asset that impacts your Webflow site speed: the scripts & third-party code. Chances are you got a few of them on your site. Hubspot forms, Intercom, chat widgets, Segment, Hotjar...just to name a few. We'll fix different Page Speed Insights issues like: - Minimize main-thread work. - Reduce the impact of third...
WEBFLOW WEB VITALS: Image Elements Do Not Have Explicit Width & Height
Переглядів 6096 місяців тому
WEBFLOW WEB VITALS: Image Elements Do Not Have Explicit Width & Height
WEBFLOW WEB VITALS: Serve Images in Next-Gen Formats
Переглядів 3086 місяців тому
WEBFLOW WEB VITALS: Serve Images in Next-Gen Formats
WEBFLOW CLONEABLE: Add Any Stuff Inside Tabs Menu
Переглядів 2326 місяців тому
WEBFLOW CLONEABLE: Add Any Stuff Inside Tabs Menu
WEBFLOW WEB VITALS: Eliminate Render Blocking Resources & Reduce Unused CSS
Переглядів 3,3 тис.6 місяців тому
WEBFLOW WEB VITALS: Eliminate Render Blocking Resources & Reduce Unused CSS
WEBFLOW CLONEABLE: Goo Motion Library
Переглядів 1,7 тис.6 місяців тому
WEBFLOW CLONEABLE: Goo Motion Library
WEBFLOW CLONEABLE: SaaS Pricing Calculator
Переглядів 4846 місяців тому
WEBFLOW CLONEABLE: SaaS Pricing Calculator
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
Hi Chris, What design library do you use on Figma? I've tried many, but all seem so complicated with many limitations.
what you mean by design library? Like Relume?
@@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.
What the nightmare 😂
When I clone the calculator, I cannot get the input to allow me to change its value. Any idea why that would be?
I've just watched all videos of your channel. Amazing. Thanks a lot for the value!
Webflow now support AVIF i can save a lot of bandwidth now
Good lord, drink some water next time. Your swallowing is super annoying.
Hi Chris, thank you. I have the problem that i dont get an SSL connection. So it says “not safe". What could be the reason for this?
Have you switched the SSL off? Another reason might be because you don't have full SSL enabled in the CF account.
@@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?
I dont have GTM, do i only need to create account and paste a code or ?
Yep, you'll have to create a GTM account. That comes free
@@lumiousmediaand that's it. I dont need to do anything on him because i saw some stuff on your manager?
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!
Thanks a lot!
Hi! Do you have a solution where we could also lazy load lottie files to prevent excessive DOM size performance hit?
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.
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.
Thank you!
I think you're quickly becoming one of my favorite UA-camrs!! Awesome, valuable, helpful content, Chris. Subbing from my personal account!
Do you need to do css clean up everytime you are updating your website?
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 Thanks for the idea, and good luck with the tool!
i set the values of all images but the section keeps on collapsing when on load do I also have the set a height to the section?
Sam, send me a read-only link please on my email chris@thelumious.com. Might collapse for different reasons, including your browser.
How would I delay an animation. As in I want a text block to be animated after the previous text block has completed its animation
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.
When I hit next button ,It doesnot go to next question.Why?
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
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".
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!
This is what my site says right now
You have to remove the default code that the worker comes with before you paste the other code.
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.
Awesome work, thank you!
The best video I've been looking for! Thanks, for sharing, bro!
Thanks
This is a godsend. Thank you! I've been tinkering with the "native" option for so long-what a waste of time. THIS setup is so much better. Thank you!
Glad it helped. If you'll spot any bugs, let me know.
Awesome work. Thank you so much for this. Works great on my saas.
Great to see it's working. Thanks for your support
Thank you for the great content.
Thanks, man.
SEO is the reason google results are mostly useless nowadays.
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.
😱
do you have guide for wordpress sites? this is a very interesting approach
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.
Love this series about speed optimization, really well explained so we're not just following steps like zombies Keep them coming!
Love this series about speed optimization, really well explained so we're not just following steps like zombies Keep them coming!
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
Nope, Webflow does not minify custom code. You have to manually minify it
Great video! What is your approach to A/B testing inside 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?
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.
thanks! !
You're welcome
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.
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.
How about page load animations using gsap? It won't work if we added hero section animation using gsap
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?
Great content you're making here man. Thank you 🙏
Thx for the support
Love it dude ! Thank you so much
Great video man
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!!!
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.
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!
Sorry for late reply. Here's the loom: www.loom.com/share/093e0520077d49c88dc4d02ef551785f Let me know if this answer your question
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!
Another great video. I like the straightforward approach. It would be awesome if we had the time to do thorough research on every project. And I'm also haunted by the thumbs-up animation (1:48) 😅
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