# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wong-coupon.gitbook.io/flutter/pain-point/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.