KreativePro Masterclass
Hello, {first_name}
Optimize Page Speed
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including all courses, resources & offline downloads.


Optimize Page Sped in Webflow

On this Webflow lesson we take a look at optimize page speed. How to check and improve your Webflow site load performance and how to use Google inspector to optimize your Webflow site using lighthouse.


Student reviews coming soon

okay guys so what i want to do is go

over to my project settings

and down where we have our hosting

you will see a couple of options at the

very end it gives us the ability to

minify the html

document to minify the css and the

javascript and to utilize

secure frame headers so all these should

be toggled on

it will help to clean up the code make

sure that the site

is only loading a smaller version of all

the code and interactions that we've


and it just makes it a lot more secure

for click jacking attacks so that your

site cannot be embedded

on other domains with iframes which is

another technique

used by some hackers so we don't want


and so we want to toggle these all on

and save the changes and publish the


the second thing i want to do is select

the mangles

extension tool go over to the page speed

run that quickly to see how well your

site is performing

right away we see the performance score

it's not bad at all it's at 89 out of


so it has some suggestions it will

highlight those for you

you can start seeing some of the

suggestions are just making sure the

images are

compressed uh right now there's it seems

like there's a lot of

um network payload what that means is

just there's a lot of

images that it's trying to process

and it's recommending that we use

the format webp instead of jpeg or png

we might be able to get away with it as

long as we can

compress those images correctly go ahead


jump over to the previous course on ui

advanced ui design systems so you can


the process that i use to compress all

my images

and apply them into our web flow another

thing that i like to do

is use the google inspector tool

so if you just simply right click

on the site one of the menu items

is called inspect if you click on that

no you can start seeing how it's

structured all the class names

all the different properties that we

didn't have to

even look at because we did this all

visually using webflow

but what i want to use from here is if

you go over to

the little arrow there is a prod there's

a little option called

lighthouse if you click on that what it

does it just generates a report

so it starts to load the site both on

mobile devices

and then on tablet and then on desktop

it starts to look for

ways to improve your site and it gives

you some suggestions as well

so you want to make sure you do this

exact same process on your projects

because it is important that you get a

higher performance

before you actually launch and right


we can see that we are not doing very

well because

we have a huge amount of assets that

we're trying to load

and a lot of this was intentional


what i want you to understand is that a

page that loads fast

will help us rank better on google and

right now all these images that we're


are not compressed they were uploaded

without compression

and so what's happening is that these


could be a lot smaller if we you use

a correct compression uh technique uh

take a look at that previous course

where i

explain how to compress your files from

figma and bring them over to our webflow


on the next lesson i'm going to teach

you how to set up

your domain dns we can get the real


set up into our webflow page

Coming Soon

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including all courses, resources & offline downloads.