Optimierung des Website-HTML-Codes – Bereinigung, Komprimierung, Fehlerkorrektur

drucken · Время на чтение: 11мин · von · Veröffentlicht · Aktualisiert

spielenHören Sie sich diesen Artikel an

HTML-Code-Optimierung.

Technisch Optimierung des Website-HTML-Codes - der Prozess der Anpassung des HTML-Codes der Site-Seitenvorlage. Änderung (Hrsg.) des Quellcodes der Website und Korrektur ihrer Struktur und Größe. Der explizite Zweck besteht darin, die Zusammensetzung des Codes qualitativ zu verbessern. Eine deutliche Reduzierung des Volumens, wodurch die Gültigkeit des Codes verbessert wird. Dies trägt dazu bei, die Seitenladegeschwindigkeit in Browsern zu erhöhen.

HTML ist das Rückgrat des Webs. Dies ist die Art von Dokument, das die Grundstruktur einer Website bildet. Ohne HTML würde JavaScript nicht funktionieren, CSS könnte nichts formatieren und Bilder hätten keinen Platz zum Laden. Die Stärke von HTML liegt in seiner Vielseitigkeit, vor allem weil es andere Dateien laden kann, wofür Hypertext, der erste Teil von HTML, steht.

Wenn das Laden, Analysieren und Laden externer HTML-Dateien lange dauert, kann die Benutzeroberfläche darunter leiden. Die Ladezeit einer Seite nimmt zu. Je mehr Benutzer dazu neigen, die Seite zu verlassen, desto länger müssen sie warten.

Der Inhalt des Artikels:

Technische Optimierung des HTML-Codes der Website-Seiten

Maßnahmen zur Optimierung des HTML-Codes sind sinnvoll, um die Geschwindigkeit der Website zu erhöhen. Durch Bereinigen und Komprimieren des HTML-Codes der Site können Sie die Anzeige der Site-Seiten erheblich beschleunigen. Durch die Beseitigung sichtbarer Fehler im Code verbessern Sie die Gültigkeit Ihres HTML-Dokuments.

Das Endergebnis der Optimierung des HTML-Codes der Website wird sein:

  • Sofortiges Laden von Website-Seiten in gängigen Browsern.
  • Schnelles Crawlen von Website-Inhalten durch Such-Bots.
  • Ein sauberer, gültiger Code ist in den Augen von Suchmaschinen die Website mit der höchsten Priorität.
  • Das Ranking und die Sichtbarkeit der Website in den Suchergebnissen der Suchmaschinen Google und Yandex werden deutlich steigen.

Optimierung des Quell-HTML-Codes der Website – Reduzierung der Codemenge

Optimierung der Menge an HTML-Code.

Die wichtigste Maßnahme besteht darin, den Seitencode zu reduzieren. Der HTML-Quellcode sieht aus wie eine lange Leinwand. Viele verschiedene CSS-Stile befinden sich an verschiedenen Stellen in der Codestruktur. Der Code enthält unnötige Kommentare, Zeichen, Leerzeichen und Tags.

Zu Beginn müssen Sie unnötige Kommentare entfernen – dies ist ein zusätzlicher und völlig unnötiger Zeichensatz. Für den Browser und die Suchbots haben Kommentare keine semantische Bedeutung. Indem Sie sie entfernen, reduzieren Sie das Gewicht der Seite erheblich. Was in einem Fach die Geschwindigkeit beim Laden eines Dokuments erhöht.

Bereinigen unnötiger Zeichen, zusätzlicher (doppelter) Leerzeichen und Zeilenumbrüche. Dadurch können Sie die endgültige Struktur des Site-Codes drastisch reduzieren. Dadurch kann das Hauptgewicht der Seite um das 2,5- bis 3-fache reduziert werden.

Durch die Komprimierung von Leerzeichen und die Kombination von Zeilenumbrüchen wird die Struktur des HTML-Codes erheblich komprimiert.

Ein Beispiel für einen kleinen Ausschnitt eines optimierten Jahres:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm-title-hidden a:hover.

