5 Key Parts to Boost Your Website Performance

July 28, 2024

5 Key Parts to Boost Your Website Performance

I've been working a lot on website performance lately. To get close to perfect results, I had to dive deep into every single corner of website optimization.

So here is a list of 5 most important parts that can improve the performance of your website.

1. Compress your assets!

Compress your images to WEBP format, use WEBP or SVG for all your images. Compress your font files from OTF to WOFF or WOFF2 (and yes, don't use the provided Google fonts, instead download the font collection and only upload files from the specific fonts you need.

2. Minify JavaScript and CSS files and defer/async scripts!

If you're using Webflow, it's easy, just check the "minimize" boxes in your site settings. Try not to have any scripts in the custom code header. And if your scripts don't need to be loaded immediately, delay them by adding a defer or async attributes. This will allow your content to load before these scripts.

3. Pay attention to your hero section (or "above the fold" section).

When it comes to performance, the important part is how fast your above-the-fold section loads and displays on the page. So if possible avoid any "on load" animations and don't lazy load your images in this section, these images should load ASAP and you can lazy load all the other images below the fold. Animations "on scroll" or associated with some behavior are also fine.

4. Integrations, scripts, videos.

Today, there are millions of useful tools and applications that can track analytics or do all kinds of useful things on your website. But they will also greatly affect the performance of your website. Try to use the ones you really need and remove the nice-to-have tools and apps. And again, if possible, use the defer/async attributes on these integration scripts. If you have videos on your website, it's a good idea to compress and host them on another platform, then display them by embedding them on your website. Also, try to avoid the video element from Webflow. :)

5. Assets/Code Maintenance.

We frequently change or update our website-wide visuals, styles or animations. There is a webflow feature in the editor that can remove all your unused classes or animations. It will definitely improve your performance. Also, remove any assets from the assets folder that you are not using on the website.

Back to blog page

Let's Work Together!

Send us a message and we will get back to you ASAP.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.