Les points clés pour un site rapide

Beaucoup de sites sont devenus super lourd.

Et ça se ressent surtout sur les petites connexions. (les pages mettent 3h à charger)

Alors que c’est assez simple d’avoir un site léger, il suffit de respecter quelques règles.

Ce que je te propose ici, ce n’est pas un méga guide pour optimiser tous les éléments pour alléger au max ton site. Honnêtement, moi-même j’ai pas bidouillé aussi loin…

Ce que je te propose, c’est les quelques facteurs qui ont le plus d’impact sur le poids de ton site.

Si tu fais attention à ces quelques trucs tu auras un site léger (donc rapide). Le reste c’est de l’optimisation pour gagner quelques kb par si, par là.

Ce que tu affiches

Je vois beaucoup de sites qui affiche beaucoup trop de choses.

Il y a 10 articles en colonne devant moi, une pop up pour s’inscrire à la newsletter, une vidéo en auto-play…

STOOOP

Je suis un humain.

J’ai 1 cerveau.

2 yeux.

Et 1 attention.

Je n’ai pas les capacités requises pour absorber toutes l’information que tu me balances.

Choisis ce que tu veux montrer !

Quel est le but de ta page ?

Montrer les derniers articles ?

Dans ce cas-là, mais bien avant les derniers articles et enlève tous le reste.

Quel rapport avec le poids de ton site ?

Plus tu affiches de choses à l’écran, plus ton site est lourd.

Alléger tes images

Les images et les vidéos sont ce qui pèse le plus lourd sur un site.

Tu peux choisir de faire un site sans images, clairement tu verras une différence niveau poids.

D’ailleurs, les images sans souvent beaucoup moins importantes qu’on le croit.

J’écris tous mes articles « astuces » sans images. Et pourtant ils restent agréables à lire et pas plus difficile à suivre.

Surtout que généralement les images d’illustrations qu’on voit utilisé sur le web viennent de Pixabay et ont les a vu 10 000 fois, donc ya pas vraiment d’intérêt.

On dit qu’il faut des images pour attirer le lecteur, que s’il n’y a pas d’images il va partir etc…

Mouai… de mon expérience, si tu écris un article qui est intéressant ou qui répond à un problème, il sera lu. Image ou pas.

J’ai écrit des articles bien illustrés dont tous le monde se foutait et des articles écrits en 10 minutes sans images qui marchait hyper bien…

J’utilise des images sur mes autres articles, parce que j’aime bien ça. C’est quelque chose d’artistique.

Si tu veux mettre des images sur ton site, fait attention à respecter c’est quelques trucs pour que ça ait le moins d’impact possible sur le poids :

La bonne taille

Pas besoin de faire charger une image de 1920×1230 à tes visiteurs si elle s’affiche en 540×330 sur ton site 😉

Plus l’image est petite, moins elle pèse.

La taille est le facteur qui a le plus d’impact sur le poids de ton image.

Donc redimensionne ton image à la taille à laquelle tu vas l’afficher sur ton site.

Si tu vas afficher ton image en 540×330 sur ton site, alors redimensionne-la en 540×330.

Pour ça j’utilise Gimp.

Le bon format

JPG pour les photo (genre paysage, photo de ton chat…)

PNG pour les captures d’écran (et les illustrations, bref tous ce qui est pas photo)

Une photo de paysage en PNG sera beaucoup plus lourde qu’en JPG, donc choisit bien ton format.

La bonne qualité

Souvent les logiciels de retouche photo (genre Gimp, Photoshop…) permettent de choisir la qualité d’export.

Généralement, j’exporte mes photo (donc JPG) à une qualité de 80.

Plus tu descends, plus ça enlève de l’information à ta photo (donc elle perd en qualité), moins elle pèse.

Dès-fois je pourrais descendre plus bas que 80. Mais généralement, je ne fais pas de cas-par-cas. 80 c’est un bon réglage pour la majorité des photos.

Hésite pas à tester 😉

