Arrêter le pli en attente lors de l'hydratation, et dégager la fenêtre de charge

Performancekamo-marketing
Expédié
19 août 2026 à 17:29 UTC
Auteur
Kamo
Commite
917ad87

La page d'accueil a été entièrement en train de se plier. Framer Motion sérialise une «initiale» de l'élément HTML prérenduite en tant que style en ligne, donc le balisage Arrivé avec le 'h1', la colonne de copie, l'ouverture de la bobine et la totalité de la bossée Retournez de cette façon jusqu'à ce que React ait téléchargé, parsed et hydraté et exécuter sa première trame d'animation. Tout d'abord et La plus grande peinture contenteuse mesure donc un quart-mégaoctet JavaScript bundle plutôt que la page: le serveur avait déjà rendu le titre, et Un script le retenait. Rien ne voit ça - pas la construction, le type vérifier, le peluissement ou le garde-viseur de navigation - et sur un lien de bureau il est invisible. EP et comptez la page et nombre d'entre elles: 102 d'entre eux, chaque élément au-dessus du pli parmi eux. Les mêmes entrées, aux mêmes durées et au relâchement, sont maintenant des images clés CSS. La feuille de style est analysée avant qu'un seul script ait été récupéré. Le LCP l'arrière-plan utilise une transition plutôt qu'un élément clé, parce qu'une transition le fait ne pas courir sur le rendu initial - donc le cadre qui est à l'arrivée est simplement Avec rien pour LCP d'attendre. Le reste de la fenêtre de chargement, par ordre décroissant de ce qu'il en coûte: La bobine a commencé à payer à partir du premier octet «preload» "metadata", a affiche sur l'élément, et ouverture d'une échelle adaptative sur le train de 540p à 1,17 Mbps pour une ouverture qui, sur une vue étroite se trouve sous le pli, sous la colonne Copie. Il attend maintenant l'événement de chargement, puis pour la principale fil à rester inactif, puis à l'ouverture de venir à l'intérieur d'une fenêtre d'affichage. Niveau est plafonné à la taille du joueur et commence sur le crosse inférieur sur un téléphone. Les lecteurs de Save-Data et 2G/3G conservent le cadre de l'affiche et le bouton de redémarrage. L'affiche elle-même était un JPEG de 93 ko sur un en-tête de cache d'une journée. Par l'intermédiaire de la image optimisement c'est un AVIF de 26 KB sur une URL immuable, et ce n'est pas le cas. floconait jusqu'à ce que la bobine soit désirée. Le logo de la marque est 132 ko de sortie en poirasse à huit décimales, préchargés en tant que produit. image, pour dessiner une marque de 140 px de large. A arrondi à la décimale d'une unité 3503 l'espace avec le remplissage répété trempé, il est de 59 KB - géométriquement identique à 0.0023 CSS px à la plus grande taille il est jamais rendu à. scripts/ L'optimilation est idempotent, pour la prochaine fois le logo est exporté. GSAP était sur la liste de scripts enthousiastes de chaque page du site, quatre fois over: un tween sur la lueur de la barre de progression, 'gsap.set()' écriture deux statiques propriétés de style, a de la feuille de style «fromTo» faisant double emploi avec une ondulation Animation déjà animée, et un appel à l'heure globale qui ne fait que des incendies pour les lecteurs qui ont demandé une demande de requête réduite. Tous les quatre sont partis de la critique chemin; la dernière charge la bibliothèque à l'intérieur de sa branche. Touchoptimisé mesure chaque bouton, lien et entrée sur la page pendant hydratation, entrelacement de chaque lecture avec les écritures de l'élément précédent - a Bouteille de mise en place forcée plusieurs centaines d'éléments long, atterrissage en Temps de blocage total au téléphone, il existe pour aider. Il se compose maintenant de la lit et attend le ralenti. « Stratégie de configuration » "après Interactive" émet un lien "rel" "précharge" "script", qui a demandé au navigateur de chercher le traqueur d'analyse à une priorité élevée à côté du fond du héros. ParzyOnloads continue d'enregistrer le visitez, un moment plus tard et hors du chemin critique. Le héros a monté trois couches de fond de port plein. La rotation est Un bureau uniquement, donc sur un téléphone, deux d'entre eux étaient en permanence zypaité: 0. Les deux lignes de localStorage ont été exportées à partir de la la bannière de consentement, donc le contrôle des cookies "gérer" du pied-pieds a glissé 250 lignes de Framer Motion en un morceau qui rend dans le HTML initial. Il se déplace vers app/lib/cookie-consent.ts, et la bannière et la pile de toast se montent maintenant sur idil: ni l'absence de peinture à l'arrivée. - 'experimental.optimizeCss' imprimé "- optimiseCs" dans chaque construction et a fait Rien. Il met en évidence le CSS critique en post-traitement en HTML fini, qui le routeur d'application ne le livre jamais. Vérifié par rapport à la production construite avec le Le backend en tant que mal de la tête en fait installé: zéro - style - blocs dans "head", le Feuille de style est toujours un simple blocage. Suppression - un drapeau qui signale Le succès, alors que l'inerte se lit comme une optimisation déjà prise. 36 sélecteurs de classe et 24 images clés dans globals.css sans référence n'importe où dans le dépôt, fournisseur et documents inclus. Des octets de chemin critique, gzip, déployés contre une construction propre: html 38,101 et 36 277 js 281 700 euros css 18 629 et 17 398 logos 57 390 euros 22 902 Total 395 820 : 322 284 (-19%) scintillés 15 et 13 Hors de la fenêtre de chargement entièrement au-dessus de celle-ci: l'affiche de 93 KB, le HLS manifester et ses segments de 1,17 Mbps, deux images d'arrière-plan et le tracker. Non adressé ici: répond 307 à z/en, qui est l'URL a page-speed run les essais et ceux que le phare est considéré comme une redirection. La seule vraie solution est «localePrefix: 'en fonction des besoins', et qui réécrit les canoniques, hreflang, les sitesmaps et chaque href interne sur les 250 liaisons dans 22 localités, tandis que 301-ing chaque indexé /en/ URL indexé. Il s'agit d'une décision SEO plutôt que d'une décision de performance, et le haut coûte 60 ms sur une connexion déjà ouverte.

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation