How fast does a Webflow website load - Optimize Google Pagespeed

Google values fast websites and will reward them with a good ranking. This is another reason to optimize the loading speed of your website. Here are some tips to easily improve the loading speed of your Webflow website and enhance your Google ranking:

Before getting started, it's helpful to check the loading speed of an empty Webflow page. This will be our baseline to compare with after implementing the following tips. Using the Google Page Speed Test, an empty Webflow website has an excellent PageSpeed Score of 100 for desktop and 92 for mobile. It's worth noting that the PageSpeed Score for mobile is typically lower than for desktop, but even successful multi-national websites often have lower mobile scores than 92. So, this is already a good starting point. Let's see how we can make it even better.

‍

1. Provide images in modern formats

Providing images in modern formats can help improve the performance and loading speed of your website. There are several image formats to choose from, each with their own variations and benefits. Here are some common image formats and their characteristics:

• JPEG (Joint Photographic Experts Group): This is a popular format for photographs and images with lots of colors. It uses lossy compression, which means that some image data is lost during the compression process. This can result in a smaller file size, but it can also affect the quality of the image.
• PNG (Portable Network Graphics): This is a lossless format that is suitable for images with text, graphics, and transparent backgrounds. It produces high-quality images, but the file sizes are generally larger than JPEGs.
• GIF (Graphics Interchange Format): This is a lossless format that is used for simple graphics and animations. It supports transparent backgrounds and can only display a limited number of colors.
• WebP: This is a modern format developed by Google that offers both lossy and lossless compression. It produces smaller file sizes than other formats while maintaining good image quality.

In Webflow, you can optimize the images on your website by compressing them. To do this, select the images in the Images tab and click "Compress." The images will be converted to the WebP format and the file size will be reduced.

By providing images in modern formats, you can improve the performance and loading speed of your website. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites. Just be sure to choose the appropriate format for your images based on their content and the balance of file size and quality that you want to achieve

‍

2. Minify CSS and JavaScript code

Optimizing JavaScript in Webflow can help improve the performance and loading speed of your website. One way to do this is by compressing the JavaScript data. This reduces the size of the JavaScript files, which can help reduce the amount of time it takes for them to download and execute.

To compress the JavaScript data in Webflow, go to the Publish tab in your Webflow Dashboard and select all of the Minify options under "Advanced Options." This will automatically minify your JavaScript files and reduce their size.

By optimizing JavaScript, you can improve the performance of your website and enhance the user experience. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites.

‍

3. Disable lazy loading for images in the visible area

By default, all images in Webflow are set to lazy loading, which means that they are not loaded until they are needed. While this can be helpful for reducing the initial loading time of a webpage, it can negatively impact the performance of images in the visible area. Google does not evaluate this positively, as it can lead to a slower loading speed for these images.

If you want to optimize the performance of your images in Webflow, it's important to disable lazy loading for images that are in the visible area. This includes logos, which are usually always immediately visible when a page loads. To disable lazy loading for your logo, select it within Webflow and go to the cogwheel. Under "Load," select "Auto: Defaults to browser."

Disabling lazy loading for images in the visible area can help improve the loading speed of your website and enhance the user experience. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites. Just be aware that disabling lazy loading for all images on your website can increase the initial loading time of your pages, so it's important to balance the trade-off between performance and user experience.

‍

4. Sizing logos & small graphics

Sizing logos and small graphics correctly in Webflow can help improve the performance and loading speed of your website. There are several image settings that you can use to achieve this:

• Set the width and height: By specifying the width and height of an image in pixels, you can help ensure that the image is displayed at the appropriate size on the webpage. This can prevent the image from being stretched or distorted and can reduce the amount of time it takes for the image to load.
• Use "Fit cover": This setting scales the image to cover the entire area of the container while maintaining the aspect ratio of the image. This can be useful for images that are used as backgrounds or for images that need to be displayed at a specific size.
• Use "Fit contain": This setting scales the image to fit within the container while maintaining the aspect ratio of the image. This can be useful for images that are used as logos or small graphics, as it can help prevent the image from being stretched or distorted.

