Webseite neu bauen, was muss beachtet werden wegen SEO?

Shalin

Zitat von Syntafin

Es kann übrigens nichts auf "HTML5" laufen das bezeichnet bei HTML nur das Sprachlevel, da HTML nur eine Auszeichnungssprache ist (sagt auch der Name: HyperText Markup Language)

Ach so, gut dass du es mir erklärst.

Da steht irgendwas von Bootstrap oder so, kann das sein?

Zitat von Syntafin

Klingt nach Nicht Mobile-Friendly, zu viele Backlinks, lange Ladezeiten, Werbung und vor allem nach CLS (Content Layout Shift)

Ja tatsächlich ist der mobile Wert unter 50 im Score.

Lange Ladezeiten gehen eigentlich, aber warum ist es mobil so viel langsamer als am Desktop PC?

Und was bedeutet Content Layout Shift?

Zitat von Syntafin

Aber wieso beim anpassen immer nur ein paar pro Tag? Wieso nicht "alles"?

Weiß nicht, ich dachte, da muss man aufpassen. Also werde ich es anpassen.

Metatags kann ich ja trotzdem schreiben, aber die Description find ich schon wichtig. Wirkt die sich auch aufs Ranking aus mit den Descriptions?

Syntafin

Zitat von Shalin

Ach so, gut dass du es mir erklärst.
Da steht irgendwas von Bootstrap oder so, kann das sein?

Laut aktueller Analyse wurde Bootstrap 4.3.1 verwendet (ziemlich alt).

Ansonsten erkenne ich Matomo Analytics, was ohne Zustimmung versucht wird zu laden, wobei ich nicht weiß ob das bei lokalen Analyse Tools eine Zustimmung benötigt (geblockt wird es wegen Tracking dennoch).

Zitat von Shalin

Ja tatsächlich ist der mobile Wert unter 50 im Score.
Lange Ladezeiten gehen eigentlich, aber warum ist es mobil so viel langsamer als am Desktop PC?
Und was bedeutet Content Layout Shift?

Am längsten Laden deine Custom Fonts wie RogueScript, Georgia und Montserrat, da würde ich schauen ob es wirklich eine WebFont braucht, oder ob man einfach auf Systemfonts setzen könnte.

Einige Bilder stellst du auch als JPG oder PNG zur Verfügung statt dort ebenfalls auf WebP oder AVIF zu setzen, letzteres ist jedoch nicht so verbreitet wie WebP.

Die WebFonts verursachen auch eine Abwertung, da sie den FCP verzögern (First Contentful Paint, der Zeitpunkt wenn das erste mal etwas gerendert wird) und auch den LCP erhöhen (Largest Contentful Paint) da nach dem FCP die WebFonts reingeladen werden und erneut alle Schriften gerendert werden.

Was ebenfalls belangt wird, sind die fehlenden Größenangaben für Bilder (Höhe/Breite) und das ungenutzte CSS, durch die Fehlenden Angaben zu Höhe/Breite bei Bildern kommt es zu dem oben schon erwähnten CLS, was bedeutet das Nachladende Bilder den Content dann nochmals verschieben.

Ein gutes Beispiel sieht man für dieses "Vergehen" auch in meiner Galerie:

Campfire

syntafin.de

(Sollte das Bild sofort laden.... nutze die Zufallsfunktion)

Dort wird ebenfalls aktuell keine Maße mitgeliefert, und da ich die Bilder "on the fly" generiere, werden sie nachgeladen und führen so zu CLS.

Zitat von Shalin

Weiß nicht, ich dachte, da muss man aufpassen. Also werde ich es anpassen.
Metatags kann ich ja trotzdem schreiben, aber die Description find ich schon wichtig. Wirkt die sich auch aufs Ranking aus mit den Descriptions?

Metatags werden für das Ranking bei den großen Suchmaschinen ignoriert und nur als Fallback verwendet um eine Beschreibung zu liefern.

Shalin

Hallo Syntafin,

das hört sich alles sehr kompliziert an.

Ich habe von dem ganzen ja nicht so die Ahnung.

Aber ich werde mir jetzt was aneignen, habe mir ein HTML5 und CSS3 Buch gekauft für Anfänger, vielleicht lerne ich da ja was.

Ich habe die Homepage ja erstellen lassen, war teuer genug.

Wie ich die Schriften einbinde, weiß ich nicht, wenn ich da was ändern würde, würden sich die Werte verbessern?

Und wie mache ich das mit den Bildern mit der Größenangabe? Muss jedes Bild eine Angabe haben?

Puhhh, alles etwas viel.

Liebe Grüße,

Shalin

Syntafin

Zitat von Shalin

Ich habe die Homepage ja erstellen lassen, war teuer genug.

Ich hoffe doch nicht auch noch für das CMS bezahlt.

Zitat von Shalin

Wie ich die Schriften einbinde, weiß ich nicht, wenn ich da was ändern würde, würden sich die Werte verbessern?

Wenn man den Draw Zeitpunkt nach vorne verschiebt, da der Content schon gerendert wird bevor alles geladen ist, verbessert das den Score ungemein.

