Jamstack langsam machen? Herausforderung akzeptiert.

"Jamstack ist langsam." Sie hören das selten, insbesondere angesichts von Jamstacks Ruf für Geschwindigkeit. Selbst Jamstack -Websites können jedoch Leistungsprobleme leiden. Gehen Sie nicht davon aus, dass JamStack automatisch die blanze schnelle Leistung entspricht. Intelligente Auswahlmöglichkeiten sind entscheidend. Lassen Sie uns untersuchen, wie schlechte Entscheidungen die Geschwindigkeit eines Jamstack -Standorts lähmen können.

Wir werden absichtlich einen langsamen Gatsby -Standort erstellen, um Leistungstipps zu verstehen. Mit kontinuierlicher Leistungstests und Google -Leuchtturm werden wir jede Änderung verfolgen, beginnend mit einem perfekten Leuchtturm -Punktzahl von 100 und absichtlich auf eine düstere 17 abbauende 17.

Aufbau unseres langsamen Jamstack -Standorts

Wir werden Gatsby benutzen. Installieren Sie zuerst die Gatsby CLI:

 npm install -g gatsby -cli

Erstellen Sie eine neue Gatsby -Website:

 Gatsby New Slow-Jamstack

Navigieren Sie zum Projektverzeichnis und starten Sie den Entwicklungsserver:

 CD Slow-Jamstack
Gatsby entwickelt sich

Für Lighthouse -Tests benötigen wir einen Produktionsbau. Vercel bietet eine bequeme Hosting -Lösung. Installieren und melden Sie sich an der Vercel CLI an:

 npm install -g vercel -cli installieren
Vercel

Dadurch wird die Site in Vercel bereitgestellt. Eine Standard -Gatsby -Site ist in der Regel schnell und erzielt 100 im Leuchtturm. Mal sehen, wie wir das sabotieren können.

Verlangsamung mit CSS

CSS -Frameworks sind leistungsstark, aber die Auswahl des falschen oder ineffizienten Verwendung kann die Leistung beeinträchtigen. Entscheiden Sie sich für modulare Frameworks oder CSS-in-Js, um nur die erforderlichen Stile zu laden.

Wir werden eine schlechte Wahl treffen: Laden des gesamten Semanticui -Frameworks, einschließlich JQuery (eine Abhängigkeit), direkt in die unserer HTML. Dies erfordert das Kopieren der Standard <code>html.js -Datei:

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

Fügen Sie dann das Semanticui Stylesheet und JQuery zu src/html.js hinzu:

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

Stellen Sie die Änderungen ein:

 VERCEL --PROD

Der Leuchtturm -Score fällt auf 66, ein signifikanter Rückgang einfach durch das Laden unnötiger CSS. Die Zeit für interaktive (TTI) nimmt dramatisch zu.

Verlangsamung mit Marketingabhängigkeiten

Fügen wir Google Analytics und Facebook -Tracking -Skripte zu src/html.js innerhalb der hinzu :

 

<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Jamstack langsam machen? Herausforderung akzeptiert." >

Erneut einsetzen:

 VERCEL --PROD

Die Punktzahl sinkt auf 51. Diese scheinbar kleinen Skripte haben eine erhebliche Leistung.

Verlangsamung mit Bildern

Wir fügen 100 Bilder von https://placeimg.com zu index.js hinzu und laden sie direkt ohne Optimierung:

 const indexpage = () => {
  const items = array.from ({Länge: 100}, (_, i) => (
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="Jamstack langsam machen? Herausforderung akzeptiert.">
  ));

  zurückkehren (
    <layout>
      {Artikel}
    </layout>
  );
};

Das Einsatz führt erneut zu einer drastisch langsamen Stelle mit einer Leuchtturmbewertung von 17 und einem TTI von 16,5 Sekunden.

Der Punkt? Jede Entscheidung beeinflusst die Leistung. Selbst bei Jamstack ist die Leistung nicht kostenlos.

Wiederherstellung der Geschwindigkeit

Der primäre Leistungsvorteil von JamStack ist das Edge -Caching statischer Dateien und verkürzt die Zeit auf First Byte (TTFB). Dies ist schneller als das serverseitige Rendering. Kundenseitige Optimierungen bleiben jedoch wesentlich. Während hohe Leuchtturmwerte wünschenswert sind, denken Sie jedoch daran, dass sie die Benutzererfahrung nicht immer perfekt widerspiegeln. Diese Übung zeigt, dass selbst bei Jamstack die sorgfältige Aufmerksamkeit auf die Leistung erforderlich ist.

Das obige ist der detaillierte Inhalt vonJamstack langsam machen? Herausforderung akzeptiert.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!