3 astuces pour accélérer le temps de chargement d’une page web

vitesse chargement page web
Un mobinaute sur deux quitte un site web qui charge en plus de trois secondes, selon une étude publiée par Google. Un site lent est désastreux en terme d’expérience utilisateur, mais pas seulement. Le temps de chargement des pages a également un impact sur le classement d’un site internet dans les résultats des moteurs de recherche. Découvrez trois solutions simples pour améliorer la vitesse de chargement d’un site internet intégré sous WordPress.

Pourquoi mon site rame-t-il ?

Quand un internaute se connecte une page web, il demande à un serveur distant de lui transférer du contenu : images, page HTML, polices de caractère, fichiers Javascript, etc. Ces composants sont ensuite assemblés par un navigateur qui permet d’afficher la page demandée. Le transfert et l’interprétation de ces données, suivant la qualité de la bande passante, peuvent prendre plus ou moins de temps. Il est donc important d’alléger au maximum ces fichiers pour réduire le temps de réponse du serveur.

Quelles conséquences pour mon SEO ?

La raison d’être des moteurs de recherche est de trouver des réponses. Ils classent donc les sites web en fonction de leur pertinence sur une question donnée, notamment en analysant la richesse de leur sémantique. Si la réponse tarde à venir, aussi juste soit-elle, c’est un mauvais point. En effet, tout ce qui perturbe l’affichage d’un site web dans les SERP, notamment sur smartphone, est un signe négatif envoyé aux moteurs de recherche.

Qu’est-ce que la bande passante ?

La bande passante désigne la quantité de données qu’un serveur web peut transmettre. Elle est mesurée en bits par seconde (bits/s). La majorité des sites internet sont hébergés sur des serveurs mutualisés – et non dédiés. La bande passante est plus limitée dans ce cas de figure, car elle est partagée par plusieurs utilisateurs. Un serveur sous-dimensionné peut provoquer des lenteurs, notamment si un grand nombres d’utilisateurs le sollicitent en même temps. Il est donc important de vérifier la quantité de bande passante allouée par votre hébergeur.

Cas concret de problème de vitesse de chargement

Une police peut ralentir l’affichage d’un site web. J’ai été confronté au problème en utilisant le thème WordPress Astra, pourtant réputé très rapide. Après analyse, il est apparu que la webfont astra.woff, intégrée dans le cœur du thème, ralentissait le chargement. Or, quand la requête d’un élément-clé peine à aboutir, les navigateurs attendent de longues secondes pour afficher le site internet. Or, c’est très agréable pour les utilisateurs. Pour résoudre le problème, j’ai dû précharger cette police en intégrant la balise <link « preload »> dans l’en-tête de mon site.
Ici, il est question d’une police de caractère, mais une image surdimensionnée, un fichier Javascript ou une feuille de style peut aussi provoquer des lenteurs.

Comment accélérer le mouvement ?

Voici plusieurs réflexes à adopter pour accélérer le temps de chargement de votre blog ou de votre boutique e-commerce sur WordPress :

1/Définissez des règles de cache efficaces

Réduire la charge du serveur est une bonne manière d’économiser de la bande passante. Pour y parvenir, il est conseillé de mettre en cache certaines ressources pour éviter qu’elles soient chargées à chaque consultation. Le cache est une mémoire située sur l’ordinateur de l’utilisateur. Elle permet de stocker temporairement les éléments les plus utilisés d’un programme ou d’un site internet.
En gros, lorsqu’un internaute se connecte pour la première fois à votre site, certaines ressources sont enregistrées pour une durée limitée par son navigateur. À chaque nouvelle visite, elles sont chargées localement, ce qui réduit le temps de réponse du serveur.
Pour activer la mise en cache sous WordPress, il est nécessaire de définir des règles dans le fichier .htaccess de votre site internet pour paramétrer combien de temps les ressources vont rester dans le navigateur de l’utilisateur.
Par exemple, pour mettre en cache des images, j’indique le type de fichier et la date d’expiration :

ExpiresByType image/jpg « access plus 2592000 seconds »

Cette technique fonctionne pour les fichiers Javascript, CSS, HTML, etc. Voici l’ensemble règles que j’ai définies pour mon site :

expire headers code source

2/ Utilisez des images au format .webp

Les images représentent environ 50 % du poids d’un site web. Il est donc important d’optimiser leur taille pour accélérer leur temps de chargement. Le premier réflexe est d’éviter de publier des visuels surdimensionnés, mais cela coule de source pour vous, j’en suis sûr 🙂 La seconde chose à faire est de diffuser vos images au format Webp. Créé en 2010 par Google, il permet de réduire de moitié le poids d’une image .jpeg ou .png, et donc d’accélérer le temps de réponse du serveur.
Pour optimiser vos images et les convertir au format Webp sous WordPress, il est nécessaire d’utiliser une extension. Vous pouvez utiliser Imagify, si vous le souhaitez. Ce plugin permet de compresser l’ensemble les images déjà publiées sur un site internet et de gagner de précieuses secondes au chargement. Pour cela, il suffit de créer un compte, afin d’obtenir une clé API. Différents niveaux d’optimisation sont disponibles : normal, agressif et ultra. Attention toutefois, cette extension devient payante si vous avez un grand nombre d’images.