‍

5. Avoid large network payload through background videos

Background videos are a popular feature on websites and can be easily embedded with Webflow. However, they can also impact the performance and loading speed of your website. When a video is integrated into your Webflow website, it is compressed to reduce the file size. However, the high network payload of the video can still lead to a deterioration in the PageSpeed Score, especially on smartphones. This is because a large amount of bandwidth is required to download and display the video, which can slow down the loading time of the webpage.

To optimize the performance of your background videos in Webflow, you can use an HTML embed to reduce the number of sources. To do this, you will need to find the link to your video and use it as the source in the HTML embed code. In PageSpeed Insights, the transmission source with the associated link is displayed directly, so you can easily copy and paste it into the HTML embed. You can also copy the embed code from a sample Webflow project with a video (link provided below).

By using an HTML embed to reduce the number of sources, you can improve the loading speed of your website and enhance the user experience. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites. Just be aware that embedding videos can increase the size of your webpage, so it's important to balance the trade-off between performance and file size.

‍

6. Set images / videos correctly and prioritize for visible area

The visible area of your website is crucial for your page speed. If there is not only a logo but also a large image or video in this area, you should take action. If an image is located in the visible area of your website, the PageSpeed Insights may suggest that you set an explicit width and height for the image. You can either specify these dimensions in the Image Settings or select "Fit cover" and give the image a fixed height and width.

Optimizing images in the visible area can help improve the loading speed of your website and enhance the user experience. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites. By setting explicit dimensions or using "Fit cover," you can help ensure that your images load quickly and smoothly. Just be aware that optimizing images can increase the size of your webpage, so it's important to balance the trade-off between performance and file size.

‍

7. Upload CMS images in WebP format

In addition to optimizing the images on your website, it's also important to optimize the images in your webflow CMS (Content Management System). By uploading all of your images in the WebP format, you can improve the performance and loading speed of your website. To do this, you will need to check all of the images in your blog grid and make sure that they are in the WebP format.

Using the WebP format for your CMS images can help reduce the file size and improve the loading speed of your website. It can also have a positive impact on your ranking on search engines like Google, which prioritize fast and efficient websites. Just be aware that converting your images to the WebP format may affect their quality, so it's important to choose the appropriate level of compression based on the needs of your website.

By optimizing the images in your CMS, you can enhance the user experience and improve the performance of your website. It's an important step in maintaining a fast and efficient website that is attractive to visitors and search engines alike.

‍

8. Avoid many animations and thus more Java Script code

As the heading suggests, animations can be attractive and easy to implement with Webflow, but they can also increase the loading time of your website and result in a lower PageSpeed Score. It's important to weigh the benefits of individual animations against the importance of a fast loading time for your website. If you decide that animations are important for your project, be sure to avoid unnecessary JavaScript code to minimize their impact on the performance of your website.

In general, it's a good idea to be mindful of the number and complexity of the animations on your website. While they can add visual appeal and interactivity, they can also slow down the loading time of your webpage and affect the user experience. By optimizing your animations and minimizing their impact on the performance of your website, you can enhance the user experience and improve your ranking on search engines like Google, which prioritize fast and efficient websites.

‍

9. Avoid Lottie Files if possible

Lottie files are a popular choice for adding animations to websites, but they can also have a negative impact on the performance and loading speed of your website. Large Lottie files, in particular, can take up a significant amount of space and cause your website to load slower. This can be especially problematic for mobile users, who may have slower internet connections or limited data plans.

To avoid the negative impact of Lottie files on your website's performance, it's a good idea to evaluate the importance of the animations that you want to include. If possible, try to minimize the size of your Lottie files and use them sparingly to avoid dragging down your website's score. It may also be worth considering alternative animation options that are more lightweight and perform better on different devices.