Wie Sie sehen, wurden alle unnötigen Zeichen, Leerzeichen und Kommentare aus dem Code entfernt. Dies trägt dazu bei, den Code zu strecken, als ob er zu einer durchgehenden Linie würde. Dank dieser Struktur wird das Gewicht der Seite deutlich geringer. Gleichzeitig werden Seiten schnellstmöglich von Bots indiziert und geladen. Selbstverständlich vorbehaltlich aller Maßnahmen zur Optimierung der Seite.

Entfernen unnötiger HTML-Tags und Stildateien

Das häufigste Problem einer großen Seitencodegröße können ungenutzte CSS-Stildateien und unnötige Tags sein. Diese Codeelemente werden auch in der Hauptseitenvorlage platziert.

Z.B: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

Dies gilt auch für nicht geschlossene Tags. Sie haben keine semantische Bedeutung und nehmen den Platz ein, den wir brauchen. Stildateien, die für die visuelle Darstellung der Website keine Rolle spielen (unnötig oder fehlerhaft), werden ebenfalls aus der Codestruktur entfernt.

So beschleunigen Sie das Laden von Website-Seiten:

  1. Sie müssen CSS-Stile und JS-Skripte in externe Dateien verschieben;
  2. Ordnen Sie die Hauptelemente des Site-Designs in Sprites an und fügen Sie sie dann in Stylesheets ein.
  3. Der Seitencode sollte einfach und lesbar sein.

Korrektur von Fehlern im HTML-Code der Website

Suchmaschinen reagieren (nicht sehr bereitwillig) auf Websites im Code, die Fehler aufweisen. Allerdings werden bei vielen beliebten TRUST-Ressourcen auch solche Fehler eindeutig in den TOP-Ergebnissen behoben. Sogar die Hauptseite des beliebten Yandex wird mit Hilfe von validator.w3.org überprüft, sogar meine Website ist in Bezug auf Fehler überlegen.

Enthält die folgende Liste von Gültigkeitsfehlern:

Warnung: Content-Security-Policy HTTP-Header: Ungültige Inhaltssicherheitsrichtlinie: Quellliste enthält doppelten Quellausdruck „https://passport.yandex.ru“. Alle bis auf die erste Instanz werden ignoriert. https://yandex.ru/ Fehler: Der Elementstil ist in diesem Kontext nicht als untergeordnetes Element des Elements div zulässig. (Unterdrückung weiterer Fehler aus diesem Teilbaum.) Aus Zeile 33, Spalte 17689; zu Zeile 33, Spalte 17695 dkov</div><style.docum>

Fehler: Das Element „div“ ist in diesem Kontext nicht als untergeordnetes Element des Elements „span“ zulässig. (Unterdrückung weiterer Fehler aus diesem Teilbaum.) Aus Zeile 33, Spalte 18219; zu Zeile 33, Spalte 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

 

Dies ist die Mindestmenge an Fehlern, die die Hauptseite der Yandex-Suchmaschine aufweist (insgesamt sind es etwa 47).

Und so sieht die validator.w3.org-Prüfung meiner Website aus:

Fehler: Ein Skriptelement mit einem src-Attribut darf kein Typattribut haben, dessen Wert etwas anderes als die leere Zeichenfolge, ein JavaScript-MIME-Typ oder ein Modul ist. Ab Zeile 6, Spalte 1; zu Zeile 6, Spalte 192 /script>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Wie Sie sehen, nicht wenige))) - nur 21 Benachrichtigungen über Fehler und Warnungen. Es gibt etwas, woran man arbeiten kann.

Die Gültigkeit des Codes hat bei der Website-Werbung höchste Priorität. Durch die Behebung der meisten Fehler und Warnungen des W3C-Validators können Sie gute Erfolge bei der technischen Optimierung der Website erzielen.

Legen Sie die Priorität der mobilen Version der Website fest

Traditionell wurden Websites der ersten Generation auf Desktop-Computern mit großem Bildschirm angezeigt. Heutzutage besuchen die meisten Menschen Websites über mobile Geräte wie Smartphones, Tablets und Laptops. Daher muss Ihre Website für mobile Geräte angepasst werden. Darüber hinaus müssen Sie sicherstellen, dass jeder Aspekt Ihrer Website – Suche, Warenkorb und Kasse – von einem mobilen Gerät aus genauso einfach zugänglich ist wie von einem Desktop- oder Laptop-Computer.

Nutzen Sie Web-Caching aktiv

