Improve Framer Website Loading Speed in 7 Mins (Optimization Tips)

what's up guys in today's video I'll be showing you how to make your framer SES load faster let's jump straight into it also shout out to Luca for making a full article about this link is in the description all right so the first tip we have is image optimization while frame rate does optimize the images for you automatically you can even go further and make sure it's even more optimized to make your site load faster so what we're going to do is basically go to Every image on our site for example this one determine what the height and width is so just change it to fixed you can change it back later then we want to export it with this size meaning the original size of the image is probably something like this which is way bigger than the size that we actually see it with so we don't really need to store that big of an image we're just going to export it with this New Dimensions make sure that there's no Corner radius when you export obviously we're going to change it back after and make sure it's PNG 1X and hit export and it's exporting done great now after we've got it exported with the new size what we're going to do is we're going to go to website like tiny PNG which converts your images to webp and make sure they load faster so upload all of the pictures at once you can also export them all at once and as you can see here it says it saved 72% we're just going to download it and we're going to get a zip file with all of the images right now we only have one image but usually you're going to have more now what we're going to do is go back into framer and drop of the images in the right place we can now also bring back the radius and change the height back to fill and we're good to go you shouldn't be able to tell much of a difference with the image itself but now it should load much faster this might seem like a lot of effort but you can use the bulk feature on Tiny URL and it shouldn't take you too long and this makes a massive difference so definitely consider doing it the next tip we've got is for videos as you can see I've got a video here so instead of uploading a video you want to make sure it's either hosted on a URL the there's a lot of video hosting services so you can just host it on the service and it will give you a URL and you paste it here or alternatively you go here to insert type video and you can either use VMO or YouTube which by the way on the official framer website they use YouTube for all of their videos so I definitely recommend that as well and once you drop it you can just adjust the size there's some settings you can play with here uh let's up the radius a bit let's put autop playay on and we're good to go now as you can see the video starts automatically and it loads way faster than just having it directly on the website if you really want to have the video file on the website make sure you compress it with a similar method as we did in the last step let's jump straight into the next tip so the next tip is how to reduce Doom also known as document object model this essentially just refers to the number of HTML tags on your website this issue might not apply to everyone so you might not need to do it but if your website has has a lot of elements then you likely experience issues with this there are two ways to fix this so what you want to do is look for layers on your website where there are lots of layers within each other like here as you can see it just doesn't stop going and try to figure out can I eliminate any layers here for example here I can see that I could just bring this up and get rid of these two layers so try to look for areas like that especially if you have any tables or anything of that sort if there's too many layers it's going to slow down down on your website another way to tackle this issue is simply take parts of your page and just put them on a different page so in this case I've got these case studies here and I've also got what people say I think I can really just delete these two sections so let me go ahead and do that real quick and simply just put them on a new page as you can see I've got here at projects page and it includes all of the projects as well as the testimonials and I don't really need it on my main page I can just link link it in the header menu the next tip is you should be careful of tickers like the one we've got here or any slideshows because essentially what it does is it loads the images before the user even sees them and that really slows down your website so if you really really must have a ticker make sure you optimize the images and the elements inside it using the tips I mentioned in the previous steps and if you can then just consider deleting it or what you can do is potentially create create a manual ticker which is just let's say an object like this where it's a stack let's set the width to fill and just have a bunch of pictures and then you can just try to animate this manually or by turning it into a component and moving it horizontally or uh just leaving it still that could also work as you can see this is a really rush job but you you get the idea so you can try to figure out how to do that and do it if you really want to Next Step is reduce third party scripts if you have a lot of scripts consider either entirely removing them or make sure that they don't apply to all pages so what you want to do is go to your settings go to General scroll down until you see the code and as you can see here we have a bunch of custom codes that apply to the entire website consider removing them if you don't really need them and this will improve the speed of your website just remove them and click save additionally not all scripts are needed on every page so what you can do is use a custom element like the smooth scroll element which all it does is it applies smooth scroll to the specific page that it's on and put those around your site you can also use the embed element so just click insert search embed and go to HTML and just paste the code here and it's going to apply to the specific area rather than the entire site so let's move on to the next one the next tip is relatively simple just beware of complex animations for example let me show you on this side there's this really complex footer animation which has multiple steps so here you can see that the outer stack has animations then each outer stack has inner Stacks which also have animations and they have a bar with animations and then there's another upper stock with animations basically it's a lot of animations within animations within animations which is very complex and it's also looped so these animations are repeating constantly as you can see here so consider just toning it down making making more simple animations that still get the same feel across this will greatly improve your website speed and it shouldn't take too much effort and the next tip I have for you is try to op in for a Google font so if you go on your text layers you either have a custom option or a web option the web option is Google fonts and custom ones is one that you manually have to upload this does have an effect on the website but not really major so if you really have a phone that you want to use you can upload it and it wouldn't have much of an effect but always consider looking for a similar font on Google fonts they have a library of literally thousands of fonts and I'm sure you can find something similar to the one that you want to upload because it just load faster so this has been pretty much it subscribe to the channel if this helped you out again big shout out to LCA for sharing this article on the framer Community I'm going to link all of his socials and the article in the description make sure you go show him some love I'll see you guys in the next one peace

Channel: Guy Acey

Views: 2,913

Keywords: framer, framer tutorial, web design, graphic design, how to web design, frame speed up, framer speed build, framer speed optimization, framer seo, make website load faster, farmer images, framer video

Id: ghIhscJKua4

Length: 7min 27sec (447 seconds)

Published: Mon Feb 05 2024