Un site peut être rapide, bien codé, sans une seule erreur console, et pourtant mettre huit secondes à afficher sa première image. J’ai vécu ça sur un projet client à Rabat, en 2022 : une boutique de décoration avec des photos produits en 4000 pixels de large, exportées telles quelles depuis un appareil photo. Le développeur que j’étais avait tout vérifié sauf l’essentiel. Le visuel fait partie du code, qu’on le veuille ou non.
Depuis, je considère le design visuel et le référencement comme deux volets d’un même travail. Un beau site invisible sur Google a du mal à attirer des prospects ; un site bien référencé mais difficile à utiliser convertit moins bien. C’est exactement le terrain de Pixaid, un magazine du web visuel qui traite images, design, optimisation et référencement des sites — et j’y retrouve beaucoup de ce que je répète à mes clients à longueur de réunion. C’est aussi la logique que j’applique dans mes prestations de création de site internet au Maroc : penser l’interface, la vitesse et la visibilité dès le départ.
Le poids des images, ce nerf de la guerre
Je vais être direct : la majorité des sites lents que j’audite à Casablanca souffrent d’abord de leurs médias. Pas du serveur, pas du framework. Des images. Bien sûr, chaque site mérite un diagnostic complet : scripts, hébergement et cache peuvent aussi être en cause. J’explique ces contrôles dans mon guide pour optimiser les performances d’un site web.
Un fichier JPEG non compressé de 3 Mo, multiplié par une vingtaine de visuels sur une page d’accueil, ça donne un chargement qui s’effondre sur une connexion mobile moyenne. Au Maroc, la qualité du réseau varie selon l’endroit et les conditions d’utilisation. Un chargement trop long risque de faire partir les visiteurs avant même qu’ils découvrent l’offre. D’où l’importance du responsive design, qui ne se limite pas à faire tenir les éléments sur un petit écran.
Les formats modernes changent la donne. Convertir en WebP ou en AVIF, redimensionner à la taille d’affichage réelle, charger en différé ce qui est sous la ligne de flottaison : trois réflexes qui peuvent réduire fortement le poids d’une page. Attention toutefois à ne pas différer le chargement de l’image principale visible immédiatement, au risque de dégrader le LCP. Sur un projet de site vitrine pour un cabinet d’architectes à Maarif, on est passés de 6,2 Mo à 1,1 Mo sans toucher au rendu visuel. Le client n’a vu aucune différence à l’œil nu ; le chargement, lui, s’est amélioré. Sur WordPress, cette démarche peut être complétée par une optimisation de la vitesse du site adaptée au thème et aux extensions.
Un design qui parle aussi aux robots
On oppose souvent l’esthétique et le SEO comme deux camps irréconciliables. Je trouve cette vision paresseuse.
Une hiérarchie de titres claire, des balises alt qui décrivent vraiment l’image au lieu de répéter le mot-clé trois fois, une structure de page lisible : tout ça sert autant le lecteur que le crawler. Le design, c’est de l’organisation d’information avant d’être de la décoration. Quand je code une interface, je me demande toujours si quelqu’un qui ne voit pas les images comprendrait quand même le contenu. Si la réponse est non, il y a un problème d’accessibilité autant que de référencement. Pour aller plus loin, j’ai détaillé les principes de l’accessibilité web et leur mise en œuvre.
Les Core Web Vitals donnent des repères concrets pour analyser l’expérience : le LCP mesure le délai d’affichage du principal contenu visible, le CLS la stabilité visuelle, et l’INP la réactivité aux interactions. Ces indicateurs sont pris en compte par les systèmes de classement de Google, mais un bon score ne garantit pas une première position. Il faut aussi proposer un contenu utile et une structure compréhensible. C’est l’une des raisons pour lesquelles je recommande d’intégrer le SEO dès le développement du site plutôt que d’attendre sa mise en ligne.
Ce que je fais avant d’écrire la première ligne de CSS
Ma routine a changé avec les années. Aujourd’hui, avant de coder, je demande les visuels. Tous. Je les pèse, je les renomme, je vérifie leurs dimensions. C’est fastidieux et personne ne me remercie pour ça, mais ça évite des semaines de rattrapage. Le choix de la structure et des composants compte aussi : pour une PME, une création de site vitrine professionnel au Maroc doit permettre au client de remplacer ses contenus sans dégrader la mise en page.
- Renommer les fichiers avec des noms descriptifs, pas « IMG_2045.jpg ».
- Définir un budget de poids par page et le respecter.
- Prévoir dès la maquette les zones où les images changeront souvent, pour que le client puisse les remplacer sans casser la mise en page.
- Prévoir des dimensions explicites ou un ratio d’affichage pour limiter les décalages visuels.
- Tester sur un vrai téléphone d’entrée de gamme, pas seulement sur le simulateur de mon MacBook.
Cette dernière ligne compte plus que les autres. Un site qui rame sur un mobile à 1 500 dirhams risque de pénaliser une partie de ses visiteurs. On l’oublie vite quand on travaille sur une machine récente. Sur les sites WordPress que je prends en charge, cette vérification s’accompagne d’une attention portée aux extensions, au cache et au suivi technique. C’est le rôle d’un développeur WordPress au Maroc qui pense autant à la maintenance qu’à la livraison.
Le référencement se joue aussi dans les fichiers
Un détail que je vois encore trop souvent négligé : les informations associées aux images. Les visuels d’un site peuvent contribuer à sa visibilité dans Google Images lorsqu’ils sont pertinents, accessibles, bien intégrés à la page et accompagnés d’un texte alternatif utile. Le nom du fichier participe au contexte, sans remplacer la qualité de la page ni sa pertinence. C’est un aspect à examiner dans une démarche globale de référencement naturel au Maroc.
Il y a une dimension pédagogique dans mon métier que je n’avais pas anticipée quand j’ai commencé. Expliquer à un gérant de restaurant pourquoi la photo de son tajine doit être adaptée à l’affichage plutôt que rester à 4 Mo, ce n’est pas glamour. C’est pourtant un moyen concret d’améliorer son expérience mobile. Pour un commerce qui cherche des clients à proximité, ce travail doit accompagner une vraie stratégie de SEO local au Maroc : pages utiles, informations cohérentes et contenus adaptés aux recherches locales.
Comment vérifier que les optimisations d’images portent leurs fruits ?
Après la mise en ligne, je compare la vitesse perçue sur mobile, les résultats PageSpeed Insights et les données de la Search Console. Je regarde notamment si le LCP s’améliore, si la mise en page reste stable et si les pages importantes sont bien explorées et indexées. Mon article sur l’indexation Google d’un site WordPress explique pourquoi une page rapide n’est pas automatiquement une page visible dans les résultats.
J’observe aussi les parcours des visiteurs : consultent-ils les réalisations, avancent-ils vers les services, envoient-ils une demande ? Le meilleur moyen de juger une interface reste de relier les mesures techniques aux usages réels. Quelques exemples concrets figurent dans mes réalisations web.
Des images légères, un site lisible et un SEO cohérent
À Casablanca, la concurrence en ligne se densifie et l’expérience mobile mérite autant d’attention que les mots-clés. Je ne crois pas aux recettes magiques. Je crois aux images légères, aux interfaces lisibles et aux balises qui décrivent honnêtement ce qu’elles montrent.
Si vous préparez une création ou une refonte et souhaitez identifier ce qui freine votre site, vous pouvez me contacter pour discuter de votre projet web. L’objectif est simple : un site agréable à parcourir, techniquement solide et capable d’être trouvé par les bonnes personnes.
