How can I improve the loading speed of my Webflow website after creating a new page?

TL;DR
  • Optimize images, enable minification, and use lazy loading.
  • Limit custom fonts, clean unused code, and utilize Webflow's features while regularly testing speed.

Improving the loading speed of your Webflow website after adding a new page involves several optimization techniques.

​

1. Optimize Images

  • Resize and compress images before uploading to Webflow. Use tools like TinyPNG or ImageOptim.
  • Use modern formats like WebP instead of JPEG or PNG where possible.
  • Ensure images are set to responsive in Webflow to adjust according to screen sizes.

​

2. Minimize and Combine Files

  • Enable minification for HTML, CSS, and JavaScript in your project settings.
  • Combine CSS and JavaScript files where possible to reduce HTTP requests.

​

3. Use Lazy Loading

  • Enable lazy loading for images and media by setting the loading="lazy" attribute in the image settings panel.

​

4. Limit Use of Custom Fonts

  • Reduce the number of custom fonts used and only load necessary weights and styles.
  • Consider using system fonts where possible to avoid additional loading time.

​

5. Clean-up Unused Code

  • Remove any unused CSS or JavaScript that might have been included in the new page.
  • Audit third-party scripts and only include essential ones.

​

6. Utilize Webflow's Built-in Features

  • Turn on fastly CDN in Webflow’s hosting settings for faster content delivery.
  • Regularly check the site audit tool in the Webflow dashboard for potential speed improvements.

​

7. Test Loading Speed

  • Use Google PageSpeed Insights or WebPageTest to analyze page speed and obtain specific tips for improvement.
  • Continuously monitor performance after changes to ensure optimal speed.

​

Summary

To improve the loading speed of your Webflow site, optimize images, minify files, utilize lazy loading, limit custom fonts, clean up unused code, and use Webflow’s built-in features. Regular testing with tools like Google PageSpeed Insights can further assist in keeping your site fast and efficient.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the error message "Default not allow for this domain" in Webflow referring to?
How can I add a custom map marker to Google Maps using Webflow?
Can Facebook Messenger be added to a Webflow website?
How can I remove the green color that appears when I select a section in the navigation bar for mobile on Webflow?
How can I embed the real-time menu from SinglePlatform onto my Webflow website?
What is the recent feature added to Webflow that enables users to specify a fully qualified URL in the "Redirect to Page" field?
How can I customize the dots in Webflow slides nav to match a specific design using CSS or uploaded SVG icons? Can someone provide me with a few lines of custom code for this?
How can I change the font color of the links in my Webflow Navbar when hovering over it and when hovering over the links directly?
Where can you adjust the speed of smooth scrolling in Webflow?
What can I do to fix the issue with the navigation links not working properly when scrolling past the hero animation in my Webflow project?
How do I integrate a Three.js powered animation into my Webflow project?
What are some ways to resolve compatibility issues with Internet Explorer on my Webflow website?
How do I get my Webflow site live when I am receiving a DNS probe finished nxdomain error and the CName setting is not propagating correctly?
What font should I use in Webflow for maximum accessibility across different devices and operating systems? Is there a section in the forum dedicated to accessibility?
How can I capture and display messages returned from a custom action URL or API endpoint in Webflow? Specifically, I am integrating Stripe donations and need to show a different message for successful charges and failed charges. Can I submit the form to a different page for processing and then redirect the user to a success or error page based on the outcome?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?