Google PageSpeed Insights Sammelthread

Ach so, eigentlich alle Seiten, jetzt hier speziell geranien-pflanzen.de, denn das ist die einzige mit Preload. Die Woff2 ist überall kritisch, auch wenn die per Preload geladen wird. CSS entfällt dann aber.

Hatte die Woff2 nun auch schon in einem extra CSS und nachgeladen, brachte nichts. Dann direkt inline in den Head, auch nix.

Im Grunde ist das ein schöner Scheiß. Habe bei https://beispiel.rocks/www.hund-und-herrchen.de/unt...seite_1_1.html für OSM nun einen IntersectionObserver zugeschalten, damit die Map nicht lädt, wenn sie nicht sichtbar ist. Google hatte das vorher bemängelt. Nun ist der Mangel weg, aber die Prozente sind gleich schlecht geblieben. Man kann es hier drehen und wenden wie man will, auch mit Woff2 oder CSS. Wenn Adsense entfernt ist, dann werden auch mobil 95 bis 100% erreicht. Mit Adsense nur 65 bis 75.

Wobei Google die die letzten Monate wieder was geändert haben muss, denn ich war mobil immer über 90%.

Das hatte ich aber vorhin versucht. Also das CSS bei der Geranien komplett raus und die minimierte Version in den Head. Das machte bei Google keinen Unterschied? Ich teste das aber noch mal

Kannste Dir nun bei der geranien-pflanzen ansehen. Externes CSS ist weg, alles inline. Das Google-Tools sagt genau das gleiche als wenn es extern wäre.

Die Optionen Fallback, block, swap, optional und auto habe ich alle schon durch, änderte gar nichts in Sachen Google. In der eigenen Darstellung schon. Bei der Geranien ist "fallback" aktuell aktiv, war vorher swap.

Von wo ist dein Code denn Alex? Ich möchte echt mal einen sehen, die Fonts einbindet und keinen "kritischen Pfad" hat.

Und mit sowas wie LazyLoad arbeite ich ja schon. Nicht überall, aber hier und da um zu sehen, wie Google drauf reagiert. Neu seit heute ist LazyLoad der Openstreetmap bei HuH. Ich versuche ja schon jedes Fizzelchen rauszuholen.

Was ist "od"? Mensch, immer dieses kryptische....

Alex, gibt mir bitte ein Beispiel, wenn Du sagt das muss "vielleicht" so. Irgendwoher muss Deine Erkenntnis ja kommen. Und Du sagst "die anweisung habe ich aber inline...". Genau SO habe ich es bei der Geranien-Seite und es bringt nix. Also sag mal bitte, wo Du das hast. Ich mache das ja auch nicht zum ersten Tag, eher zum zweiten Jahr.

Und nicht falsch verstehen, der Thread ist nicht für mich. Wenn ich mir die Seiten der Leute hier so ansehe, die ich kenne, da stehe ich noch mit am besten da, was die Auswertung von Insights angeht.

[ATTACH=JSON]{"data-align":"none","data-size":"full","title":"fallback-1.jpg","data-attachmentid":120985}[/ATTACH]

Na genervt nicht unbedingt, aber warum muss man denn 5 mal nachfragen. Redest Du von der Hosting-Seite? Wenn ja, dann ja, da ist ein "font-family:'IcoMoon';font-display:fallback;". Und ja, sie erscheint nicht im "kritischen Pfad", das stimmt auch.

Und per push wird sie auch gesendet, so wie bei mir.

Aber es gibt einen Unterschied: Deine Startseite verwendet die Schrift IcoMoon gar nicht. Wo genau wird die denn verwendet, auf welcher Unterseite? IcoMoon sind ja Symbole. Kann gut sein, dass die nicht "kritisch" ist, weil sie nicht benutzt wird. In Falle dann sogar umsonst geladen.

Ich gehe mal davon aus, dass IcoMoon unten für das Facebook-Logo sein soll. Das wird aber in "Times New Roman" angezeigt, also fehlerhaft. Schau mal selbst unten im Footer. Kann mich aber auch irren, aber FB-Icon und Icon-Schrift, das würde ja passen.

So, bin einen Schritt weiter, aber so wirklich logisch finde ich das nichts. Der kritische Pfad der woff2-Font ist nun weg und gemacht habe ich eigentlich nicht viel, außer die Angaben umgestellt von

@font-face {
    font-family: 'Open_Sans';
    font-display: swap;
    src: url('/css/fonts/open_sans/regular.eot');
    src: local('Open Sans'), local('OpenSans'), url('/css/fonts/open_sans/regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/open_sans/regular.woff2') format('woff2'), url('/css/fonts/open_sans/regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

nach

@font-face {
    font-family: 'Open_Sans';
    font-display: swap;
    src: local('Open Sans'), local('OpenSans'), url('/css/fonts/open_sans/regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/open_sans/regular.woff2') format('woff2'), url('/css/fonts/open_sans/regular.woff') format('woff');
    src: url('/css/fonts/open_sans/regular.eot');
    font-weight: normal;
    font-style: normal;
}

Also im Grunde nur die Position einer Zeile verändert.

Und ich nutze wieder "swap", da schneller.

Geht nun in Insight, in Chrome, in Firefox, aber nicht mehr im Edge

Zitat von chris21

as="font" type="font/woff2"

und dann entsprechend synonym für die anderen font types.

So, wer lesen kann ich klar im Vorteil :wall: Bin aber jetzt erst mal am Ziel :hurra:

Ja, es muss rel=preload; as="font" type="font/woff2" heißen und nicht wie bei mir rel=preload; as=font/woff2 . Mit meinem ging der Push / Preload zwar auch, aber Insights meldete Fehler.

Aber so ganz das Ziel war es noch nicht.

Die Font muss aus dem externen CSS raus und inline rein und zwar vor das externe Stylesheet. Im CSS-File darf der Eintrag nicht mehr vorhanden sein, dann verschwindet schon mal das Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt (In dem Fall sogar egal ob "swap" oder "fallback").

Nun ist eine Fehlermeldung weg, aber zu dem Zeitpunkt bleibt der "kritische Pfad" aber weiterhin erhalten. Fügt man dem HTTP-Push aber ein "crossorigin" hinzu, dann geht auch das, also ein "</css/fonts/open_sans/regular.woff2>; rel=preload; as=font; crossorigin; type=font/woff2". Dann ist auch die Meldung Tiefe kritischer Anforderungen minimieren verschwunden.

Ja, es gibt auch Eichhörnchen, die ne Nuss wieder finden :dance:

Danke !