Caches sind temporäre Speicherbereiche, in denen Browser Kopien statischer Dateien speichern, um kürzlich angesehene Seiten schneller zu laden, anstatt ständig denselben Inhalt über HTTP anzufordern.

Browser können angewiesen werden, Webseitenelemente zwischenzuspeichern, die von Entwicklern nicht häufig geändert werden. In den HTTP-Antwortheadern fügt der Hostserver Caching-Anweisungen ein. Wer bestimmte Seiten häufig nutzt, profitiert von schnelleren Ladezeiten, da der Server weniger Daten an den Browser sendet.

CDN – große Chancen unserer Zeit

Content Delivery Networks (CDNs) verbessern die Ladegeschwindigkeit von Websites, indem sie Inhalte an vielen verschiedenen Orten auf der ganzen Welt zwischenspeichern. CDN-Cache-Server befinden sich normalerweise näher an den Endbenutzern als der Ursprungs- oder Hostserver.

Anstatt sich direkt mit einem Hosting-Server zu verbinden, der Hunderte von Kilometern entfernt sein und mit zahlreichen autonomen Netzwerken verbunden sein kann, werden Inhaltsanfragen über einen CDN-Server gesendet. CDN-Server können die Leistung von Websites erheblich verbessern.

HTTP-Anfragen kürzen

Typischerweise stellen Browser mehrere HTTP-Anfragen, um auf verschiedene Seitenressourcen wie Bilder, Skripte und CSS-Dateien zuzugreifen. Für eine einzelne Site sind möglicherweise Hunderte von Anfragen erforderlich. Bei jeder Anfrage findet ein wechselseitiger Austausch zwischen dem Webbrowser und dem Server statt, der die Ressource hostet, was die Ladezeit der Seite erhöht.

Außerdem wird die Webseite möglicherweise nicht schnell geladen, wenn einer der Hosts ausfällt. Aufgrund dieser potenziellen Probleme sollte auf jeder Seite eine Mindestmenge an Assets geladen werden. Geschwindigkeitstests zeigen außerdem, welche HTTP-Anfragen am meisten Zeit in Anspruch nehmen. Entwickler suchen möglicherweise nach einer schnelleren Bild-Hosting-Lösung, wenn die Bilder dazu führen, dass die Seite langsam lädt.

Optimieren Sie den HTML-Code Ihrer Website für SEO

HTML-Code-Optimierung wirkt sich positiv auf die meisten Indikatoren der Website insgesamt aus. Dank einer sauberen, optimierten Struktur wird die Indexierungs- und Ladegeschwindigkeit der Website deutlich verbessert. In den Augen der Suchmaschinen wird die Website besser und damit in den Suchergebnissen sichtbarer.
Suchmaschinen nutzen den Quellcode, um herauszufinden, worum es auf Ihrer Website geht. Jeder Inhalt einer Webseite muss in HTML codiert sein, damit Suchmaschinen ihn verstehen können. Zu den SEO-Komponenten im Quellcode gehören Titel-Tag, Meta-Beschreibung, H1-Titel-Tag, interne Links, Ankertexte, Nofollow-Links, Alt-Image-Tags und kanonische Tags. Um den Quellcode anzuzeigen, öffnen Sie die Webseite und drücken Sie „Strg + U“. Hier sind einige Schritte, die Sie befolgen können, um den Quellcode Ihrer Website zu optimieren.

Title-Tag-Optimierung

Der Titel-Tag hat einen erheblichen Einfluss auf das Ranking Ihrer Website in Suchmaschinen. Dadurch kann Google ermitteln, wie gut Ihre Web- oder Blogseite mit einer bestimmten Suchanfrage übereinstimmt. Ein gut geschriebener Titel-Tag kann Ihre Website von der Masse abheben und die Aufmerksamkeit der Suchmaschine auf sich ziehen.

  • Stellen Sie sicher, dass alle Ihre Webseiten über eindeutige Titel-Tags verfügen, die die Seiten perfekt beschreiben.
  • Achten Sie auf die optimale Länge der Titel-Tags, damit diese in den Suchergebnissen nicht abgeschnitten werden. 50-60 Zeichen reichen völlig aus.
  • Stellen Sie sicher, dass Sie in Titeln keine Schlüsselwörter verwenden. Fügen Sie stattdessen ein oder zwei aussagekräftige Schlüsselwörter hinzu.

