Hi Dave,

I recently heard from the (FFDC) that they will improve performance in flutter flow 5.0 update. So before diving into any major changes, I recommend updating your flutter flow app and testing your project again to see if the enhancements make a difference.

In the meantime, here are some optimization tips to help speed up your website:

1. Remove Unused Layout Widgets

Review your layout and eliminate any widgets that aren’t in use. This can help reduce the load on your app and improve performance.

2. Optimize Image Handling

Use any image compressor package to resize and compress images. This can significantly improve load times, especially if you’re working with high-resolution images.

3. Optimize Queries

Try using a single query for your page and generate children dynamically based on variables. You can still sort and filter the data as needed, but this approach minimizes database calls, enhancing performance.

4. Custom Header Screen

Consider creating a custom loading screen with HTML and CSS to enhance user experience while the page loads.

Go to web deployment and add your Custom Header, Here’s an example:

<!DOCTYPE html>\n<html>\n<head>\n  <title>Website title</title>\n  <meta name=\"EVAR\" content=\"EVAR\">\n  <style>\n    body {\n      margin: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100vh;\n      overflow: hidden; /* Ensure no scrollbars appear */\n    }\n    #wm-loading-animation {\n        opacity: 0;\n        animation: fadeInOut 1.5s infinite alternate;\n    }\n    .hide-animation {\n      opacity: 1;\n      transition: hideAnimation 1s forwards;\n    }\n    .logo {\n      width: 100%;\n      height: 100%;\n      object-fit: cover; /* Ensures the image covers the full area without distorting */\n    }\n    @keyframes fadeInOut {\n      0% {\n          opacity: 0;\n      }\n      100% {\n          opacity: 1;\n      }\n    }\n    @keyframes hideAnimation {\n      0% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n  </style>\n  <script>\n    (function() {\n      // Ensure that the script runs after the DOM has loaded.\n      document.addEventListener(\"DOMContentLoaded\", function() {\n        // Get the loading animation element by ID.\n        var loadingAnimation = document.getElementById(\"wm-loading-animation\");\n\n        // Set a timer to hide the loading animation after 2 seconds (2000 milliseconds).\n        var timer = setTimeout(function() {\n          loadingAnimation.classList.add(\"hide-animation\");\n        }, 2000);\n\n        // Check if the page has finished loading.\n        if (document.readyState === \"complete\") {\n          // If the page has finished loading, clear the timer.\n          clearTimeout(timer);\n          // Hide the loading animation immediately.\n          loadingAnimation.classList.add(\"hide-animation\");\n        } else {\n          // If the page has not finished loading, wait for it to load.\n          window.addEventListener(\"load\", function() {\n            // Once the page has finished loading, clear the timer.\n            clearTimeout(timer);\n            // Hide the loading animation immediately.\n            loadingAnimation.classList.add(\"hide-animation\");\n          });\n        }\n      });\n    })();\n  </script>\n</head>\n<body>\n  <div class=\"main-content\" id=\"wm-loading-animation\">\n      <img class=\"logo\" src=\"https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/parking-app-2u8zk7/assets/jz7ph24irf3t/intro.gif\" /> \n  </div>\n</body>\n</html>

Upload your own gif link.

5. Consider Firebase Hosting

If performance issues persist, try deploying your app using Firebase Hosting. It can offer slightly better performance than FlutterFlow’s hosting. You can follow this guide for deployment: Deploying FlutterFlow Web App to Firebase Hosting.

These tips should help improve your site’s speed and overall user experience. Let me know how it goes!

Optimizing Page Speed for Web Publishing