My first content paint is ~2.5s which is very slow knowing that the first thing I show is a small splash screen (on x2 screens it’s 4kB and x3 screens it’s 8kB).
My index.html has the following:
<head>
<link rel="manifest" href="manifest.json">
<script defer src="src/swipe_back.js"></script>
<link rel="preload" href="main.dart.js" as="script">
<link rel="preload" href="flutter_bootstrap.js" as="script">
<link rel="preload" href="assets/FontManifest.json" as="fetch" crossorigin>
<link rel="preload" href="assets/AssetManifest.json" as="fetch" crossorigin>
<!-- Firebase SDK -->
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js" as="script" crossorigin>
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js" as="script" crossorigin>
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-analytics.js" as="script" crossorigin>
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js" as="script" crossorigin>
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-storage.js" as="script" crossorigin>
<link rel="preload" href="https://www.gstatic.com/firebasejs/10.11.1/firebase-app-check.js" as="script" crossorigin>
</head>
<body>
<picture id="splash">
<source
srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x">
<img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
</picture>
<script src="flutter_bootstrap.js" async></script>
</body>
I don’t understand why the FCP is slow, and how I can make it faster. I tried hosting the website in Firebase and Cloudfare. The result was the same. My website is hosted in Europe and the speed test was performed in Europe too.