My Linked My Website My packages

Web

Flutter Web Issues: Performance, SEO, and More

Challenges When Building a Flutter Web Application

Performance and Page Load Time

  • Visit my website wongcoupon.com, and you'll notice that the initial page load time is quite long. On a computer, it takes around 3 seconds, but on mobile devices, it takes even longer. I've tried optimizing my website as much as possible, but it hasn't been effective. Previously, the page load time was about 4 to 5 seconds.

SEO Challenges

  • I've tried various methods to integrate SEO into my website. While SEO does work, it doesn’t perform as well as expected. I built a discount coupon website, where quick user access is essential. I purchased a domain and optimized it for Google SEO, but after some time, it no longer performed as expected. Search engines started treating my website as low-quality content because they couldn’t detect text within the page. This makes it difficult for search engines to distribute my website to users.

Internationalization and Translation

  • Flutter Web uses the CanvasKit renderer to render the UI. This means the entire UI, including text, is drawn on a single canvas using WebGL and WebAssembly. As a result, translation tools cannot detect the text for translation. However, this also ensures a UI experience similar to mobile applications.

Debugging and Inspecting Elements

  • This also means that we cannot inspect elements using Developer Tools.

Strategies to Overcome Flutter Web Challenges

Improving Page Load Time

  • Code Optimization:

    • Remove unnecessary imports. Unlike mobile, only importing the necessary files can reduce build time.

  • Deferred Loading:

    • Implement lazy loading for non-essential widgets. I applied this technique to website navigation, so the page doesn't need to load other parts before being usable.

  • Looking Ahead to WebAssembly:

    • Understanding WebAssembly:

    • Potential Benefits:

      • Performance close to native applications.

      • Smaller package size.

Implementing Responsive Design

  • Unlike mobile apps, web applications must adapt to various screen sizes. I’ve written an article about responsive design, which you can check out here.

Responsive

  • If you want to experience the responsiveness of my website, visit wongcoupon.com.

What Type of Websites Is Flutter Web Suitable For?

Suitable Use Cases

  • After building a website with Flutter, I realized that it's best suited for admin dashboards where developers want to leverage Flutter's programming language to build both mobile and web applications.

Not Suitable For

  • As mentioned earlier, Flutter Web is not suitable for SEO-driven websites that require fast page load times. E-commerce websites or other platforms serving end users are not ideal candidates for Flutter Web development.

Buy Me a Coffee | Support Me on Ko-fi

PreviousSalt

Last updated