Web

Flutter Web Issues: Performance, SEO, and More

Last updated 1 month ago

Flutter Web Issues: Performance, SEO, and More

Challenges When Building a Flutter Web Application

Visit my website , 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.

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.

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.

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:
  - Flutter is moving towards WebAssembly support to reduce page load time.
  - Reference: .
- Potential Benefits:
  - Performance close to native applications.
  - Smaller package size.

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.

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.

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.

Last updated 1 month ago

Visit my website , 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.

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.

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.

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:
  - Flutter is moving towards WebAssembly support to reduce page load time.
  - Reference: .
- Potential Benefits:
  - Performance close to native applications.
  - Smaller package size.

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.

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.

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.