3/ Optimiser votre code source

WordPress est un système de gestion de contenu qui permet de créer un blog ou un site e-commerce assez facilement grâce à la richesse de ses extensions. Ces programmes permettent d’ajouter de nombreuses fonctionnalités (systèmes de paiements en ligne, galeries, formulaires de contact, etc.). Mais ces plugins ont un inconvénient. Ils utilisent des scripts qui consomment de la bande passante pour fonctionner. Pour limiter leur impact, il est important de les utiliser avec parcimonie. Ensuite, il est conseiller d’optimiser leur poids. Pour cela, il existe une solution freemium : Autoptimize.
Cette extension – indispensable – permet de réduire très rapidement et sans connaissances le nombre de lignes des fichiers HTML, CSS, Javascript en supprimant les espaces inutiles. Cette concaténation accélère le transfert de ces ressources.

Conclusion

Optimiser la vitesse d’un site web est indispensable pour bien figurer dans les résultats des principaux moteurs de recherches. Il existe des différentes solutions pour y parvenir, et ce post ne prétend pas être exhaustif sur la question. Néanmoins, ces astuces devraient vous permettre d’améliorer sensiblement le temps de chargement de votre site web et l’expérience utilisateur de vos visiteurs.

5 astuces pour réussir une mise en situation de produit

Les e-commerçants luttent à coups de mots-clés pour faire apparaître les articles de leur boutique dans les résultats de recherche. Une mise en situation de produit réussie peut les aider à différencier leur marque dans le maelström du Web. Voici comment faire.

Choisissez un fond lumineux

mise en situation d'un ordinateur pour une boutique e-commerce
Les plateformes Freepik et Pixabay proposent de nombreuses images gratuites. En tapant le mot-clé « mock-up » dans la barre de recherche, vous trouverez de nombreux fonds libres de droit (1). Facilitez-vous la vie, optez pour une photo ayant les mêmes lignes directrices que votre produit. Le mien est horizontal, j’ai donc choisi l’image ci-dessus.

Optez pour un style épuré

intégration du produit dans la mise en situation
J’ai supprimé certains éléments de l’image qui me semblaient superflus. L’ordinateur, évidemment, pour y mettre le mien ! Mais aussi certains objets qui ne collaient pas avec mon sujet. L’outil plume de Photoshop permet de faire cela en deux temps trois mouvements. Ensuite, j’ai placé mon produit au centre de la scène.

Créez des plans

création des plans de la mise en situation
Photoshop dispose d’un palette calques. Utilisez-la pour placer des parties du fond sur votre produit. Cela renforcera le réalisme de votre composition. Ici, j’ai découpé un morceau de la lampe et je l’ai collé sur mon ordinateur portable. J’ai également détouré la boule de papier présente sur l’image d’origine, afin de la mettre au premier plan.

Ajoutez des ombres


Dans votre image, déterminez d’où vient la lumière. Sur la mienne, elle vient du coin supérieur gauche. Qui dit lumière, dit ombres. J’ai donc créé des ombres diffuses sous le clavier et sous la boule de papier qui portent du côté droit. Cette étape est cruciale. Sans elle, votre produit semblerait collé artificiellement dans la photo et le rendu final de la mise en situation de produit ne serait pas réaliste.

Uniformisez votre composition

Rendu final de la mise en situation de produit
Nous avons placé notre objet sur un fond, nous avons découpé des éléments pour intégrer notre ordinateur dans la composition et nous avons créé des ombres pour donner du relief à notre mise en situation de produit. Maintenant, il ne reste plus qu’à apporter la touche finale ! En effet, les images que nous avons intégrées n’ont pas été prises dans les mêmes conditions de lumières, leur blanc n’est donc pas le même. Créez des calques de réglage (luminosité/contraste, niveaux, filtre photo, etc.) sur le produit et sur le fond pour harmoniser votre composition.

Besoin de plus d’informations sur la mise en situation de produit ? Contactez-moi via le formulaire ci-dessous. D’autres présentations d’ordinateurs sont disponibles ici.

(1) Il peut être nécessaire de créditer les auteurs des images.

3 raisons d’être minimaliste pour se démarquer sur Internet

Le fond blanc d’un site web peut donner un goût d’inachevé. Mais l’inverse est vrai. Une interface surchargée est associée à la vente discount. Pour se démarquer sur Internet, rien ne vaut la mesure. Voici trois raisons de s’inspirer du minimalisme, un courant esthétique qui connaît une vraie renaissance.

Illustration minimaliste pour se démarquer sur Internet

Il est lisible

