Le Chargement De Votre Site Web Est-Il Lent? Commencez Par Optimiser Les Images

Le temps de chargement de la vitesse de la page est l'un des facteurs les plus importants que Google examine lors du classement des sites Web. Cela n'est devenu que doublement critique car Google a commencé à indexer le mobile d'abord, ce qui signifie que votre site Web doit se charger rapidement pour les smartphones s'il espère bien se classer.

Qu'est-ce que la vitesse de page?

La vitesse de la page d'un site Web est le temps moyen nécessaire pour charger le contenu. Nous avons parcouru un long chemin depuis l'époque de la «mise en mémoire tampon» des vidéos. Nous n'utilisons même plus ce mot! La technologie a fait un travail incroyable pour accélérer Internet afin que nous puissions regarder la prochaine vidéo YouTube sans attendre.

Pourquoi la vitesse de chargement des pages est importante pour Google

Pensez toujours à ce que Google veut faire lorsque quelqu'un effectue une requête de recherche. Il vise à fournir rapidement les meilleurs résultats les plus pertinents. Le mot clé ici aujourd'hui est «rapidement».

Des études après études ont montré que notre patience s'est affaiblie. Si une page Web prend même une demi-seconde de trop, vous pouvez perdre de nombreux visiteurs lorsqu'ils cliquent sur le bouton «retour». Vous pouvez perdre des visiteurs avant même qu'ils aient chargé la page.

Les ventes d'Amazon sont directement affectées par la vitesse des pages. Si même ils sont une seconde plus lent, ils perdent potentiellement près de 2 milliards de dollars par an. C'est ainsi que la vitesse est vitale sur le Web.

Il existe de nombreuses façons d'améliorer les temps de chargement.

Réduire les fichiers, utiliser un CDN, activer la compression GZIP et supprimer les plug-ins inutilisés (ou gonflés) sont quelques façons de commencer à améliorer la vitesse de la page. Notez qu'ils ont tous quelque chose en commun.

Ils réduisent la quantité d'informations que le navigateur doit lire ou réduisent le travail nécessaire au navigateur pour lire les fichiers d'une page.

Les propriétaires d'entreprise doivent envisager toutes les options, mais je pense que commencer par optimiser les images de votre site Web n'est jamais un mauvais point de départ.

D'après mon expérience en tant que développeur de site Web, les images sont le plus souvent le principal responsable d'un site Web lent. J'ai vu des photographes télécharger et utiliser leurs photos directement depuis leur appareil photo. L'horreur! Alors oui, je parie que la plupart des sites Web pourraient bénéficier d'audits d'image.

Mais pourquoi commencer par des images? Qu'est-ce qui ne va pas avec eux?

Revenons à mon exemple de l'appareil photo car il illustre parfaitement pourquoi les images doivent être optimisées. Les photographies des caméras ne sont pas prêtes pour le Web.

Création de site Web Master: Inscrivez-vous maintenant!

Transformez votre présence numérique avec notre cours complet de création de sites Web - commencez votre parcours pour devenir un expert Web dès aujourd'hui!

Inscrivez-vous ici

Les caméras vous lancent avec les fichiers bruts et riches en détails. Ce sont généralement des fichiers incroyablement volumineux avec des méta-informations et des détails extrêmes qu'un utilisateur apprécie sur un écran. C'est beaucoup trop d'informations pour être pratique pour le Web. Le navigateur Internet n'a pas besoin de méta-informations (les informations sur la photo elle-même).

Si vous voulez que votre site Web soit compatible avec les mobiles, donnez-lui le moins de travail possible. Charger un fichier de 28 Mo demande beaucoup plus de travail que de charger le même fichier, mais maintenant il ne fait que 210 Ko.

Un processus étape par étape

Je vais vous montrer comment je minimise les fichiers pour les sites Web. Suivez mon processus simple et vous pourrez le faire vous-même.

Enregistrez le temps de chargement de votre page

Nous mettrons ce processus à l'épreuve. Copiez l'URL de la page contenant les images que vous optimiserez. Ensuite, visitez l'un des sites Web qui enregistreront le temps de chargement. Un bon site Web à ajouter à cet effet est la page Speed ​​Insights de Google. Collez cette URL et exécutez le test.

