I’ve built a landing page using Flutter Web, but I am struggling with the SEO indexing and the large initial JS bundle size. Is there a way to make the app more discoverable by search engines, or should I be using a multi-page approach with something like Jaspr or simply embedding Flutter in a native HTML site?
3 answers
Honestly, Flutter Web isn't designed for SEO-heavy landing pages; it's better for web apps. However, you can improve things by using the HTML renderer instead of CanvasKit to reduce the initial payload by about 2MB. For indexing, you must use a tool like Prerender.io or manually generate a sitemap.xml that points to static snapshots of your content. I usually recommend building the marketing landing page in Webflow or plain HTML and then redirecting users to the Flutter-built dashboard to get the best of both worlds.
Does the HTML renderer still cause layout inconsistencies when using custom shadows or complex gradients on mobile browsers?
Use the "deferred loading" feature in Dart. It lets you split your code into smaller chunks so the user doesn't have to download the whole app at once.
Deferred loading is a lifesaver. It brought our initial "Time to Interactive" down from 8 seconds to under 3 seconds on standard 4G connections.
Yes, Lawrence, the HTML renderer often struggles with complex effects that CanvasKit handles easily. If your design relies on heavy UI effects, stick with CanvasKit and focus on deferred loading of assets to keep the perceived speed high.