Nous vivons dans une société de l’image. Et le regard, sans cesse sollicité, finit par ne plus rien voir. Les images surchargées brouillent le message qu’elles veulent transmettre. À l’inverse, le principe du minimalisme est « Less is more. » La notion d’espace y est centrale. Sa démarche consiste à réduire la forme à l’essentiel pour s’intéresser au vide qui l’entoure. Ce qui créé une vraie respiration ! En aérant l’image, le minimalisme lui donne de la force.

Il est dans l’air du temps

De nombreux blogs « minimalistes » fleurissent sur Internet de nos jours. Tous ces sites « lifestyle » prônent un mode de vie frugale. Cette tendance traduit un besoin profond de la société : revenir à l’essentiel en vivant avec moins. Au niveau esthétique, le mouvement minimalisme est né dans les années 60 aux États-Unis. Son leitmotiv : l’économie de moyen. Son dépouillement est une réaction au débordement du Pop art, dont les thèmes sont tirés de la culture de masse, comme la publicité. Le minimalisme, en tant que courant artistique, traduit parfaitement le désir actuel des consommateurs ; par exemple, d’acheter des produits avec moins d’emballage.

Il est sophistiqué

Le style minimaliste est donc un art de la simplicité qui correspond à un mouvement de fond de la société. L’adopter, c’est être en phase avec son temps. Certains diront qu’un design épuré donne l’impression de ne pas être abouti – ce qui est contre-productif. Mais attention, simplicité ne veut pas dire facilité. L’économie formelle dont fait preuve le minimalisme, loin d’être austère, donne une touche d’élégance à une image. Le minimalisme correspond à des designs épurés, mais extrêmement étudiés, qui permettent véritablement de se démarquer sur Internet. De nombreuses marques s’y réfèrent dans des secteurs d’activité aussi variés que la mode et la grande distribution. Alors, à vous de jouer !

E-commerce : donnez du relief à vos photos de produits

Le détourage de vos photos de produits laisse à désirer ? Réaliser soi-même ses packshots comporte des risques. Heureusement, Photoshop vous offre une seconde chance. Ajouter une ombre en post-production suffit parfois à redonner du relief aux images de fiches-produits.
photo de produit site e-commerce

1- Copiez votre produit et collez-le sur un autre calque

Sélection du contour du produit e-commerce
Activez l’outil baguette magique (W), puis cliquez sur le fond de l’image. La sélection apparaît. Ensuite, cliquez sur l’onglet sélection dans le menu, puis sur intervertir. Votre objet est maintenant sélectionné. Il ne vous reste qu’à le coller sur un nouveau calque que vous appellerez… produit. Supprimez l’image d’origine et placez un fond blanc sous l’article. Ouf… Nous pouvons enfin entrer dans le vif du sujet : valoriser vos photos de produits !

Créez une ellipse grise sous le produit

Création d'une ellipse sous le produit de la boutique
Créez un nouveau claque et appelez-le Ombre 1. Activez l’outil ellipse de sélection (M), puis tracez un bel ovale comme sur l’image ci-dessus. Ensuite, remplissez-le en noir (édition > remplir > couleur de premier plan) et baissez l’opacité du calque à 20 %. L’étape qui suit est particulièrement importante, alors suivez bien :).
Ajoutez un masque vectoriel. Pour cela, rien de plus simple : cliquez sur le rectangle marqué d’un cercle, en bas de la palette calques. Une vignette blanche apparaît sur le calque Ombre 1. En activant l’outil pinceau (B) et la couleur noire, vous allez pouvoir estomper l’extrémité de votre ellipse. Je vous conseille de régler l’opacité du pinceau à 20 % avec une forme diffuse de 150 px d’épaisseur.

Plus vous serez minutieux, plus vos photos de produits paraîtront professionnelles. Si vous avez enlevé trop de matière, vous pouvez activer la couleur blanche dans la palette outils pour récupérer du gris.

Dessinez une deuxième ellipse sur la première

ajout d'une seconde ombre à la présentation
Votre ellipse est bien estompée, parfait ! Créez une deuxième ellipse, plus petite, sur un nouveau calque (Ombre 2). Remplissez-la en noir et réglez l’opacité à 50 %. Comme à l’étape 2, créez un masque vectoriel et estompez la pointe de votre forme avec l’outil pinceau (B).

Répétez une dernière fois l’opération

L'ombre noire donne du relief au produit
Vous commencez à être habitué : créez un nouvelle ellipse, plus petite que les deux premières, sur un calque que vous appellerez Ombre 3. Remplissez-la en noir et réglez l’opacité à 70 %. Utilisez l’outil de transformation manuelle (T) pour adapter précisément votre ellipse à la base de votre objet.

Appliquez un flou gaussien à vos ellipses

Valorisation des photos de produits
Nous y sommes presque. Sélectionnez le calque Ombre 1 et appliquez-lui un flou gaussien (menu > filtre > atténuation > flou gaussien) d’un rayon de 1,5 px. Répétez l’opération pour Ombre 1 et Ombre 2. Appliquez à nouveau ce filtre sur les calques jusqu’à obtenir un effet diffus satisfaisant.

Pour aller plus loin, lisez ce tutoriel. Vous apprendrez à mettre vos produits en situation.