Vous avez créé un beau site dans Framer. Les animations sont fluides dans l'éditeur, le design est soigné et tout semble rapide sur votre MacBook Pro. Puis vous lancez un test PageSpeed et vous voyez un score de 45.
Vous n'êtes pas seul. De nombreux sites Framer obtiennent des résultats décevants sur les Core Web Vitals de Google, en particulier sur mobile. Voici pourquoi cela tend à se produire, et ce que vous pouvez y faire.
Les chiffres de performance
L'audit de dizaines de sites Framer au cours de l'année passée révèle un schéma constant :
| Métrique | Moyenne Framer | Seuil "Bon" de Google | Moyenne Next.js |
|---|---|---|---|
| Score PageSpeed mobile | 42-65 | 90+ | 92-99 |
| Largest Contentful Paint | 3,2-5,8 s | Moins de 2,5 s | 0,8-1,5 s |
| Total Blocking Time | 400-1 200 ms | Moins de 200 ms | 10-80 ms |
| Cumulative Layout Shift | 0,05-0,25 | Moins de 0,1 | 0-0,02 |
Ce sont des fourchettes typiques observées sur des sites d'entreprise Framer avec des animations, du contenu CMS et des composants personnalisés. Les sites plus simples s'en sortent mieux, mais la complexité tend à faire baisser les scores.
Pourquoi les sites Framer peuvent être lents
Bundle JavaScript lourd
Framer envoie un runtime JavaScript volumineux à chaque page. Ce runtime alimente le moteur d'animation, le rendu CMS et le système de composants. Même une simple landing page avec un contenu minimal charge 200-400 Ko de JavaScript avant que votre contenu réel n'apparaisse.
Sur un téléphone Android milieu de gamme avec une connexion 4G, l'analyse et l'exécution de ce JavaScript prennent 1 à 3 secondes. C'est avant que les images se chargent, avant que les polices s'affichent, avant que l'utilisateur voie quoi que ce soit d'utile.
Rendu côté client
Framer rend les pages principalement côté client. Le navigateur télécharge le HTML, puis le JavaScript, puis le JavaScript construit la page. Avec Next.js, le serveur envoie un HTML entièrement rendu : le navigateur affiche le contenu immédiatement pendant que le JavaScript se charge en arrière-plan.
C'est pourquoi votre site Framer semble rapide sur votre ordinateur portable mais obtient de mauvais scores PageSpeed. Le test simule un vrai appareil mobile sur une vraie connexion mobile, pas un MacBook sur la fibre.
Surcharge des animations
Le système d'animation de Framer est puissant mais coûteux. Chaque animation déclenchée au défilement, chaque effet de survol et chaque transition de page s'ajoutent au coût d'exécution JavaScript. Des animations fluides sur desktop peuvent provoquer des saccades visibles sur des appareils mobiles moins puissants.
Optimisation d'image limitée
Framer gère l'optimisation basique des images, mais vous n'avez aucun contrôle sur les formats, les réglages de qualité ou les stratégies de dimensionnement responsive. Le composant Image de Next.js sert automatiquement du WebP/AVIF dans les bonnes dimensions pour chaque appareil, avec chargement différé et placeholders en flou progressif. La différence de poids d'image seule peut atteindre 50-80 %.
Ce que vous pouvez faire dans Framer
Si vous souhaitez rester sur Framer, des améliorations concrètes sont possibles :
- Réduire le nombre d'animations, chacune ayant un coût en performance
- Compresser les images avant de les téléverser plutôt que de compter sur l'optimisation de Framer
- Limiter les code overrides personnalisés et les scripts intégrés
- Supprimer les composants et sections inutilisés
- Éviter les structures de composants profondément imbriquées
De manière réaliste, ces optimisations peuvent améliorer votre score de 10 à 15 points. Si vous êtes à 45, vous pourriez atteindre 55-60. Toujours en dessous du seuil que Google considère comme de "bonnes" performances.
Le coût commercial
Google utilise les Core Web Vitals comme signal de classement. Une expérience mobile lente se traduit par un positionnement plus bas dans les résultats de recherche. Au-delà du SEO, 53 % des visiteurs mobiles quittent un site qui met plus de 3 secondes à charger (données Google). Si le LCP de votre site Framer dépasse 4 secondes, vous perdez des visiteurs avant qu'ils ne voient votre contenu.
Pour les sites qui dépendent du trafic organique ou des conversions issues de publicité payante, de mauvaises performances impactent directement le chiffre d'affaires. Chaque 100 ms de temps de chargement supplémentaire réduit les taux de conversion d'environ 1 %.
L'alternative
Une refonte en Next.js préserve votre design tout en corrigeant les problèmes de performance sous-jacents. Le résultat visuel reste identique : même mise en page, mêmes animations, même identité de marque. Le mécanisme de diffusion passe du JavaScript rendu côté client au HTML rendu côté serveur avec des ressources optimisées.
Le résultat est généralement un bond de 45-65 à 92-99 au PageSpeed mobile dans les projets de migration menés par webvise. Même design, performances sensiblement meilleures. Meilleur positionnement, taux de rebond réduit, conversions en hausse.
Si votre site Framer est un outil commercial et non une simple vitrine de portfolio, les performances méritent d'être prioritaires. Testez votre site dans PageSpeed Insights sur mobile et voyez où vous en êtes. Les chiffres vous diront si l'optimisation sur la plateforme est suffisante ou si vous avez atteint les limites de l'architecture de Framer pour votre cas d'usage.