Performance Web - de 27 à 99

May 01 2023

Offrir une expérience utilisateur exceptionnelle est le facteur clé pour améliorer le trafic client vers votre site Web et votre entreprise. Ce blog contient la liste des choses que j'ai faites pour améliorer la qualité et les performances de mon site Web NextJS.

Offrir une expérience utilisateur exceptionnelle est le facteur clé pour améliorer le trafic client vers votre site Web et votre entreprise.

Ce blog contient la liste des choses que j'ai faites pour améliorer la qualité et les performances de mon site Web NextJS.

Performance Web - de 27 à 99

J'ai utilisé PageSpeed Insights pour faire auditer mon site Web. Il analyse le site Web en quatre catégories : performances, accessibilité, meilleures pratiques et référencement.

Performance:

Les performances sont calculées sur la base de cinq matrices :
1. First Contentful Paint (FCP)— Temps nécessaire pour que le premier texte ou image soit peint.
2. Largest Contentful Paint (LCP) — Heure à laquelle le plus grand texte ou image est peint.
3. Temps de blocage total (TBT) - Somme de toutes les périodes de temps entre FCP et Time to Interactive, lorsque la durée de la tâche a dépassé 50 ms, exprimée en millisecondes.
4. Décalage de mise en page cumulé (CLS) — Le décalage de mise en page cumulé mesure le mouvement des éléments visibles dans la fenêtre.
5. Speed Index (SI) - Il montre à quelle vitesse le contenu d'une page est visiblement rempli

Seuil typique pour ces matrices :
Source :https://developers.google.com/speed/docs/insights/v5/about#categories

Seuil de performance

Étapes que j'ai prises pour améliorer les performances :

Balise méta de la fenêtre d'affichage —
La balise méta de la fenêtre d'affichage contrôle la largeur et la mise à l'échelle de la fenêtre d'affichage afin que le site Web soit correctement dimensionné sur tous les appareils. Sans balise méta de fenêtre d'affichage, les appareils mobiles affichent les pages à des largeurs d'écran de bureau typiques, puis réduisent les pages.
J'ai ajouté la balise viewport dans la tête du document :

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Balise d'image NextJS - montrant srcset avec des images de différentes largeurs

Au-dessus du pli est également utilisé dans la conception de sites Web (avec "au-dessus du défilement") pour désigner la partie de la page Web qui est visible sans défilement.
- source : Wikipédia

Par défaut, les images NextJS sont chargées paresseusement. Si l'image tombe au-dessus du pli, le chargement paresseux peut avoir deux effets :
a) Ajouter un délai à la plus grande peinture de contenu (LCP)
b) Provoquer un changement de mise en page cumulé lors du chargement de l'image.
Pour réduire cela, j'ai ajouté une propriété prioritaire à l'image. Cela aide NextJS à prioriser le chargement de cette image.

4. Réduire la taille des images —
Dans la mesure du possible, utilisez des images de petite taille. Nous pouvons utiliser WebP ou SVG au lieu de PNG et JEPG.

5) Chargement paresseux des ressources tierces -
Les intégrations tierces, comme les vidéos YouTube, qui ne sont pas nécessaires immédiatement après le chargement de la page, peuvent être chargées paresseusement. La méthode typique d'interaction avec une intégration est :
a) Ajouter un élément statique (façade) qui ressemble à l'intégration réelle, à la page lors du chargement.
b) Lorsque l'utilisateur survole la façade, il charge la ressource tierce
c) Lorsqu'un utilisateur clique sur la façade, elle la remplace par l'intégration réelle.
Pour plus de détails à ce sujet, vous pouvez consulter la documentation ici .
J'ai utilisé le package npm lite-youtube-embed .

<Script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js"
 />

...

<lite-youtube videoid={videoid} />

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

import { Roboto } from 'next/font/google';
import '../styles/globals.scss';

const roboto = Roboto({ subsets: ['latin'], weight: ['400', '500', '600'] });

export default function App({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

Le contenu du site Web doit être accessible à tous les types d'utilisateurs (même les utilisateurs handicapés). Nous pouvons vérifier les noms d'accessibilité de n'importe quel élément en utilisant des outils de développement : (clic droit → Inspecter → Accessibilité)

Volet d'accessibilité dans les outils de développement

Certains des points que j'ai vérifiés et les outils que j'ai utilisés sont les suivants :

Contraste des couleurs —
Les couleurs d'arrière-plan et de premier plan doivent être suffisamment contrastées pour être clairement lisibles. J'ai utilisé une extension chromée 'Colour Contrast Checker' pour cela.

Vérificateur de contraste de couleur

3. [lang] —
La balise HTML doit avoir un attribut de langue défini. S'il manque, les lecteurs d'écran supposent que la page est dans la langue par défaut de l'utilisateur.

<Html lang="en">
  <Head />
  <body>
    <Main />
    <NextScript />
  </body>
</Html>

Carte des rubriques

5. ID et étiquettes —
Chaque élément doit avoir un ID unique. Il aide à identifier les éléments sur la page. Tous les éléments de formulaire doivent avoir des étiquettes.

Les meilleures pratiques:

Le score "Meilleures pratiques" était déjà élevé, donc je n'ai rien eu à changer de spécifique, mais certains des facteurs à prendre en compte sont :

Le site doit être protégé par HTTPS.
Les images doivent être affichées avec des proportions correctes.
Le format de codage des caractères doit être inclus. en <Head> du document (le plus haut possible)
<meta charset="UTF-8">
Les erreurs ne doivent pas être consignées dans la console.
Éviter d'écrire en majuscules sauf s'il s'agit d'une abréviation. Pour afficher le texte en majuscules, utilisez la transformation de texte CSS.

L'optimisation des moteurs de recherche est l'un des facteurs les plus importants pour améliorer la conversion du trafic. Certaines des choses pour améliorer les notes SEO sont :