Zitat von Shalin

Und wie mache ich das mit den Bildern mit der Größenangabe? Muss jedes Bild eine Angabe haben?

<img src="path/to/image.webp" width="42" height="42" alt="" />

Als Beispiel.

Und ja jedes Bild braucht diese Angabe, durch die Angaben verhindert man das die Bilder den gesamten Inhalt der Seite verschieben sobald sie geladen sind, das nennt man auch CLS. Gibst du eine Höhe/Breite an, halten Browser den Bereich entsprechend frei und zeigen anschließend das Bild an.

Shalin

Zitat von Syntafin

Ich hoffe doch nicht auch noch für das CMS bezahlt.

Nein dafür habe ich nicht bezahlt. Gott sei Dank.

Zitat von Syntafin

Wenn man den Draw Zeitpunkt nach vorne verschiebt, da der Content schon gerendert wird bevor alles geladen ist, verbessert das den Score ungemein.

Wie geht das denn, kann ich das als Laie?

Ich glaub da muss man sich schon richtig gut auskennen.

Danke für den Tipp mit den Bildern, das gucke ich mir mal an. Das werde ich wohl hinbekommen.

Ich weiß nur nicht, welche Größe ich der Grafik auf der Startseite geben soll, also der Frau die sitzt.

Syntafin

Zitat von Shalin

Wie geht das denn, kann ich das als Laie?
Ich glaub da muss man sich schon richtig gut auskennen.

Ich kenne mich nicht aus, weiß das auch nur dank Google:

Code

@font-face { 
     font-family: "Harlow"; 
     src: url('../fonts/HarlowSolidItalicItalic.ttf') format('truetype'); 
     font-weight: normal; 
     font-style: normal; 
     font-display: swap; 
 }

das Zauberwort hier heißt "Front-Display", so kann man definieren, was mit Texten passiert, wo eine Webfont verwendet wird, im oben gezeigten Beispiel lädt die Seite und zeigt die Texte in einer systemfont an, nach dem fertigen laden werden diese dann ausgetauscht.

flyingtable07

Zitat von Syntafin
Ich kenne mich nicht aus, weiß das auch nur dank Google:
Code
@font-face { 
     font-family: "Harlow"; 
     src: url('../fonts/HarlowSolidItalicItalic.ttf') format('truetype'); 
     font-weight: normal; 
     font-style: normal; 
     font-display: swap; 
 }
das Zauberwort hier heißt "Front-Display", so kann man definieren, was mit Texten passiert, wo eine Webfont verwendet wird, im oben gezeigten Beispiel lädt die Seite und zeigt die Texte in einer systemfont an, nach dem fertigen laden werden diese dann ausgetauscht.

UIIIIII das wusste ich noch gar nicht das das geht! Das ist wirklich ein guter Tipp, Danke

Shalin

Hallo, jetzt komme ich erst dazu, mich hierrum zu kümmern.

Kannst du mir das nochmal genauer erklären, wie ich die Schriften austausche? Und in welche sollte ich sie tauschen?

In der CSS sind die definiert.

Ich weiß gar nicht, wie ich das ganze angehen soll.

Syntafin

Du kannst die selbe Schrift weiterhin verwenden, nur eben lokal ausgeliefert

flyingtable07

Zitat von Syntafin

Du kannst die selbe Schrift weiterhin verwenden, nur eben lokal ausgeliefert

Die Schriftarten sind Dateien, die wahrscheinlich im css des Quellcodes eingebunden werden. Der Browser läd so lange das lade Icon erscheinen, bis alle Dateien heruntergeladen wurden. Wenn du die Dateien von deinem eigenen Server laden willst, muss du die einmal runterladen, auf deinen webspace tun und dann die URL im Tag wo sie eingebunden werden so ändern, dass sie nun von deinem eigenen server geladne werden. Um den ladeprozess zu beschleunigigen kannst du den Trick von Syntafin nehmen. Er verhindert, das der Browser auf die Daten wartet. Stattdessen wird die Website direkt angezeigt. Das führt zu einem besseren Benuzererlebenis und besserem ranking bei google. Die Schrift Dateien werden dann erst geladen, wenn die seite bereits angezeigt wurde. Sind die Dateien geladen werden die Schriftarten auf der Seite anchträglich gegen die gewünschten ausgetauscht. In der Prakis sollte das kaum merkbar sein, da es sowiso nur Sekundenbruchteile dauert.
Schick mal den Code, wie die Schriftarten aktuell eingebunden werden, dann können wir dir sagen wie es mit Syntafins Trick aussehen würde.

Shalin

Hey, oh das ist aber lieb von euch, dass ihr mir helft.

Also in der CSS steht ganz am Anfang der Abschnitt mit den Schriften und die liegen in dem Ordner, ich mach nen Screenshot

Code

@font-face {
    font-family: "amaticscrgl";
    src: url(AmaticSC-Regular.ttf) format("truetype");
    /*font-weight: 200;*/;
}

@font-face {

    font-family: "amaticscbold";

    src: url(AmaticSC-Bold.ttf) format("truetype");
}