Vous obtiendrez un aperçu de votre score (pour mobile et ordinateur de bureau) et vous suggérerez ce qu'il faut corriger. Enregistrez vos résultats en les écrivant ou en prenant une capture d'écran.

Prenez-le une image à la fois et suivez ces étapes.

• Tout d'abord, je veux que vous définissiez le but de votre image. Est-ce une image décorative qui ne communique rien mais qui est purement esthétique? Est-ce informatif où il transmet un repère essentiel comme Ajouter cette page aux favoris? Ou est-ce une illustration ou une photographie qui ajoute à votre contenu? Sachant cela vous donne un aperçu de la façon de traiter votre photo.
• Connaissant le but de l'image, évaluez la plus grande taille dont elle a besoin sur un écran de bureau large. S'il reste la même taille, quelle que soit la taille de l'écran, il vous suffit de le redimensionner à cette dimension. S'il doit croître ou rétrécir de manière réactive, vous voudrez prendre l'extrémité moyenne à supérieure de sa plus grande taille potentielle. Par exemple, si j'ai une grande bannière plein écran sur un site Web réactif. Je peux dimensionner la photo à 1500px de large avec un type de fichier de bonne qualité. Comme il rétrécit ou se dilate de manière fluide, il devrait bien fonctionner. Je peux aussi avoir une deuxième image, de taille plus appropriée, juste pour mobile.
• Il est temps d'exporter votre image redimensionnée. Il existe  de nombreuses applications que vous pouvez utiliser pour modifier et exporter des fichiers.   Voici une brève explication des types de fichiers que vous souhaitez utiliser pour quoi. Si votre image sert d'arrière-plan ou complète une photo de contenu, exportez-la au format .jpg. À moins que ce soit une image extrêmement importante, je sélectionne généralement la plage de qualité de 75%. Si l'image doit être nette et de meilleure qualité, ou si elle a besoin d'un arrière-plan transparent, utilisez un type de fichier .png. S'il s'agit d'une image d'illustration, comme une icône ou une décoration décorative, enregistrez-la au format SVG.
• Maintenant, nous allons encore plus loin en le compressant. Il existe deux types de compressions à connaître: avec et sans perte. Vous vous souvenez de tout ce que les caméras de métadonnées aiment enregistrer? La compression sans perte éliminera cela, de sorte que le navigateur n'aura pas à s'en soucier. À tout le moins, utilisez la compression sans perte. J'aime choisir la compression avec perte. Cela supprimera certaines informations de l'image elle-même, et si elle est mal faite, vous remarquerez une baisse de qualité. Donc, en cas de doute, conservez une copie avant d'utiliser la compression sans perte. En règle générale, vous ne pourrez voir aucune différence et il est plus efficace de réduire la taille des fichiers. Vous pouvez télécharger une application telle que ImageOptim, un site Web comme tinypng.com ou un plugin pour effectuer la compression à votre place.
• Remettez en ligne et remplacez vos images.
• Exécutez à nouveau votre site via le testeur de vitesse de page et voyez les résultats. En fonction de votre site Web et du site Web de test lui-même, vous devriez voir une amélioration. Vos résultats peuvent varier. J'ai personnellement réalisé des gains impressionnants uniquement grâce à l'optimisation des images.

En ce qui concerne la vitesse de la page, l'optimisation de l'image doit toujours jouer un rôle.

Cependant, cela ne devrait pas être la seule action de votre stratégie. C'est un excellent point de départ pour garantir un site Web rapide et prêt pour les mobiles. Il est essentiel d'avoir des images qui ne ralentissent pas votre site Web.

Google a clairement montré à quel point il était important pour eux et, par conséquent, chaque site Web doit être proactif dans sa gestion. Propriétaires d'entreprise, prenez-en note et appliquez-le à votre stratégie numérique.

Pauline, Poursuites roses

Je suis un développeur de site Web avec plus de 5 ans d'expérience dans le secteur de la publicité à mon actif. Je suis également un vendeur artisanal et le blogueur derrière Pink Pursuits. J'écris sur le marketing, Etsy et les sujets intermédiaires pour aider d'autres créatifs.