Geschwindigkeit der Website

Geschwindigkeit der Website in diesem Artikel werden Techniken zur Websitebeschleunigung erläutert. Page Speed ​​ist seit langem ein Rankingfaktor für Google. Es begann mit der ersten Ankündigung im Jahr 2010 und wurde 2018 durch ein weiteres Update verstärkt. Anschließend unterzeichnete er den Deal mit der Einführung von Core Web Vitals im Jahr 2020. In diesem Artikel werden wir heute überlegen, was Seitengeschwindigkeit ist und wie man sie misst. Am wichtigsten ist, dass wir behandeln, wie Sie die Seitengeschwindigkeitsbewertungen für Ihre Website verbessern können.

Wenn Sie sich mit diesen Themen nicht auskennen, ist der Leitfaden teilweise hilfreich, um die Website zu beschleunigen. Für mehr besuchen Sie bitte unsere Website https://best4you.com.tr/de/

Was ist Geschwindigkeit der Website?

Geschwindigkeit der Website Google misst seit langem die Seitengeschwindigkeit. Was ist das? Was sind die richtigen Metriken? Verwenden Sie Felddaten oder Labordaten? Oder verbringen Sie Zeit mit der ganzen Seite oder nur dem oberen Teil? Es gibt Dutzende von Metriken, die in die Seitengeschwindigkeit einfließen. Und es war nicht schwer herauszufinden, welche davon für den Benutzer wirklich wichtig waren.

Google hat sich für eine Reihe von drei Metriken entschieden. Die heute als die wichtigsten für die Seitengeschwindigkeit gelten: Largest Content Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). Diese Metriken. Die als Common Web Data bekannt sind. Sollen wahrgenommene Seitenprobleme im Gegensatz zur tatsächlichen Seitengeschwindigkeit messen.

Größte zufriedene Farbe

Die größte Inhaltsfarbe ist die Zeit, die benötigt wird, bis das größte Element im Ansichtsfenster vollständig geladen ist. Die Kriterien für diese Metrik sind wie folgt;

Es ist üblich, dass das größte Element ein Bild ist. Sodass die Bildoptimierung den Hauptbeitrag zu dieser Kennzahl leistet. Darüber hinaus ist LCP von Server-Antwortzeiten, Rendering-Blockierungscode und clientseitigem Rendering abhängig.

Verzögerung der ersten Eingabe Input

Die anfängliche Eingabeverzögerung ist die Verzögerung zwischen dem Zeichnen eines interaktiven Elements und dem Moment, in dem es funktionsfähig wird. Nehmen wir an, eine Schaltfläche ist auf der Seite gemalt. Sie klicken darauf, aber sie reagiert noch nicht.

Die Kriterien für diese Metrik sind wie oben. Sie können Probleme mit Code-Splitting oder js-Minification lösen.

Kumulative Layoutverschiebung

Kumulativer Layout-Scroll misst, ob sich Elemente auf der Seite beim Laden bewegen. Nehmen wir an, eine Seite sieht so aus, als ob sie einsatzbereit wäre. Aber dann erscheint oben ein neues Bild und der Rest des Inhalts wird nach unten verschoben. Dies ist eine Auftragsverschiebung. Die Kriterien für diese Metrik sind wie folgt:

CLS hängt davon ab, dass Ihre Ressourcen von oben nach unten in einer bestimmten Reihenfolge geladen werden. Es ist auch wichtig, dass die Bilder in der richtigen Reihenfolge sind.

Geschwindigkeit der Website messen

Es gibt viele Geschwindigkeit der Website von Google bereitgestellte Tools, die wichtige Webdaten im Rahmen eines Seitenaudits bereitstellen.

Google PageSpeed ​​​​Insights

GTmetrix

Ask4SEO

Eines der Probleme besteht darin, dass einige Tools Labordaten anstelle von Felddaten verwenden und Google Ihre Seiten nur basierend auf Felddaten ordnet. Sie können diese Tools auch einfach dadurch unterscheiden. Dass sie die Feld-FID-Metrik durch die im Labor gemessene TBT-Metrik (Total Blocking Time) ersetzen. Im nächsten Schritt beschleunigen wir auch Ihre Website.