Einzigartige Meta-Beschreibungen

Eine Meta-Beschreibung ist ein HTML-Element, das den Inhalt einer Webseite zum Nutzen von Benutzern und Suchmaschinen zusammenfasst. Es erscheint als Snippet in den Suchergebnissen unterhalb des Titels. Die Idee hinter Meta-Beschreibungen besteht darin, Ihren Lesern eine genaue Vorstellung davon zu vermitteln, was Ihre Seite bietet.

  • Vermeiden Sie lange Beschreibungen. Die ideale Länge ist eine Beschreibung mit 130 bis 156 Zeichen.
  • Verwenden Sie in der Beschreibung relevante Schlüsselwörter.
  • Wenn möglich, fügen Sie einen Call-to-Action hinzu.

Arbeiten mit strukturierten Daten

Der Zweck strukturierter Daten besteht darin, Ihrem Snippet mehr Details hinzuzufügen, um es zu einem hervorgehobenen Snippet in den Suchergebnissen zu machen. Der Code muss ordnungsgemäß markiert sein, um Ihre Chancen auf ein höheres Ranking zu erhöhen. Schema.org ist am beliebtesten, wenn es um strukturierte Datenformulare für Suchmaschinen geht.

  • Durch die Verwendung von „Element Scope“ im div-Tag wissen Suchmaschinen, dass sich alle in einem Abschnitt angezeigten Informationen auf dasselbe Thema beziehen.
  • Der Begriff Elementtyp definiert das Thema jedes Abschnitts.
  • „item prop“ meldet zusätzliche Informationen zum Abschnitt

H1-Tag

Der H1-Tag wird verwendet, um einen Textabschnitt als Hauptüberschrift Ihrer Seite zu kennzeichnen. Der hier aufgeführte Inhalt sollte kurz beschreiben, worum es auf den Seiten geht. H1-Tags sollten informativ und ansprechend sein und den Benutzer dazu ermutigen, Ihre Inhalte weiterzulesen.

  • Idealerweise sollte es zwischen 20 und 70 Zeichen enthalten.
  • Berücksichtigen Sie die Absicht des Benutzers
  • Fügen Sie Ihr primäres Schlüsselwort ein, vorzugsweise Long-Tail-Schlüsselwörter, um die Suchleistung und den Webverkehr zu verbessern.

Sie können auch Zwischenüberschriften von H2 bis H6 hinzufügen. Um die Lesbarkeit zu verbessern, achten Sie darauf, dass der Text nach der Zwischenüberschrift nicht zu lang ist, vorzugsweise zwischen 250 und 300 Wörtern.

Alternativer Text für Bilder

Sowohl für den E-Commerce als auch für andere Websites ist der Alt-Tag ein wichtiger HTML-Tag. Es teilt der Suchmaschine mit, worum es in dem Bild geht. Wenn die Bilddatei nicht geladen werden kann, wird anstelle des Bildes Alternativtext angezeigt. Gute Bilder mit passendem Alternativtext machen Seiten sowohl für Crawler als auch für Benutzer attraktiv und verbessern die Benutzererfahrung (UX).

  • Stellen Sie sicher, dass die Beschreibung kurz und spezifisch ist.
  • Verwenden Sie Schlüsselwörter, aber überfüllen Sie sie nicht
  • Markieren Sie Bilder, die sich auf Ihre Marke beziehen, keine Bilder, die zu dekorativen Zwecken verwendet werden.

Kanonisches URL-Tag

Dies ist ein leistungsstarkes Tool zur Identifizierung doppelter Inhalte. Kanonische URL-Tags werden hauptsächlich für E-Commerce-Websites verwendet, da Sie möglicherweise verschiedene Seiten für Ihre Produkte erstellen müssen.

Durch das Hinzufügen dieser Tags zu jeder Seitenvariation können Suchmaschinen die Haupt-/Ursprungsseite aus einer Gruppe von Seiten mit ähnlichen URLs erkennen.

