Rendre Jamstack lent? Défi accepté.

"Jamstack est Slowwwww." Vous entendez rarement cela, surtout compte tenu de la réputation de Jamstack pour la vitesse. Cependant, même les sites Jamstack peuvent subir des problèmes de performance. Ne présumez pas que Jamstack équivaut automatiquement à des performances fascinantes sur le flamboyant; Les choix intelligents sont cruciaux. Explorons comment les mauvaises décisions peuvent paralyser la vitesse d'un site Jamstack.

Nous allons intentionnellement construire un site de Gatsby lent pour comprendre les goulots d'étranglement des performances. En utilisant des tests de performances continus et Google Lighthouse, nous suivrons chaque changement, en commençant par un score de phare parfait de 100 et en le dégradant délibérément à un 17.

Construire notre site lent Jamstack

Nous utiliserons Gatsby. Tout d'abord, installez la CLI de Gatsby:

 NPM Install -g Gatsby-Cli

Créez un nouveau site Gatsby:

 Gatsby New Slow-Jamstack

Accédez au répertoire du projet et démarrez le serveur de développement:

 CD-Jamstack
Gatsby développe

Pour les tests de phare, nous avons besoin d'une construction de production. Vercel fournit une solution d'hébergement pratique. Installez et connectez-vous à la CLI Vercel:

 NPM Install -g Vercel-CLI
vercel

Cela déploie le site de Vercel. Un site GATSBY par défaut est généralement rapide, marquant 100 sur le phare. Voyons comment nous pouvons saboter cela.

Ralentir avec CSS

Les cadres CSS sont puissants, mais choisir le mauvais ou l'utiliser de manière inefficace peut nuire aux performances. Optez pour des cadres modulaires ou CSS-in-JS pour charger uniquement les styles nécessaires.

Nous ferons un mauvais choix: charger l'intégralité du cadre Semanticui, y compris jQuery (une dépendance), directement dans le de notre HTML. Cela nécessite de copier le fichier <code>html.js par défaut:

 cp .cache / default-html.js src / html.js

Ensuite, ajoutez la feuille de style Semanticui et JQuery à src/html.js :

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/semantic.css" rel="stylesheet">

Déployez les modifications:

 Vercel - Prod

Le score du phare chute à 66, une diminution significative du chargement du CSS inutile. Le temps d'interactif (TTI) augmente considérablement.

Ralentir avec les dépendances marketing

Ajoutons Google Analytics et Facebook Tracking Scripts à src/html.js dans le :

 

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Rendre Jamstack lent? Défi accepté." >

Déployer à nouveau:

 Vercel - Prod

Le score tombe à 51. Ces scripts apparemment petits ont un impact sur les performances substantiel.

Ralentir avec des images

Nous ajouterons 100 images de https://placeimg.com à index.js , en les chargeant directement sans optimisation:

 const indexPage = () => {
  const itements = array.from ({longueur: 100}, (_, i) => (
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="Rendre Jamstack lent? Défi accepté.">
  ));

  retour (
    <layout>
      {articles}
    </layout>
  ));
};

Le déploiement se traduit par un site radicalement lent, avec un score de phare de 17 et un TTI de 16,5 secondes.

Le point? Chaque décision affecte les performances. Même sur Jamstack, les performances ne sont pas gratuites.

Speed ​​de restauration

L'avantage de performance principal de Jamstack est la mise en cache Edge des fichiers statiques, réduisant le temps vers le premier octet (TTFB). C'est plus rapide que le rendu côté serveur. Cependant, les optimisations côté client restent essentielles. Bien que les scores élevés du phare soient souhaitables, n'oubliez pas qu'ils ne reflètent pas toujours parfaitement l'expérience utilisateur. Cet exercice démontre que même avec Jamstack, une attention diligente aux performances est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!