Mettre en valeur son site sur sa page d’accueil ou son portfolio, sans la ralentir

Le dilemme : impressionner sans ralentir

Le haut de ta page d’accueil est l’endroit le plus regardé de ton site. C’est là qu’un beau visuel de ton produit ou de tes réalisations a le plus d’effet. C’est aussi là que la vitesse compte le plus : l’élément le plus grand affiché à l’ouverture de la page sert de repère pour mesurer la rapidité d’affichage, un critère que les moteurs de recherche prennent en compte.

Autrement dit, ton visuel principal doit être beau, net et léger à la fois. Et il ne doit pas faire bouger la mise en page pendant le chargement.

Pourquoi éviter la 3D en direct sur ta page

Il est tentant d’intégrer une vraie scène 3D interactive en haut de page. C’est rarement une bonne idée pour une page d’accueil :

• la bibliothèque 3D et le modèle pèsent lourd, avant même d’afficher quoi que ce soit ;
• le calcul de l’image sollicite la carte graphique, ce qui fait chauffer les téléphones et vide leur batterie ;
• l’affichage attend que tout soit chargé, ce qui retarde le contenu principal ;
• les moteurs de recherche voient au mieux une zone vide.

La bonne approche consiste à créer le rendu 3D une fois, dans un studio, puis à l’exporter en image et en vidéo. Le visiteur voit exactement le même résultat, pour une fraction du poids.

Étape 1 : une image légère en AVIF ou WebP

Exporte ton mockup en PNG depuis le studio Flokup, à la taille dont tu as besoin (souvent 1600 à 2400 pixels de large pour un affichage net sur écran haute densité). Le PNG est parfait comme fichier source, mais trop lourd pour le web. Convertis-le ensuite :

Des outils gratuits de conversion d’images fonctionnent directement dans le navigateur ; en ligne de commande, un outil comme ffmpeg fait aussi l’affaire. Vise quelques dizaines à une ou deux centaines de kilo-octets pour une grande image.

Dans ta page, propose l’AVIF en premier et le WebP en secours, avec des dimensions fixes et un texte alternatif :

<picture>
  <source srcset="mockup.avif" type="image/avif">
  <img src="mockup.webp" width="1600" height="900"
       alt="Notre site affiché sur un smartphone et un ordinateur portable"
       fetchpriority="high">
</picture>

Trois détails comptent ici :

• width et height réservent la place de l’image : la page ne saute pas pendant le chargement.
• Pas de chargement différé sur cette image : elle est visible tout de suite, elle doit arriver en priorité. Le chargement différé est réservé aux images plus bas dans la page.
• Un texte alternatif descriptif aide l’accessibilité et le référencement des images.

Étape 2 : une vidéo en boucle, chargée après la page

Pour ajouter du mouvement, exporte une vidéo MP4 depuis le studio. Les animations de Flokup sont bouclées sur 12 secondes : la vidéo se répète sans saut visible. Pour le web, quelques réglages suffisent :

• Résolution raisonnable : la taille d’affichage réelle, pas la 4K.
• Sans piste audio : une vidéo d’ambiance n’en a pas besoin, et c’est la condition pour la lecture automatique.
• Une version WebM en plus si tu veux gagner encore en poids.

L’idée est d’afficher d’abord l’image, puis de la remplacer par la vidéo une fois la page chargée :

<video muted loop playsinline preload="none"
       poster="mockup.webp" width="1600" height="900">
  <source src="mockup.webm" type="video/webm">
  <source src="mockup.mp4" type="video/mp4">
</video>

Ensuite, un petit script lance la vidéo après l’événement de chargement de la page, et seulement si le visiteur n’a pas demandé à réduire les animations ni à économiser ses données. Le contenu principal s’affiche ainsi aussi vite qu’avec une simple image.

L’impact sur la vitesse et le référencement

Avec la dernière approche, tu gardes l’effet « waouh » sans pénaliser tes visiteurs ni ton classement. Pense aussi à nommer tes fichiers de façon descriptive (par exemple site-boulangerie-smartphone.avif) plutôt que image1.png.

Sur un portfolio : plusieurs projets, même rigueur

Un portfolio affiche souvent beaucoup de visuels. Les mêmes règles s’appliquent, avec deux ajouts :

• Charge en différé toutes les images situées sous le premier écran, avec loading="lazy".
• Limite les vidéos simultanées : une seule vidéo en lecture à la fois, celle qui est visible. Les autres restent sur leur image d’attente.

Garde aussi une présentation homogène d’un projet à l’autre : même fond, même angle, même appareil. Notre guide pour présenter un site à un client détaille comment construire un portfolio cohérent, et l’article mockup 3D ou capture d’écran rappelle quand préférer l’un ou l’autre.

Et le code d’intégration ?

Flokup prépare un code d’intégration, inclus dans l’offre Agence, pour afficher un mockup animé directement dans une page, avec une image d’attente et un chargement différé. Pratique pour les pages secondaires ; pour ta page d’accueil, l’export en image et en vidéo reste la solution la plus rapide. Les détails sont sur la page fonctionnalités.

Questions fréquentes

Quel format d’image choisir pour ma page d’accueil ?

L’AVIF en version principale, avec le WebP en secours dans une balise picture. Garde le PNG exporté comme fichier source pour tes futures retouches.

Une vidéo en lecture automatique pénalise-t-elle le référencement ?

Pas si elle est muette, chargée après la page et précédée d’une image d’attente légère. Le contenu principal s’affiche alors aussi vite qu’avec une simple image.

Faut-il mettre loading="lazy" sur l’image principale ?

Non. L’image visible à l’ouverture de la page doit se charger en priorité. Le chargement différé est réservé aux images situées plus bas.