Exporte une photo avec une qualité de 100.

Puis avec une qualité de 80.

Puis une qualité de 50.

Et compare-les.

Entre 100 et 80, tu verras pas beaucoup de différence (par contre, le poids de ton image aura bien baissé !)

Le Lazy Load

Si ton thème à une option « Lazy Load », alors active-là !

Ça permet de charger une image uniquement quand elle apparaît à l’écran.

Par exemple, si tu fais un long article avec des images, quand ton lecteur commencera à lire, seules les images de début qu’il voit seront chargées, celles qui sont au milieu ou a la fin de l’article seront chargées uniquement quand il arrivera dessus.

Résultat : ça permet de charger une page beaucoup plus vite.

Au lieu de charger toutes images d’un coup, tu charges uniquement les images au moment utile.

Ton visiteur n’aura pas à charger les 20 Mo d’images de ta page d’un coup, mais plutôt 5 Mo, puis 8 Mo un peu plus tard, et ainsi de suite.

Utiliser un thème léger

Que tu sois sur WordPress, Joomla, Ghost ou peu importe, fait bien attention quand tu choisis ton thème.

Plein de thèmes sont des usines à gaz et pèse une tonne.

Sur WordPress j’utilise et je te conseille GeneratePress qui pèse 10kb tout neuf sortie de boite.

Ne pas charger de trucs inutiles

ÉNORMÉMENT de sites aujourd’hui ont des connexions à 10 000 trucs différents.

Quand tu charges leur site, tu fais aussi une requête vers Facebook, Google, Criteo, doubleclick et tout un tas d’autres truc.

Enlève toutes ces merdes !

C’est inutile et souvent peu respectueux de la vie privée.

Si tu as besoin de statistiques sur tes visites, lit cet article.

Voir le poids de mon site

Regarde le poids de ton site actuellement, applique mes astuces, et refait le test.

Une chose à noter :

En réalité quand je parle de poids de ton site, je parle du poids de ta page. On ne calcule pas le poids total de ton site. Mais le poids d’une page. (ta page d’accueil, un article, ta page contact…)

Donc pour voir le poids d’une page :

Sur Firefox

  1. Clic droit
  2. Examiner l’élément
  3. Réseau
  4. Coche la case « Désactiver le cache » à droite
  5. Et clic sur le chronomètre.
  6. Tu verras la taille de la page que tu as dû charger et en combien de temps elle a chargé.

Tu peux faire la même chose pour les différentes pages de ton site.

Autrement, tu peux lancer un test GTmetrix et cliquer sur « Waterfall ».

Qu’est-ce qu’un site léger ? Qu’est-ce qu’un site lourd ?

Il n’y a pas de barème absolu.

Un site qui affiche les photos d’un photographe, sera forcément plus lourd qu’un blog uniquement composé de texte.

Il faut comparer ce qui est comparable.

Donc si tu dois comparer ton site, il faut le comparer par rapport à un site qui fait la même chose que le tient.

Après si ton site fait 50 Mo. Peu importe la catégorie, c’est trop lourd :p

Pour te donner un ordre d’idée, ma page d’accueil qui a des images pèse moins de 500 Ko actuellement.

Tu peux aussi tester à quelle vitesse ton site se charge avec différentes connexions sur Firefox :

  1. Clic droit
  2. Examiner l’élément
  3. Réseau
  4. Coche la case « Désactiver le cache » à droite
  5. Clique sur le menu déroulant à droite « Aucune limitation de bande passante » puis test en « DSL », « Regular 2G » et « Regular 3G », qui doivent être les connexions les plus courantes en France.
  6. Et re-clique sur le chronomètre pour voir à quelle vitesse ton site se charge.

Alors, mes astuces ont permis d’alléger ton site ?

Cet article fait partie du guide :

Crée ton monde sur internet

Je ne poste rien sur Twitter, Facebook...

La seule manière d'êtres au courant des nouveaux articles est :

  • De t'abonner par mail :

Voir les derniers mails envoyés

