Les utilisateurs se plaignent-ils de la lenteur de votre site ? Cet article partage 7 astuces pour emmener les performances de votre site Web sur la lune . Commençons!

1. Ne récupérez que les ressources pertinentes

Saviez-vous que vous ne pouvez récupérer que les fichiers CSS pertinents pour l'appareil actuel ?

La linkbalise a un mediaattribut qui peut être utilisé pour spécifier la requête média à laquelle la feuille de style est destinée.

<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 600px)"
/>

Une démo en direct de cela peut être trouvée dans w3schools .

2. Minifiez votre code

La minification est le processus de suppression des données inutiles ou redondantes sans affecter la façon dont une ressource est traitée par le navigateur. La minification peut inclure la suppression des commentaires de code , des espaces blancs et du code inutilisé , ainsi que le raccourcissement des noms de variables et de fonctions .

Quel que soit l' outil de construction ( Webpack , Vite , Snowpack , etc.) que vous utilisez, il aurait une option de minification . Par exemple, dans webpack , vous pouvez utiliser le TerserPlugin pour minifier votre code .

3. Pré-récupérer les ressources

Vous pouvez précharger des images , CSS , JS et même des pages entières en utilisant la linkbalise.

<link rel="preload" as="image" href="image.png" />

Quicklink est une bibliothèque qui pré-extrait les liens dans la fenêtre d'affichage, à l'aide de l' API Intersection Observer , et les accélère le chargement, tandis que Guess est une bibliothèque qui utilise Machine Learning pour prédire quelle page l'utilisateur est le plus susceptible de visiter ensuite.

4. Utilisez des images réactives ou une direction artistique

C'est peut-être la plus grande performance que vous puissiez obtenir.

Vous pouvez utiliser l' srcsetattribut pour spécifier plusieurs sources d'images pour différentes tailles d'écran . Cela permet au navigateur de choisir l'image la plus appropriée pour l'appareil actuel.

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg"
  alt="some random image"
/>

<picture>
  <source
    media="(min-width: 900px)"
    srcset="desktop.jpg"
  />
  <source
    media="(min-width: 480px)"
    srcset="tablet.jpg"
  />
  <img src="mobile.jpg" alt="some random image" />
</picture>

Le chargement différé est une technique qui vous permet de différer le chargement des ressources non critiques jusqu'à ce qu'elles soient nécessaires.

Il vous suffit d'ajouter l' loading="lazy"attribut aux éléments pertinents et vous êtes prêt à partir.

<img
  src="placeholder.png"
  alt="some random image"
  loading="lazy"
/>

6. Arborescence de votre code

Tree shaking est un terme couramment utilisé dans un contexte JavaScript pour décrire la suppression du code mort . Il s'appuie sur les instructions d'importation et d'exportation pour détecter si des modules de code sont exportés et importés pour être utilisés entre des fichiers JavaScript .

Tout comme la minification , l'arborescence et l'élagage du code inutilisé sont également une fonctionnalité de l'outil de construction .

Voici la documentation webpack sur le tree-shaking

7. Utilisez Page Speed ​​Insights pour détecter les problèmes potentiels

Page Speed ​​​​Insights de Google est un excellent outil pour détecter les problèmes potentiels avec votre site Web.

Il vous donne non seulement un score , mais vous fournit également un rapport détaillé des problèmes que vous devez résoudre.

C'est tout !

Suivez-moi pour de nouvelles informations bi-hebdomadaires sur le domaine de la technologie !

Besoin d'un freelance en développement front-end parmi les mieux notés pour résoudre vos problèmes de développement ? Contactez-moi sur Upwork

Vous voulez voir sur quoi je travaille ? Consultez mon site Web personnel et GitHub

Vous voulez vous connecter ? Contactez-moi sur LinkedIn

Je suis un nomade numérique et je voyage occasionnellement. Suivez-moi sur Instagram pour voir ce que je fais.