‍

10. Use CSS animations if possible

Using CSS for simple hover animations can be a more efficient way to create interactions in Webflow, as it avoids the need to generate additional JavaScript code. This can help improve the performance and loading speed of your website.

For those familiar with custom code, you can also use jQuery to add an additional class to an element on click, hover, etc., which can change the styling of the entire element. The jQuery Builder by Timothy Ricks is a useful tool for creating and testing custom jQuery code.

Keep in mind that using CSS or jQuery to create interactions can be more complex than using the built-in interactions in Webflow, so it may not be suitable for everyone.

‍

11. Reuse CSS styles and build them logically

Reusing CSS styles and building them logically can help improve the performance and loading speed of your website. Here's how:

• Reuse styles: Instead of defining the same styles multiple times, you can reuse existing styles by giving them a class name and applying that class name to the elements that you want to style. This can reduce the amount of CSS code that needs to be loaded and parsed by the browser, which can improve the loading speed of your website.
• Build styles logically: When building your styles, it's a good idea to group similar styles together and organize them in a logical way. This can make it easier to read and maintain your CSS code and can also help improve the loading speed of your website.

By reusing CSS styles and building them logically, you can reduce the amount of code that needs to be loaded and parsed by the browser, which can improve the performance and loading speed of your website. It can also make it easier to read and maintain your CSS code, which can save time and effort in the long run.

12. Remove unused interactions and CSS styles

Removing unused interactions and CSS styles can help improve the performance and loading speed of your website. Here's how:

• Remove unused interactions: In Webflow, you can create interactions that trigger actions when a user interacts with an element on your website. If you have interactions that are no longer being used or are no longer needed, it's a good idea to remove them. This can reduce the amount of code that needs to be loaded and parsed by the browser, which can improve the loading speed of your website.
• Remove unused CSS styles: It's a good idea to review your CSS code regularly and remove any styles that are no longer being used. This can reduce the amount of code that needs to be loaded and parsed by the browser, which can improve the loading speed of your website. It can also make it easier to read and maintain your CSS code, which can save time and effort in the long run.

Fortunately, Webflow makes it easy to find and clean up unnecessary code. To do this, simply go to the Interactions section and click on 'Clean up'. This will delete all class names that are not being used, which can reduce the amount of code that needs to be loaded and parsed by the browser and improve the loading speed of your website.

‍

13. Host your font yourself and do not load it via Google Fonts

Including Google Fonts in your Webflow project in a way that complies with the General Data Protection Regulation (GDPR) is important for protecting the privacy of your website's users. One way to do this is by downloading the font family and including it as a custom font in your project. This allows you to use the font in Webflow Designer without the need to include additional Google scripts that could potentially collect data from your users.

To integrate Google Fonts into your Webflow project in a GDPR-compliant way, follow these steps:

1. Download the font family that you want to use from the Google Fonts website.
2. In your Webflow project, go to the Assets tab and click on 'Add Custom Font'.
3. Upload the font family that you downloaded from the Google Fonts website.
4. Use the uploaded font in your Webflow Designer by applying it to the text elements that you want to style.

By following these steps, you can include Google Fonts in your Webflow project in a way that complies with the GDPR and protects the privacy of your users. It's an important consideration for any website, especially in today's digital landscape where data privacy is a top concern.

I hope these tips were helpful for you and that you were able to find some useful information about optimizing the performance and loading speed of your website in Webflow. Whether you're a beginner or an experienced designer, there are always ways to improve the speed and efficiency of your website.

By following these tips and best practices, you can create a faster, more efficient website that provides a better experience for your users and is more attractive to search engines. Whether you're looking to optimize your website for search engines or simply want to improve the user experience, these tips can help you achieve your goals.

If you have any questions or need additional guidance, don't hesitate to reach out. I'm always happy to help!