Elias, Branding Studio, webflow partner

Tips: Upload speed and image on Webflow

Your brand, our focus
Your brand, our focus
Your brand, our focus
Your brand, our focus
Webflow
resources
/
Webflow
/
Tips: Upload speed and image on Webflow
June 2023
6
Min

Tips: optimize the loading speed of your Webflow site

Having a fast site is the lifeblood 🧠 (I couldn't find a nerve, sorry). Even if you have a Webflow site, you can slow it down if you don't follow these best practices!

Let's go through it all 👇

Think about the loading time as soon as the model is created

I have only one sentence to say to you: “Less is more!” 😎

I'm still giving you a bit more information...

To optimize the loading speed of your site, thinking about the loading time as soon as the model is created is essential because it will allow you to design a lightweight and well-optimized site structure. You'll need to consider things like image size, number of scripts, number of styles, and complexity of animations right from the mockup design stage.

By keeping these key elements in mind, you can design a fast and smooth user experience for your visitors 🔥

Then, by using tools like image compression tools, you can improve the loading speed of your site even more. Webflow.

That's what we're about to see 👇

Optimize the size of your images

Make sure that all the images you use on your Webflow site are optimized for the web 😉 You probably know this, but a reminder doesn't hurt: images that are too heavy can significantly slow down the speed of your site! Based on this premise, we recommend using online image compression tools to reduce the size of your images ✌🏼

Choose the right image format (SVG, PNG, PNG, JPEG, WebP)

By choosing the right image format you can do wonders to optimize the loading speed of your website! Images are often the main cause of page slowdowns...

Remember that choosing the right format depends on the type of image and how it will be used.

The JPEG format for which image?

For photographs, the JPEG format is recommended because it offers a good compromise between quality and file size.

The PNG format for which image?

For illustrations with flat colors, the PNG format is more suitable because it allows you to maintain the quality of the image while reducing the size of the file.

SVG format for which image?

For logos and icons, the SVG format is recommended because it allows you to obtain a vector image that adapts to all screen resolutions.

The WebP format, the best alternative!

Finally, the WebP format is a recent alternative to JPEG and PNG, it offers better compression while maintaining image quality! So that's our recommendation 🙌

To convert your images, I also recommend using a tool like Squoosh (or Squoosh While to do 🤪)

This tool makes it possible to reduce the size of image files without altering their quality and gives the possibility of converting images into various formats, especially WebP.

Reduce the number of animations

Reducing the number of animations has a positive impact on the loading speed of your site. So, it is true that animations can give a touch of interactivity and dynamism to a site! But they can also slow down loading and alter the user experience...

Keep in mind that by reducing the number of animations, it is possible to significantly improve the loading time of your Webflow site. It is therefore important to think carefully about the use of animations 😎 You can also choose animations that are light and simple.

Remove unused styles, classes, and animations

When developing a website, it is common to create styles and classes ... which often end up being removed from certain items. However, regardless of whether they are linked to an element or not, these styles and classes can increase the site's storage size.

Do you see where I'm going with this? 😅 Not deleting unused styles and classes is like burdening your site... for nothing!

To fix this problem, you can use the “Clean Up” feature in Webflow's Style Manager, which makes it easy to remove all unused styles and classes. This procedure effectively cleans up the site and reduces its storage size, which can help improve loading speed and the overall user experience.

Defer scripts in Webflow

It is possible to configure the scripts used on your site so that they are deferred and thus improve the loading speed.

This action can be done in the custom settings of the project or page where the script was used.

The “defer” parameter can be added to custom code before the “src” tag. This technique tells the browser not to wait for the script to load the page, but to load the page in the background.

In this way, by differentiating non-essential scripts, you can significantly improve the loading speed of your site.

In the end, this practice can contribute to a better user experience and to a better ranking of the site on search engines.

Minimize custom code

To reduce the loading time of a Webflow site, another effective strategy is to minimize JavaScript and CSS files.

La minimization is a process of eliminating unnecessary characters, comments, and spaces in code, and using shorter variable and function names to optimize code.

Because the fewer bytes of data in the code, the more optimized the page loading speed 🚀

This minimization technique thus makes it possible to reduce the size of JavaScript and CSS files, while improving their performance.

Use audit tools

Use a audit tool to analyze the loading speed of your site, will give you a lot of information on how you can optimize it. These tools allow you to analyze in depth the performance of your website and to detect possible loading speed problems. You will be able to gather valuable information on file size, server response times, image quality, page loading speed... The results of the audit will thus allow you to determine the areas to be improved to optimize the loading speed of your website.

Here are our top 3 website load speed audit tools:

Google PageSpeed Insights

Test My Site

Uptrends

BONUS: How to improve the copywriting of your Webflow landing page

With these tips, your site should be as fast as lightning! ⚡️

What if we moved on to a new optimization? This time, we are optimizing the copywriting of your Webflow site! It is by hither 🔥

Elias, Branding Studio, webflow partner

Brand Strategy
Brand Identity
Brand Experience
Naming
Copywriting
Brand Idea
Logo
Photography
Illustration
3D & Motion
SEO
Website
Webflow
Custom Animation
Maintenance
Webdesgin

We are brand creators. We transform projects into a strong, online brand.

Related articles

It's time to turn your project into a brand

Brand Strategy
Brand Identity
Brand Experience
Brand Strategy
Brand Identity
Brand Experience