Wie erhöhen Sie die Seitengeschwindigkeit auf Ihrer Website?

Im Folgenden finden Sie einige der gängigsten Optimierungsmöglichkeiten sowie Ratschläge, wie Sie diese nutzen können

1. Bildabmessungen anpassen

Wenn Sie die Bildgrößen nicht anpassen, dauert es eine Weile, bis der Browser Ihre Bilder richtig dimensioniert hat. oder die Ladegeschwindigkeit Ihrer Website sinkt erheblich. Dies bedeutet, dass der Inhalt Ihrer Seite erhalten bleibt oder sich negativ auf Ihren CLS-Wert auswirkt.

Um dieses Problem zu vermeiden. Legen Sie die Breiten- und Höheneigenschaften für Ihre Bilder immer wie folgt fest:

<img src=“seo.jpg“ width=“640″ height=“360″ alt=“seo“ />

Mit diesen Informationen kann jeder Browser Ihre Bildmaße berechnen oder genügend Platz auf der Seite zuweisen. Auch Ihre CLS-Probleme werden weitgehend gelöst.

2. Präsentieren Sie Bilder in Formaten der nächsten Generation

Unsere bewährten JPEG- und PNG-Formate haben jetzt eine schlechtere Komprimierung und Qualität als AVIF, JPEG 2000, JPEG XR und WebP.

Von diesen aufgeführten Formaten ist WebP wahrscheinlich das erste Format. Das für die Geschwindigkeit der Website in Betracht gezogen wird. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung und ermöglicht Transparenz und Animation. Darüber hinaus sind WebP-Dateien in der Regel 25 bis 35 % leichter als PNGs und JPEGs ähnlicher Qualität.

In der Vergangenheit gab es weit verbreitete Bedenken, dass das WebP-Format von einigen Browsern nicht unterstützt wird. Vor kurzem hat Safari die WebP-Unterstützung in Version 14 hinzugefügt. Sodass die allgemeine Unterstützung für das Format in allen Browsern jetzt über 90% beträgt.

3. Bilder komprimieren

Unabhängig davon, ob Sie Bildformate der nächsten Generation verwenden oder nicht, das Komprimieren Ihrer Bilder ist eine praktikable Möglichkeit. Die Gesamtseitengröße zu reduzieren. Auch hier: Wenn Ihre Website auf WordPress basiert. Können Sie Ihre Bilder in großen Mengen mit Bild-Plugins wie WP Smush komprimieren. Wenn Sie nicht zu viele Plugins installieren und das Risiko eingehen möchten, Ihre Website zu verlangsamen. Können Sie Online-Bildkompressoren verwenden. Verwenden Sie als letzten Ausweg Grafikeditoren. Um Ihre Bilder zu komprimieren, bevor Sie sie auf Ihre Website hochladen.

4. Verschieben von Off-Screen-Bildern

Off-Screen-Bilder sind diejenigen, die am unteren Rand des Bildschirms erscheinen. Der Benutzer kann sie erst sehen, wenn er über den ersten Bildschirm hinausgeht. Der Bereich über der Falte ist der Bereich, den Google verwendet, um Ihre Geschwindigkeit der Website zu messen. Darauf sollten sich die meisten Ihrer Optimierungsbemühungen konzentrieren.

5. Konvertieren Sie GIFs in Videos

Es mag widersprüchlich klingen, aber Gifs haben oft eine größere Dateigröße als Videos. Es macht keinen Sinn, ich weiß nicht wie. Aber das Konvertieren eines großen Gifs in ein Video reduziert die Größe um bis zu 500% oder mehr.

Google empfiehlt eigentlich, zwei Videoformate zu erstellen: WebM und mp4. WebM ähnelt WebP darin, dass es leichter ist. Aber noch nicht von allen Browsern unterstützt wird. Wenn Sie also Ihr Video zur Seite hinzufügen, sollten Sie zuerst die WebM-Version auflisten. Dann die mp4-Version als Backup:

<video otomatik oynatma döngüsü sessiz playinline>
  <source src=”animation.webm” type=”video/webm”>
  <source src=”animation.mp4″ type=”video/mp4″>
</video>

6. Verschieben Sie ungenutztes CSS

Ungenutztes CSS kann das Rendern des Renderbaums durch einen Browser verlangsamen. Der Punkt bei der Geschwindigkeit der Website besteht darin. Dass ein Browser durch den gesamten DOM-Baum navigieren und prüfen muss. Welche CSS-Regeln für jeden Knoten gelten. Je mehr CSS verwendet wird, desto mehr Zeit benötigt ein Browser. Um die Stile für jeden Knoten zu berechnen.

7. JS und CSS minimieren

JS- und CSS-Dateien enthalten oft unnötige Kommentare, Leerzeichen oder Zeilenumbrüche und Code-Teile. Auch wenn sie viel kleiner sind, können Ihre Dateien durch das Entfernen um bis zu 50 % leichter werden. Testen Sie Ask4SEO für kostenlose SEO-Tools.

https://ask4seo.com/js-minifier

https://ask4seo.com/css-kucultme-online-css-minifier

8. Entfernen Sie kritische CSS

CSS ist standardmäßig eine Ressource, die das Rendern blockiert. Ihre Seite wird erst gerendert, wenn der Browser die CSS-Dateien abruft und analysiert. Was ziemlich zeitaufwändig sein kann.

Um dies zu beheben, können Sie nur die Stile entfernen, die für den Überkopfbereich Ihrer Seite erforderlich sind. Und sie zum Abschnitt Ihres HTML-Dokuments hinzufügen. Der Rest Ihrer CSS-Dateien arbeitet asynchron. Infolgedessen werden Ihre LCP-Werte erheblich erhöht und Ihre Seiten für Benutzer schneller angezeigt.

9. Verbessern Sie die Antwortzeit des Servers

Die Serverantwortlatenz ist eines der unangenehmsten Ereignisse für Ihre Website. Dies sind beispielsweise Probleme wie langsames Routing, langsame Anwendungslogik. Ressourcenknappheit der CPU, langsame Datenbankabfragen, nicht genügend Arbeitsspeicher.

Eine einfache Lösung für diese Probleme, die kein Entwickler ist, besteht darin. Zu einem besseren Server zu wechseln. Dies bedeutet in den meisten Fällen Managed Hosting von einem Shared Hosting. Managed Hosting wird häufig mit CDN-Netzwerken und anderen Methoden zur Inhaltsbereitstellung geliefert. Die sich positiv auf die Seitengeschwindigkeit auswirken.

10. JS von Drittanbietern aufschieben/asynchronisieren

Ressourcen von Drittanbietern wie Social-Sharing-Buttons und Videoplayer-Einbettungen sind in der Regel sehr ressourcenintensiv. Wenn der Browser auf einen Teil von JS stößt, wird die HTML-Ausführung angehalten, bis er sich mit dem JS befasst. All dies führt zu einem Rückgang der Bemühungen zur Websitebeschleunigung.

Daher können Sie es entfernen, wenn Ihre Drittanbieterquellen nicht verwendet werden. Sie können das async- oder defer-Attribut verwenden, um Ressourcen von Drittanbietern effizienter zu laden.

11. Vorher eine Verbindung zu Ressourcen von Drittanbietern herstellen

Der Aufbau besonders sicherer Verbindungen nimmt in der Regel viel Zeit in Anspruch. Die Sache ist die, DNS-Lookups erfordern SSL-Handshakes. Den Austausch von geheimen Schlüsseln und einige Roundtrips zum letzten Server, der für die Benutzeranfrage verantwortlich ist. Sie können sich vorab mit den erforderlichen Ressourcen verbinden, um diese wertvolle Zeit zu sparen.

