How can I optimize the speed and performance of my project on Cloudflare with assets stored on assets.website-files.com?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To optimize the speed and performance of your project on Cloudflare with assets stored on assets.website-files.com, you can follow these steps:

Leverage Cloudflare caching: Cloudflare provides a content delivery network (CDN) that can cache your assets and deliver them from the closest data center to your website visitors. This helps reduce latency and improves page load time. To enable caching for assets.website-files.com, you can create a Page Rule in your Cloudflare dashboard. Specify the URL pattern for the assets (e.g., assets.website-files.com/*) and set a caching level (e.g., "Cache Everything").
Utilize Cloudflare Workers: Cloudflare Workers allow you to run custom JavaScript code on Cloudflare's edge servers. You can use Workers to manipulate or enhance your asset delivery. For example, you can rewrite asset URLs to have them served directly from the CDN edge servers, reducing round trips to the origin server. By leveraging Workers, you can further enhance the speed and performance of your project.
Optimize asset delivery: There are several techniques you can employ to optimize the delivery of assets from assets.website-files.com:

Minify and compress assets: Minify and compress your CSS and JavaScript files to reduce their size. This helps improve load times by reducing the amount of data that needs to be transferred.
Combine external files: If your project includes multiple CSS or JavaScript files, consider combining them into a single file. This reduces the number of HTTP requests and improves load time.
Optimize images: Compress and optimize your images to reduce their file size without sacrificing quality. Use tools like ImageOptim or TinyPNG to automatically optimize your images before uploading them to assets.website-files.com.
Implement lazy loading: Lazy loading defers the loading of offscreen images until the user scrolls to them. By implementing lazy loading, you can improve initial page load times by only loading the images that are initially visible.

Review Cloudflare performance settings: Cloudflare provides various performance settings that you can tweak to further optimize the delivery of your assets. Some important settings to consider are:

Auto Minify: Enable the Auto Minify feature in your Cloudflare dashboard to automatically minify your HTML, CSS, and JavaScript files.
Brotli Compression: Enable Brotli compression to further reduce file sizes and improve asset delivery.
Rocket Loader: Rocket Loader is a tool that prioritizes the loading of your website's critical assets, improving perceived load time.

By leveraging Cloudflare's caching, utilizing Workers, optimizing asset delivery, and reviewing performance settings, you can significantly improve the speed and performance of your project on Cloudflare with assets stored on assets.website-files.com.

Additional questions:

How can I enable caching for assets on Cloudflare?
What are Cloudflare Workers and how can they enhance asset delivery?
What are some best practices for optimizing asset delivery on a website?

How can I host a section of my website with Webflow without using a subdomain?

Can I use my Dreamhost account to host my Webflow website without purchasing a site plan on Webflow? If so, how can I do this?

Is there a way to fix the "Too many redirects" error that I am getting when trying to access my Webflow-published site hosted on a different domain provider?

Does Webflow's siteplan include a CDN for hosting background videos at a better quality?

Have you experienced any issues with DNS settings in Webflow?

Is it possible to host the marketing pages on www.example.com/legal, www.example.com/privacy and the web app on www.example.com/dashboard, www.example.com/create while moving the React app from app.example.com to example.com for SEO reasons?

What happens to the hosting plan when a published site is no longer in the Webflow workspace?

Do I need to buy a separate custom domain from vendors like Google or Go Daddy in order to have a web address of my name.com instead of name.webflow.io on a CMS site plan?

Can a domain name point to WebFlow's proxy server while having the root domain set up on a different server and redirect requests back to the subdomain?

How can I force the browser to get the latest version of CSS and Interactions on a website hosted on Godaddy server from a Webflow export?