@font-face {

    font-family: "AbhayaLibrem";

    src: url(AbhayaLibre-Medium.ttf) format("truetype");
}

@font-face {

    font-family: "Montserrat-Regular";

    src: url(Montserrat-Regular.ttf) format("truetype");
}

@font-face {

    font-family: "Montserrat-light";

    src: url(Montserrat-Light.ttf) format("truetype");
}

@font-face {

    font-family: "Montserratalternate";

    src: url(MontserratAlternates-Regular.ttf) format("truetype");
}

@font-face {

    font-family: "georgia";

    src: url(Georgia.ttf) format("truetype");
}

@font-face {

    font-family: "RougeScript";

    src: url(RougeScript-Regular.ttf) format("truetype");
}

html,

 body {
    height: 100%;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

h1,

 h2,

 h3,

 h4,

 h5,

 h6 {
    margin: 0;
    color: rgb(24,45,60);
/*#182d3c; */
    font-weight: 600;
  /* font-family: "amaticscbold";*/
    font-family: "amaticscrgl";
}

h1 {
    font-size: 50px;
}

h2 {
    font-size: 38px;
}

h3 {
    font-size: 44px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 18px;
    color: #182d3c;
    line-height: 1.667em;
}

.fontamaticsrglr {
    font-family: "amaticscrgl";
}

.fontabhayam {
    font-family: "AbhayaLibrem";
}

.fontgeorgia {
    font-family: "georgia";
}

.fontmonserratrgl {
    font-family: "Montserrat-Regular";
}

.fontmonserratlight {
    font-family: "Montserrat-light";
}

.fontmonserratalt {
    font-family: "Montserratalternate";
}

.fontrouge {
    font-family: "RougeScript";
}

.fontarial {
    font-family: "Georgia";
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
    font-weight: 400;
}

.font25 {
    font-size: 25px;
    font-weight: 400;
}

.font28 {
    font-size: 28.8px;
    font-weight: 400;
}

img {
    max-width: 100%;
}

.iconimg {
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 30px;
}

input:focus,

 select:focus,

 button:focus,

 textarea:focus {
    outline: none;
}

a {
    color: #551a8b;
    text-decoration: text-decoration-line;
    text-decoration: underline;
    font-size: 18px;
}

a:hover,

 a:focus {
    text-decoration: text-decoration-line;
    outline: none;
    font-size: 18px;
}

ul,

 ol {
    padding: 0;
    margin: 0;
    font-weight: 200;
    color: #182d3c;
    font-size: 18px;
    line-height: 2.667em;
}

li span {
    color: #fff;
}

.ulleft ,ul {
    margin-left: 40px;
    line-height: 1.667em;
}

Alles anzeigen

Syntafin

Hier mal die angepassten @font-face deklarationen:

CSS

@font-face {
    font-family: "amaticscrgl";
    src: url(AmaticSC-Regular.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "amaticscbold";
    src: url(AmaticSC-Bold.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "AbhayaLibrem";
    src: url(AbhayaLibre-Medium.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "Montserrat-Regular";
    src: url(Montserrat-Regular.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "Montserrat-light";
    src: url(Montserrat-Light.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "Montserratalternate";
    src: url(MontserratAlternates-Regular.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "georgia";
    src: url(Georgia.ttf) format("truetype");
    font-display: swap; 
}

@font-face {
    font-family: "RougeScript";
    src: url(RougeScript-Regular.ttf) format("truetype");
    font-display: swap; 
}

Alles anzeigen

Damit verwendet der Browser bis er die Font Dateien geladen hat die System-Font

Shalin

Cool, vielen lieben Dank, ich habs ausgetauscht

Total lieb!

Was ist in der ersten Schrift mit der Größenangabe:

/*font-weight: 200;*/;

Muss die auch mit rein?

Und woran sehe ich jetzt, ob die Änderung was gebracht hat?

Syntafin

Zitat von Shalin

Was ist in der ersten Schrift mit der Größenangabe:
/*font-weight: 200;*/;

Muss die auch mit rein?

Das ist das "gewicht" das bestimmt die Stärke der Schrift, ich finde bei GFonts kann man das ganz gut erkennen:

Roboto - Google Fonts

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While

fonts.google.com

(Text auswählen und oben auf "Regular 400" drücken)

Shalin

Also mit rein, oder nicht? Und wenn ja, an welcher Stelle?

Syntafin

Es ist aktuell ja auskommentiert, würde ich so lassen.

Meiner Meinung nach, gehört die Font Weight Definition aber auch nicht in die FontFace rein.

Shalin

Okay, dann lasse ich es so, vielen lieben Dank!

Wie sind denn aktuell die Werte jetzt bei Google Page Speed, was muss ich noch verbessern, was gravierend ist?

Syntafin

PageSpeed Insights

Das kannst du ganz einfach selbst testen

Shalin

Ah cool, wie gehe ich das denn an, kann ich das überhaupt alleine?

Syntafin

Die Bootstrap CSS wirst du ohne Bundler und erfahrung damit leider nicht kleiner bekommen.

Jetzt mitmachen!