> For the complete documentation index, see [llms.txt](https://wong-coupon.gitbook.io/flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wong-coupon.gitbook.io/flutter/pain-point/web.md).

# Web

## **Challenges When Building a Flutter Web Application**

### **Performance and Page Load Time**

* Visit my website [mymoneycoupon.web.app](https://mymoneycoupon.web.app/), 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:**
    * Flutter is moving towards WebAssembly support to reduce page load time.
    * Reference: [Flutter WebAssembly Documentation](https://docs.flutter.dev/platform-integration/web/wasm).
  * **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.

{% content-ref url="/pages/CTKWji67N7nUi8hjGxHc" %}
[Responsive](/flutter/ui/responsive.md)
{% endcontent-ref %}

* If you want to experience the responsiveness of my website, visit [mymoneycoupon.web.app](https://mymoneycoupon.web.app/).

## **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](https://buymeacoffee.com/ducmng12g) | [Support Me on Ko-fi](https://ko-fi.com/I2I81AEJG8)