Wichtigste Schlussfolgerungen

  • Bemühen Sie sich, die Dinge einfach und effizient zu halten. Eine Website sollte nicht mit zu vielen ausgefallenen Elementen gefüllt sein. Es muss lediglich relevant und effektiv für die Vision Ihrer Marke und Ihrer Kunden sein. Sie können dies erreichen, indem Sie sich einfach auf die erforderlichen Webfunktionen konzentrieren.
  • Entdecken Sie Optimierungsstrategien für verschiedene Webelemente. Unterschiedliche Webelemente erfordern unterschiedliche Optimierungsstrategien. Stellen Sie sicher, dass Sie diese Änderungen in alle Elemente einbeziehen, damit die Funktionen Ihrer Website effektiv funktionieren.

Technische Optimierung des Website-HTML-Codes – beliebte CMS-WordPress-Plugins

Werfen wir einen kurzen Blick auf ein paar WordPress-Plugins. Dies wird Ihnen helfen, den HTML-Code auf dem WordPress CMS zu bereinigen und zu komprimieren. Dank dieser Plugins können Sie die Geschwindigkeit der Site drastisch erhöhen und alles Unnötige aus dem Site-Code entfernen.

Plugin Autoptimize:

  • Optimierung und Komprimierung des HTML-Codes der Website (Entfernen von Leerzeichen und Kommentaren).
  • CSS- und JS-Optimierung – ermöglicht es Ihnen, Stile in einer Datei zu kombinieren und dort zu platzieren Fusszeile Website sowie JS-Skripte.
  • Verfügt über zusätzliche Optimierungsmöglichkeiten.

Autoptimize – Plugin für WordPress.

Clearfy-Plugin:

  • Kombiniert die Funktionalität vieler Plugins und besteht aus Modulen, die deaktiviert werden können.
  • Ideal zur Erhöhung der Website-Geschwindigkeit.
  • Deaktiviert einige Skripte und unnötige Funktionen in WordPress.
  • Es verfügt über eine breite Palette von Tools für die Arbeit mit HTML-Code, CSS- und JS-Dateien Ihres CMS.

Clearfy Cache ist ein WordPress-Optimierungs-Plugin.

Durch die Kombination dieser Plugins erreichen Sie eine hervorragende WordPress-Site-Optimierung. Nutzen Sie sie unbedingt, ich bin mir sicher, dass sie Ihnen sehr nützlich sein werden.

Lesen dieses Artikels:

Danke fürs Lesen: SEO HELPER | NICOLA.TOP

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 295

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Das könnte dich auch interessieren …

9 Antworten

  1. Илья sagt:

    Ich schaue mir die Fehler an und du hast sie, allerdings vor dem Hintergrund von Yasha hahaha – einfach super. Aber natürlich gibt es noch viel zu tun.

    • Николай Алексеев sagt:

      Hey, wie könnte es ohne sie sein?

    • Николай Алексеев sagt:

      Hallo) Ich hatte es satt, die Schriftart und Überschriften beim Herunterladen zu reparieren. Jetzt öffnen sich alle Seiten der Site deutlich, die Verschiebungen sind fast nicht wahrnehmbar)

  2. Илья sagt:

    Fehler: Ungültiger Wert „pmdelayedscript“ für Attributtyp im Elementskript: Untertyp fehlt. Ab Zeile 5, Spalte 1; Gehen Sie zu Zeile 5, Spalte 140 und Anzeigen –>↩↩ und teilen Sie uns dann mit, wie Sie das Problem behoben haben.

    • Николай Алексеев sagt:

      Keine Versprechen, solange ich alles wiederherstelle. Alle Änderungen und Verbesserungen erfolgen spontan. Und ich werde es versuchen)

  3. Anonym sagt:

    Ich blogge häufig und schätze Ihre Informationen sehr. Dieser Artikel ist vollständig
    hat mein Interesse geweckt. Ich werde Ihre Website zu einem Lesezeichen hinzufügen
    und schauen Sie etwa einmal pro Woche nach neuen Details
    Woche. Ich habe mich auch für Ihren RSS-Feed angemeldet.

  4. Anonym sagt:

    Ich besuche jeden Tag einige Websites und Informationsseiten
    zum Lesen von Beiträgen, es sei denn, diese Website bietet funktionsbasiertes Schreiben.

  5. Anonym sagt:

    Hallo Kolleginnen und Kollegen, der Beitrag zum Thema Unterricht ist riesig und vollständig erklärt, macht weiter so.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

1 × один =