When running it through pagespeed by google dev it gets a solid 91 on Desktop, only 50 on mobile though.
I’ve looked through the recommendations to make it faster but can’t find a way to do that in Webflow.
The site is very small and doesnt contain much so I can’t really explain why it’s slow in the first place.
Bases on the Google PageSpeed results I would suggest to do the following:
Use lazy load for the images
Upload your images as JPG files and compress them to as low as possible without losing too much quality.
I have noticed you are using PNG files with transparency to display the background colour. You can also try to cut off some part of the image with some custom CSS and implement angled edges for your images.
By the way I don’t see responsive images in your website, you might want to look into that to dramatically reduce your mobile load time:
You don’t. This is something you have to specifically implement. Search the forum, there are plenty of topics.
It does.
Honestly for your particular site I’d take google’s suggestions with a grain of salt. I think what throws it off is interactions. There is nothing particularly heavy about that page of yours. You may try reducing images size of course.
@Tim_Leon_Cruse Hey man. Cool site. It’s not that heavy actually, just make sure to optimize images as the guys said.
One more thing, I noticed you have some inline CSS inside your html file (in <style, @media width…) I highly recommend you cut that from your html, and paste into the CSS file. Inline CSS (as well as inline js-scripts) tend to reduce the loading time by quite a lot.
I’m barely a developer, more so a designer so I can’t really follow you with what you said about inline css. I haven’t add any custom css into the html. Is there a tutorial on how to fix that?
I am not sure about it if Webflow’s Legacy Interactions could help you here, but it never hurts to try. Setup a ‘Load’-trigger for the images and enable ‘Wait for assets to load’ (of course add the initial state and trigger state).
For lazyload, you can try this topic:
Regarding the responsive images:
Try uploading bigger image files anywhere in your page to see if Webflow is creating your responsive images, because I can’t see it in your demo site.
Ps. I would suggest to use a load trigger on your scroll icon, when you load your page now it immediately attracts your attention and you’re missing out on the logo animation. Try to hide the scroll icon first and display it after the logo animation is finished.
Haha same here, I’m a designer, but learned quite a lot working with Webflow (tutorials, reading up on stuff, etc…). There is a ton of cool videos that help you learn all that.
CSS is basically any styling added to your elements (size, color, opacity, position, etc…). If you have zero idea about how to edit the files, I recommend just starting with the basics on https://www.w3schools.com. It’s an easy way to understand the difference between html and CSS functions (CSS is basically a property that defines elements’ styles, across all pages (html pages), usually found in a linked CSS sheet. When a CSS is found inside the HTML file, that’s when it’s an inline-css, and can sometimes slow down load speed).
I also recommend you run your website by this Measure page quality
It’s a free tool that will give you a detailed report on what to do to further optimize your site. They also link to outside articles that guide to what you need to do.
