Пікірлер
@WavyWallart 2 ай бұрын
Great video! do you show this on the 1st call with the client?
@SustainabilityJobslist 4 ай бұрын
LOVE THIS GUY...always make videos what we EXACTLY need................ on suggestion...make a video on how to create dynamic pages to static pages in webflow... 🙂
@kelly_browning 5 ай бұрын
Thank you so much for this video! It's exactly what I needed! Sidenote: I don't think your Notion file is loading correctly. Maybe it's an error on my side? Would you mind taking a look?
@roving-camera_72 6 ай бұрын
You did an excellent job of presenting this important information.
@archwebdesign 6 ай бұрын
Check out the Sales Proposal live right here = archcowebdesign.com/proposal/website-proposal-title-goes-here And if you want to chat about getting a new website done, feel free to book a call with us right here = archcowebdesign.com/contact
@LordBoltagon 7 ай бұрын
I use a on scroll event to unwrap the contents of the html <template> tag. Causing all requests to trigger once unwrapped. The contents of the template tag is usually scripts and images…essentially anything you don’t want to load on initial render of the page. Massive performance improvements. I pretty much always end up with 100 for everything on my lighthouse scores.
@genwowowow 5 ай бұрын
Hi! Can you please share how do you effectively 'unwrap' the non-critical scripts, videos and images through a <template> tag? Does this mean you wrap all videos and images that are not above the fold in a <template> tag then you have a code that would remove the <template> tag once the user scrolls?
@lucianokovacevic 7 ай бұрын
I wish you were nepotist algorithm’s nephew. Thanks dude! ❤
@veereshgt9838 9 ай бұрын
Broooo!!! you are my savior! My mobile performance score went from ~30 to above 70! Will try optiming further, thanks a ton for your efforts in making this video series
@MatthewJaekel 10 ай бұрын
this is one of the best tutorials of all time, thank you!!
@stefanpelz6328 10 ай бұрын
You can also create a frame around existing objects, whether it's a single layer or selection of layers. Use the frame selection keyboard shortcut: Mac: ⌥ Option ⌘ Command G. Windows: Ctrl + Alt + G. So no copying and resizing needed. 😊
@GregDolan 11 ай бұрын
Your videos are top notch, so glad your back publishing on KZbin 🔥
@Arch2119 Жыл бұрын
Awesome update even for a veteran Webflow dev!
@mariorruiz Жыл бұрын
You’re back!!! Could you help me to also optimize it when it’s on mobile?
@archwebdesign Жыл бұрын
My man, what's up. What issues you have on mobile?
@mariorruiz Жыл бұрын
@@archwebdesign well my assets are compressed for desktop but not for mobile. Somehow I get a different score on google because webflow uses different assets on desktop and on mobiel?
@archwebdesign 11 ай бұрын
@@mariorruiz sorry for late reply buddy. Was on vac. Here's the loom: www.loom.com/share/4192cbf1457647c79c7ca05ef8c252c9?sid=fb362506-1be7-4af6-8e9a-313cf349c449
@mariorruiz 11 ай бұрын
thanks Im gonna try that! @@archwebdesign
@jonasarleth Жыл бұрын
Thanks for the good explanation!
@radkaolejnakova133 Жыл бұрын
Hi Chris, I have a question - is lazy loading scripts any faster than putting them before the /body tag? From my understanding they're gonna be loaded after all critical script, HTML and CSS anyway, or I am missing something?
@archwebdesign Жыл бұрын
Almost. Your browser will still load the scripts you put there. No matter what. And it'll still affect your page load time because those scripts are also resources. Lazy loading make your scripts invisible. Only loading them when the user starts interacting with the page. Does this make sense?
@babusgabriel Жыл бұрын
Great video Chris! 🙌
@archwebdesign Жыл бұрын
Thanks my man. Appreciate your support. Hope you found it useful.
@Arch2119 Жыл бұрын
Yeah welcome back Chris!
@fabian-schmidtke Жыл бұрын
He is back! ;)
@archwebdesign Жыл бұрын
Yep, I'm back. How's your business?
@tragedielive69 Жыл бұрын
Te salut 🤝 Alexandru T.J
@MichalCzerlikowski Жыл бұрын
Welcome back 🙏
@archwebdesign Жыл бұрын
Yo, Michal. Thanks a lot. yeah, I'm finally making a come back :D
@islimani05 Жыл бұрын
the best courses on youtube
@AdnanSami-jp1en Жыл бұрын
hi chris, I think you should unlink first then clear. at 12:11
@elramvashdi Жыл бұрын
Section tag is not rendered outside of the viewport, how come?
@elramvashdi Жыл бұрын
the image should not lazy loaded, because it's above the fold, you should have chosen the "eager" value
@GregDolan Жыл бұрын
Hey, amazing video. Never seen this covered in such detail before. What's your advice for using variable fonts? I'm looking at using Inter but using variable its 785kb. If I do the FontForge optimization Webflow doesn't recognize it as a variable font anymore :(
@ArthurLarin Жыл бұрын
Hey Chris, thanks so much for the amazing tutorials!! I've got a question if anyone has a moment. In using SVG's through HTML embeds, I'm finding that I'm having to create second versions of these SVG blocks when I want an icon to scale down on mobile breakpoints. This is obviously a couple extra steps compared to just changing the size of a PNG container in the style pane to match the device viewport I'm currently designing for. In this case, is having multiple versions of a single SVG shown or hid based on the device viewport still more efficient than using PNG's? Thanks a lot.
@КанатбекКурманбекуулу 2 жыл бұрын
Thanks a lot. Really informative. Keep going!
@crowley144 2 жыл бұрын
These videos are exactly what a new designer needs. You cover all of the basics in precise detail! A lot of newb designers are incorporating tricky animations that dont load well creating an unprofessional website with terrible user experience. You are one of the remedys to this issue! Your content deserves at least 20x the amount of attention it is getting. Well done!
@crowley144 2 жыл бұрын
Hi Chris, why did you use "Lazy Load" on the "head" section image (background image with the <img> element)? I thought because this is in the LCP this should be loaded as quickly as possible to avoid flashing etc.. so it should be set to "Eager" loading no?? Thanks for your time!
@literallyshane4306 2 жыл бұрын
Great video, tak!
@chris_erickson 2 жыл бұрын
Unfortunately, Font Forge doesn't seem to work well on Macs. MacOS refuses to allow it access to any files on my computer, so that is difficult. Will try Glyphs. One thing: even WITHOUT any Google fonts selected in the font settings, Webflow projects are STILL calling the Google fonts API.
@adrienevd 2 жыл бұрын
I am a beginner and puzzled I downloaded poppins in webflow but I cannot find it on my computer and I wonder this does stay in my webflowproject not on my computer am I right?
@archwebdesign 2 жыл бұрын
If you loaded the Poppins font using the Google Fonts dropdown (on the Fonts settings) - than the Poppins font will be loaded on the Webflow project.
@nikivyu 2 жыл бұрын
Really appreciate your work, thanks for the tutorials and keep it going!
@Bars_Sl 2 жыл бұрын
Image sprites died with coming of http/2, while http/3 on the way.
@archwebdesign 2 жыл бұрын
You're right, but still it helps to kill some requests, especially if you have images in the header.
@Bars_Sl 2 жыл бұрын
@@archwebdesign requests are not a problem anymore, but this sprite takes to load 3 times longer than 3 images separately))
@iDATUS 3 жыл бұрын
Chris, even OFL licensing is confusing. If we remove Glyphs is this considered modifying and does this mean we should rename the font to something else and strip out the copywrite details? Does fontforge converting TTF to woff2 preserve enough to keep the terms of the OFL, meaning another reason to rename if it doesn't.
@archwebdesign 3 жыл бұрын
Good question! I usually appending "Custom" to the font files I'm modifying. Most of fonts I am using are Google Fonts which are free to use. Fontforge does not kill the metas in a font file which means you should be good to go. But, if you download a font file which is already in woff2 or from external sources like DaFont.com, you should always check the license and the integrity of the metas in a font. You can always open a font inside FontForge and check its metadata. Here's a good article on how to do that: designwithfontforge.com/en-US/Font_Info_&_Metadata.html
@iDATUS 3 жыл бұрын
@@archwebdesign Thank you very much for replying. Thanks for confirming the meta data with FontForge. it did feel it kept it all. So convert and be ok but if you remove anything consider it modified, append custom to the name. It does also mention you should remove the copyright information as well. Its not to punish people its to reduce confusion between the original and our custom. Wish they make it simpler.
@radkaolejnakova133 3 жыл бұрын
Amazing series, thank you :) I have a question: is there a benefit to putting the svg code into embed instead of just putting it into the project as an svg image, if I know I won't be changing its color ? Does it load faster as an svg image or embed code ?
@jondanyeur6710 3 жыл бұрын
Chris, just found your videos and am finding them very helpful! One question, even though the btn description is intended to help Google when it crawls, I have heard that setting elements to hidden can detract from your seo rankings. Can you share some insights to your thoughts on this? Thanks man!
@archwebdesign 3 жыл бұрын
Depends what elements you set as hidden. For example, I do hide image so my initial load is faster. Hiding heading and text will definitely impact your rankings. Not a lot but Google will see your site as less appealing in terms of content. Google looks for three things: your content quality, dwell time and authority (backlinks + online presence). Try to avoid display none on text. For images, make sure it lives inside a figure tag. If you want hide something and later on display on a page, make sure you set the tag to Aside. Hope that helps
@handorling 3 жыл бұрын
Hi Chris, these videos are really helpful. I was wondering if you would be interested in doing some videos for improving the load speed on ecommerce websites? Many Thanks!
@archwebdesign 3 жыл бұрын
Hannah, the same strategies apply to any website. The bad news is that e-commerce platforms like shopify or woocommerce suffer from bad servers and bad time till first byte. On top of that you also have plug-ins and apps. I am definitely interested. Right now I paused my KZbin channel because I am expanding my team. But really soon I will start publishing again
@handorling 3 жыл бұрын
@@archwebdesign Ok, thanks Chris! The resources blocking the first paint of the pages and reducing the unsused javascript are a pain (such as stripe) for mobile. Good luck with expanding your team.
@archwebdesign 3 жыл бұрын
@@handorling you need to timeout the external scripts. Here's a nice article on how to execute scripts with timeout: www.shaytoder.com/improving-page-speed-when-using-facebook-pixel/ On top of that, make sure the images that live above and below the field are loading with the page (eager) and not lazy loaded. Hope it helps
@crowley144 2 жыл бұрын
@@archwebdesign Awesome, I cannot wait for this, you are an extremely helpful content creator! :) If you could eventually get into how to optimise the animation side of sites and possible even building with EM's that would be amazing. Thanks for all you do.
@GeraldineMurphyEnamel 3 жыл бұрын
Fantastic, thanks very much! I love the videos
@TomHaggun 3 жыл бұрын
Why there is so little views? This is primo stuff!
@archwebdesign 3 жыл бұрын
Reason: I paused uploading new videos and sharing past videos which probably impacted my analytics :D lol
@TomHaggun 3 жыл бұрын
@@archwebdesign uuuurgh! It’s so annoying. I have the same problem with Instagram
@maciejpietrowski7351 3 жыл бұрын
If my website is in Polish, should I translate "Back to Homepage" in my link block to Polish? Or leave it in English?
@archwebdesign 3 жыл бұрын
Maciej, just translate in Polish.
@GeraldineMurphyEnamel 3 жыл бұрын
Fantastic videos - I'm learning so much. Thank you.
@GeraldineMurphyEnamel 3 жыл бұрын
Thanks for this video Chris - I'm a beginner learning Webflow. What is the name of your Facebook community? I'd like to join...
@archwebdesign 3 жыл бұрын
Haven't yet created one but you can find me on the Webflow Designers Global community
@richardtorresmagic 3 жыл бұрын
i have a question what do you do if the logo you are using has an svg code that surpasses the allowed characters in webflows embed block. For example what if you have a company that isn't on that website (which by the way is amazing saved it) so you find it somewhere else and create an svg out of it.
@archwebdesign 3 жыл бұрын
Richard, great question. In these instances, I see two scenarios: 1. You do optimize the logo by unite the shapes that use same colors, and remove SVG effects that are not necessary. 2. You use an SVG image with "Load with page" lazyload option (that's in case if you have a navigation logo)
@richardtorresmagic 3 жыл бұрын
@@archwebdesign I'm literally going thru this right now as we speak lol. Thanks for the workaround. I'll give those a try.
@richardtorresmagic 3 жыл бұрын
@@archwebdesign would scenario 2 also work for company logos ?
@archwebdesign 3 жыл бұрын
@@richardtorresmagic yes. Just don't forget to use eager:load with page
@richardtorresmagic 3 жыл бұрын
@@archwebdesign thanks for the great content ! I've struggled with lighthouse score for awhile now finally getting 90-100 score !
@tommygun5035 3 жыл бұрын
I'm desperately waiting for a new upload
@archwebdesign 3 жыл бұрын
Soon, I promise. Making a couple of small videos now
@tomasyepes4636 3 жыл бұрын
perfect man
@joshgalvan7877 3 жыл бұрын
Gold
@RichardReynolds 3 жыл бұрын
Great tutorial Chis! Glad to know this!
@rannjanjoawn 3 жыл бұрын
Thank you Chris for this great video! I have a question ...what if the logo has 2 colours..how do you tackle it? current color will give one single colour to the whole file?
@archwebdesign 3 жыл бұрын
Unfortunately, that's not possible with currentColor. You'll need two versions of SVG code. Let's say one for dark theme, and another for light theme. Wish Webflow could create variables for colors so we can access it through custom code. Right now, we do have color swatches but that does not help. What you can do is declare two background colors for your logos. Once you do select the logo and apply two background colors, it will be used as the logo colors. But this trick needs custom code.
@rannjanjoawn 3 жыл бұрын
@@archwebdesign thanks chris for info..I need to figure out a way to find this code..as I am complete no coder 😄
@AG-lh3we 3 жыл бұрын
So informative. Thank you very much!
@archwebdesign 3 жыл бұрын
You're welcome