Images can be downloaded, and served from the same domain as the website itself. This helps with performance, and ensures they are hosted sustainably if a green web host is used.
At the time of writing, Webflow does not serve WebP or AVIF versions of images. Flowty runs all images through an optimisation step and serves modern formats with a fallback for older browsers.
Background images that are requested via CSS also get downloaded locally, and run through an optimisation step to reduce their size.
Like images, Flowty also downloads Webflow CSS files and serves them locally.
An optional step to help with performance. Flowty extracts the CSS required for the initial rendering of a page, and inlines it into the HTML.
An optional step that should be used with care. Flowty checks each page, and generates a file CSS that includes only the declarations required by that page. This can greatly reduce the CSS file size for some pages.
The same idea as CSS and images. Flowty downloads both the Webflow JS and jQuery files used by a site.
Some sites don’t much interactivity. In these cases, designers can save kilobytes by removing the Webflow JS or jQuery files from the site.
Webflow allows designers to use Google Fonts or upload their own custom fonts. Flowty downloads these font files and hosts them on the same origin as the site itself.
Background videos uploaded to Webflow are downloaded by Flowty and served locally.
Flowty uses the Lite Youtube Embed package to significantly reduce the amount of data consumed by embedded Youtube videos when a page is first loaded.
One top of having the option to host a Webflow site on a sustainable hosting provider, plus the optimisations mentioned above, Flowty has a few extra bonuses that designers can leverage.
As the web platform continues to evolve, I’ll be looking at how to bring in more sustainability and performance optimisations into Flowty.