(1x par semaine max, je ne spam pas, je ne sais pas si tu ouvres les mails, pas de tracking)

Pssst : tu peux aussi t'abonner au flux RSS : https://serveur410.com/feed/

J'ai besoin de ton soutien !

Soutenir serveur410 :

10 réflexions au sujet de “Les points clés pour un site rapide”

  1. La première règle est de respecter l’orthographe française. C’est affligeant le nombre d’analphabètes qu’on croise sur internet. Tout le monde se prend pour un écrivain public. Votre article est horriblement difficile à lire, car vous écrivez comme vous parlez, les contractions n’existent pas dans la langue française.

    Répondre
    • J’écris pour partager des idées, être compris… Pas pour respecter l’orthographe. J’écris à ma manière. Pourquoi je devrais écrire suivant je-sais-pas-qui a dit que je devait écrire ?

      Ça ne veut pas dire que je ne vous respecte pas.

      Inventé des mots, utilisé sa propre orthographe, c’est aussi de la créativité. La langue est faite pour se faire comprendre, pas pour respecter des règles qui n’ont aucun sens. (d’ailleurs la langue évolue au fil du temps, preuve qu’il n’y a pas de règle fixe, immuable)

      « Tout le monde se prend pour un écrivain public »

      Tant mieux si les gens qui ont envie de s’exprimer s’exprime. Si on devais savoir « bien écrire » (peu importe ce que ça veut dire) pour pouvoir être lu ça serait triste et le monde manquerait d’idées diverses.

      Répondre
  2. Salut Orel, merci pour cet article.
    Quant à moi je suis toujours dans une démarche d’éco-conception, j’ai supprimé les polices distantes (Ubuntu) quand je me suis rendu compte qu’elle pesait le tiers du poids de mes pages. Je garde fork-awesome pour les pictogrammes.

    Répondre
  3. Bonjour, très bon article 🙂

    Perso je me suis mis à utiliser des images au format webp sur mon site (pour gagner quelques ko). Ainsi, la page d’accueil de mon site (https://l3m.in/) pèse moins de 130ko, malgré plusieurs images.

    Mon plus gros problème est que j’affiche ces images avec du texte par dessus, et que pour ça j’ai fait au plus simple (background-image).
    Or, le background-image ne supporte par le lazy load. Bien sûr je pourrais utiliser du js pour le faire « manuellement » en fonction de si l’image est dans le viewport ou pas, mais j’aime pas trop utiliser du js inutile.

    Après quelques tests sur les images de la page d’accueil de ce site, le poids total des images serait 30% inférieur avec des images en webp (d’ailleurs on peut voir sur caniuse que le webp est bien supporté par tous les navigateurs sauf IE & safari sur des anciennes versions de macos − https://caniuse.com/webp).

    Avec le fait de minimiser mon css, la conversion au format webp est l’amélioration qui m’a fait gagner le plus de poids sur mon site récemment 🙂

    Répondre
      • J’utilise gimp pour exporter les images, du coup ça change rien à mon workflow (fouiller dans mes archives de photos prises, en choisir une, la redimensionner sur gimp, l’exporter, l’héberger sur mon hébergeur de fichiers, l’inclure dans l’article) 🙂

        Répondre
    • Salut !
      Merci pour cet article.
      Comme l’a dit Corentin, le format WEBP est plus léger que le JPEG ou le PNG et de mieux en mieux supporté par les navigateurs. A défaut, on peut utiliser plusieurs sources pour les images via la balise picture (utile pour mettre différents formats et aussi si on a un site responsive).
      Le format AVIF vient aussi d’arriver. Il est pour l’instant supporté seulement par Chrome, mais est encore plus léger que le WEBP.

      @Corentin, pour le texte par dessus les images, tu peux utiliser une div de conteneur en position relative, avec l’image et le texte à l’intérieur en position absolute pour gérer la superposition. C’est aussi simple et ça permet le lazy-loading !

      Bonne journée 😉

      Répondre

Laisser un commentaire