Um Ihre Website vorab mit einer Drittanbieterressource zu verknüpfen. Fügen Sie Ihrer Seite einfach ein Anker-Tag hinzu:

<link rel=”preconnect” href=”https://best4you.com.tr“>

12. Teilen Sie lange Aufgaben auf

Wenn Ihre Seite über einen JavaScript-Stack verfügt, dessen Ausführung länger als 50 ms dauert. Reagiert sie möglicherweise nicht mehr auf den Benutzer. Um dieses Problem zu lösen, empfiehlt es sich, nach diesen langen Tasks zu suchen. Sie in kleinere Partitionen aufzuteilen und asynchron laden zu lassen. Auf diese Weise haben Sie kurze Reaktionszeiten in Ihren Seitenladeprozess integriert.

Sie können die Chrome-Entwicklertools verwenden. Um zu lange Aufgaben zu identifizieren – diese sind mit roten Flaggen gekennzeichnet:

13. Schlüsselressourcen vorab laden

Es liegt an den Browsern zu entscheiden, welche Ressourcen zuerst geladen werden. Deshalb versuchen sie in der Regel. Die wichtigsten Ressourcen wie CSS beispielsweise vor Skripten und Bildern zu laden. Leider ist dies nicht immer der beste Weg. Sie können die Priorität des Ladens von Inhalten in modernen Browsern ändern. İndem Sie Ressourcen vorab laden und ihnen mitteilen, was Sie als Nächstes benötigen.

<link rel=”preload”> Mit Hilfe des Tags können Sie dem Browser anzeigen, dass eine Ressource als Teil des Codes benötigt wird. Der für das Rendern des oben angezeigten Inhalts verantwortlich ist.

Hier ist ein Beispiel für die Verwendung des Tags:

<link rel=”preload” as=”script” href=”script.js” />
<link rel=”preload” as=”style” href=”style.css” />
<link rel=”preload” olarak =”image” href=”img.png” />
<link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” />
<link rel=”preload” href= “font.woff2″ as=”font” type=”font/woff2″ crossorigin />

14. Browser-Caching aktivieren

Ohne Browser-Caching wird bei jedem Besuch derselben Seite die gesamte Seite von Grund auf neu abgerufen. Beim Caching befinden sich einige Seitenelemente im Browserspeicher. Natürlich lädt die Seite bei wiederholten Besuchen viel schneller

15. DOM-Größe reduzieren

Ein sehr großer DOM-Baum mit komplexen Stilregeln kann sich negativ auf Dinge wie Geschwindigkeit. Laufzeit und Speicherleistung auswirken. Die beste Vorgehensweise besteht darin, einen DOM-Baum mit insgesamt weniger als 1500 Knoten. Einer maximalen Tiefe von 32 Knoten und keinen übergeordneten Knoten mit mehr als 60 untergeordneten Knoten zu verwenden.

16. Vermeiden Sie zu viele Weiterleitungen

Die bewährte Methode besteht darin, keine Weiterleitungen für die Websitebeschleunigung zu verwenden. Die Wahl des richtigen Weiterleitungstyps ist jedoch entscheidend, wenn Sie dringend einen verwenden müssen. Verwenden Sie am besten eine 301-Weiterleitung für eine dauerhafte Weiterleitung. Nehmen wir jedoch an, wenn Sie Benutzer auf eine kurzfristige Werbeseite oder eine gerätespezifische URL umleiten möchten. Sind temporäre 302-Weiterleitungen die beste Option.

Aktuelle Diskurse

Die oben aufgeführten Probleme sind nicht alle Probleme, die Geschwindigkeit der Website beeinträchtigen können, aber sie sind die häufigsten und haben das größte Verbesserungspotenzial. Passen Sie Ihre Optimierungsstrategien unbedingt an die Probleme an. Die in Ihrem Bericht zur Seitengeschwindigkeit aufgeführt sind. Beachten Sie, dass Probleme, die auf den meisten Seiten Ihrer Website gefunden werden. Gemeinsam behoben werden können, indem Sie Site-weite Änderungen anwenden.