Ich sollte aus meiner Manie etwas machen. Oder es zumindest versuchen. Ich spreche vom permanenten, manche werden stattdessen penetranten sagen, Herumbasteln an meinem WordPress-Theme von GeneratePress – übrigens auch an der Performance.
Dieses WordPress-Theme ist immerhin seit Jahren das Gleiche. Trotzdem ändert sich ständig was. Manchmal täglich. Ich sollte, wie Claudia es mir mal geraten hatte, Screenshots machen und diese an geeigneter Stelle zeigen. Schade, die habe ich nicht. Wie es sich gehört, versuche ich bei all den Umbauarbeiten, die übrigens nicht mittels eines der vielen Maintenance – Plugins „versteckt” werden, sondern live mit allen Tücken begleitet werden können, die Tests nicht zu vernachlässigen. Das kostet am Ende oft mehr Zeit und Nerven als das Herumfuhrwerken selbst.
An anderer Stelle teste ich zusätzlich und stelle – was sonst – dort die gleichen bzw. üblichen Probleme fest. Möchte man die Performance im „grünen Bereich” halten, so sind vor allem zwei Faktoren entscheidend.
1. Fotos
Die Auslieferung der Fotos findet hier im Blog i.d.R. im *webp – Format statt. Dazu nutze ich seit einigen Jahren das Plugin von Imagify.
2. Fonts
Natürlich will ich nicht den immer noch zahlreich vorhandenen Abmahnanwälten zum Opfer fallen. Daher sind auch hier längst alle Fonts lokal gehostet. Die entsprechenden Werkzeuge, um sich im Google Font – Angebot umzuschauen bzw. die Fonts einzubinden sind zahlreich. Ich nutze am liebsten den „Google Font Helper”.
Bei der Übernahme der vom Font Helper übernommenen Einträge für eure style.css ist erst kürzlich ein Eintrag hinzugekommen, der meiner Erfahrung nach Auswirkung auf die Performance des Blogs haben kann. Es handelt sich um font-display: swap; Diesen Eintrag hatte ich bis dahin grundsätzlich manuell hinzugefügt. Er verhindert, dass Googles Speed-Test meckert. Fehlt dieser Eintrag (auch bei selbstgehosteten Fonts), so werden die Schriftarten erst angezeigt, wenn die Seite komplett geladen ist. Dies wird als Flash of Invisible Text (FOIT) bezeichnet.
Achtet darauf, dass die URL-Einträge im unteren Teil dieses Beispieles korrekt sind. In meinem Fall muss ich die beiden Punkte vor dem Pfad löschen, weil ich aus mir heute unerfindlichen Gründen die Fonts gleich auf der ersten Hierarchieebene unterbringen wollte. Ich meine, ich hätte gelesen, dass dieses Vorgehen performancetechnisch besser sei. Das Verzeichnis befindet sich bei mir also nicht im Ordner: wp-content oder unterhalb meines darin befindlichen Themeordners, sondern auf der gleichen Ebene wie z.B. der Ordner wp-content. Meine Vorgehensweise hat den Vorteil, dass ich mit den gleichen Pfaden ggf. auch aus anderen Themes auf mein Font-Verzeichnis zugreifen kann. Der Pfad bleibt gleich. Wären die Fonts im Theme-Verzeichnis, sähe dies anders aus.
Font-Display: swap;
Sollten die Fonts allerdings mit entsprechenden Plugins (Perfmatters) vorgeladen werden, so erübrigt sich der Eintrag. Steht er allerdings einmal im Eintrag der style.css, denke ich, ist man auf der sicheren Seite.
Wenn Sie einen System-Font-Stack verwenden, müssen keine Schriften auf die Seite geladen werden! Das ist ziemlich groß! Es beseitigt auch jede FOUT (Flash of Unstyled Text) oder FOIT (Flash of Invisible Text) Hässlichkeit. Unsere Website verwendet Systemschriftarten, und ich wette, Sie haben es nicht einmal bemerkt. Das stimmt; Diese Seite lädt keine einzige Schriftart. Link folgenWie man WordPress beschleunigt (Optimierungen für Core Web Vitals im Jahr 2023)
Woorkup
So sehr ich schöne Schriftarten liebe, so sehr muss ich darauf hinweisen, dass mehrere verschiedene Fonts im Blog die Performance negativ beeinflussen. Hier habe ich zurzeit nur zwei verschiedene im Einsatz. Eine davon gehört zum Font-Stack meines Themes. Er sieht so aus:
-apple-system, system-ui, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";Kostet gleich mehrere Prozente
Lediglich für einige Überschriften nutze ich einen anderen Font (MuseoSans700 bzw. MuseoSans900). Ändere ich den Verweis auf die Standard-Fonts (s.o.) fallen die Performancewerte von Pagespeed sofort um ein, zwei Punkte. Nimmt man weitere Fonts hinzu, verschlechtern sich die Werte zusehends.
Sieht man regelmäßig auf die Werte, die z.B. die Google – Messungen ergeben, stellt sich schnell ein gewisser Frust ein. Ich bin jedenfalls kaum zufriedenzustellen mit dem, was Pagespeed mir verrät. Besser gesagt, ich verstehe einfach nicht, welche Stellschrauben zu drehen wären, um die Seite noch besser zu machen. 🙂
Werte für meine Startseite
Links: Computer, Rechts: Mobil
Warum ist der Wert für die mobile Ausgabe immer schlechter als der für den Desktop? Ehrlich? Ich habs bis jetzt nicht verstanden. Erklärende Texte gibt es schon genügend. Aber ich verstehe nicht, was die Autoren da schreiben. So halte ich mich fest an den Dingen, die ich nachvollziehen und vor allem selbst gestalten kann. Das sind nun einmal zum jetzigen Stand Fotos und Fonts.
Diese guten Werte beziehen sich auf die Startseite. Die Posts oder Pages sind noch einmal ein ganz anderes Thema. In meinem Fall fallen die Werte je nachdem deutlich ab. Es kommt darauf an, welche Elemente im Beitrag verwendet werden. Ich halte es nicht so, dass ich vor der Freigabe eines Artikels auch noch auf die Google Pagespeed – Werte sehe. Mir reicht es schon, wenn ich mich damit herumquäle, einen einigermaßen guten SEO-Wert zu erreichen.
Beweggründe – alles nur Spaß
Bestimmt fragen sich einige Leserinnen und Leser, wieso ich in diese Dinge überhaupt so viel Zeit bzw. Ehrgeiz stecke. Die Antwort ist einfach. Ich habe Freude an den Sachen und immerhin lerne ich – wenn auch langsam – immer etwas hinzu. Und auch das macht mir Spaß. Meinen Zugriffszahlen, kann ich mal ganz uneitel sagen, schaden meine vielen Versuche nicht. Sie stehen und fallen eher mit irgendwelchem Content, der mal gelungen und mal daneben ist. Jedenfalls schließe ich das einmal aus den Zahlen. Das nächste Projekt wartet schon. Oder auch nicht.
Block Themen und die CSS-Eigenschaft font-display – Horst Scheuer
Entdecke mehr von Horst Schulte
Melde dich für ein Abonnement an, um die neuesten Beiträge per E‑Mail zu erhalten.
Das ist so mit Bastelsystemen, wo man viel auf Drittanbieter ausweichen muss. Es gab früher eine Alternative namens Ghost, wo da einiges besser lief. Beim Handy hängt halt viel von den verbauten Komponenten ab.
Um die Darstellungsleistung zu verbessern gelten immer noch die alten Webregeln: So wenig Schnickschnack wie möglich, so wenig Inhalte von Drittanbietern, wie möglich und was man kleiner kriegen kann, sollte man auch entsprechend verkleinern. Die eigenen 8 K Aufnahmen sind halt nix für die schnelle Darstellung.
Beim PC werden die Rahmenwerke zusätzlich von der Grafikkarte gestützt, daher ist die Performanz da oftmals besser.
Für jemand, der nicht permanent mit unlimitiertem Datenvolumen online ist, ist WP gar nicht erst zu empfehlen. 2 Wochen ohne Updates aller Komponenten und die Seite ist eine einzige Scammerhölle (wenn man Glück hat).
Für die Darstellung von Bildern bräuchte man eigentlich keine Plug-ins. Das bringen die Browser selbst mit.
Auch die Abwicklung von Audio- und Videodateien kann man in der Regel dem Browser überlassen, nur sieht das dann halt nicht immer alles so toll aus.
Audio und Videodateien kann man für das Web neu rendern lassen. Wenn es Interesse an hochauflösendem Material gibt, so lässt sich das immer noch per wetransfer.com (oder ähnlichen) verschicken oder man nutzt halt entsprechende Mediaportale dafür und bettet nur den Verweis ein.
Hier auf meinem Billighandy fluscht Deine Seite im Moment ganz gut.
poestlich = Wabi!! Ja, Wabi ist schon ein klasse Theme. Ich nutze Wabi als Child-Theme. Ich habe alle Änderungen per Gutenberg exportiert und in das Child-Theme gepackt.
Wabi finde ich auch schön. Danke für den Tipp bezüglich des Exports.
Da mag ich dir nicht zustimmen, Juri. Hier laufen an die 30 Plugins und mit etwas Einsatz habe ich es hinbekommen, dass sich das nicht signifikant auf die Performance niederschlägt. Außerdem – glaube ich – ist das Theme durchaus nutzerfreundlich. Die Leserinnen und Leser profitieren davon. Ehrlich, wo hat es so einen schönen Kommentarbereich? 😃
Puritanisch(er) gehts auch und auch das hat seine Reize. Es gibt heute wie Anfang des Jahrtausends Anbieter, die dem User quasi alles aus der Hand nehmen. Auch das hat seine Daseinsberechtigung. Ich habe lieber alle Spielmöglichkeiten und möchte basteln können. Deshalb bin ich seit der ersten Stunde ein Fan von WordPress. Schau dich um: Die Leute setzen es immer noch ein, trotz aller Stinkstiefeleien, die man immer mal wieder dazu liest. Ich finde, das Team macht einen großartigen Job. Und es ist innovativ. Die Blocktechnik hat Wordpress stark verändert und sich im Gegensatz zu den Behauptungen vieler so genannten Experten, durchgesetzt. Ich finde es immer wahnsinnig irreführend, wenn ich die Bewertungen des Gutenberg-Plugins sehe. Die kommen aufgrund der massiven Ablehnung wohl nie mehr in die Pötte. Total ungerecht und es entlarvt aber gleichzeitig einen großen Teil der Community.
Was täte ich ohne WordPress? Mir wäre ganz schön langweilig und ich hätte weniger Spaß bei meiner Suche nach Weiterentwicklung und Individualität. Ich habe übrigens einige Jahre Joomla genutzt. War schön, diese Zeit. Ich war Betreiber der Office-Seite Officetipps.net. Joomla ist ein klassisches CMS. Ich finde, WordPress kann selbst dort mithalten.
Freut mich zu hören, dass Wutzone auch auf einem Billighandy gut flutscht. Das ist für mich Ansporn und Bestätigung nicht mit dem Quatsch aufzuhören.😇
Habe mein Blog auch mal von Pagespeed untersuchen lassen. Ergebnis: Nichts, was mich jetzt irgendwie in Unruhe versetzen würde, außer vielleicht die Anmerkung zu meiner robots.txt, wo angeblich drei Einträge problematisch sind. Die schaue ich mir bei Gelegenheit mal an.
Performancemäßig kann ich nichts weiter „schrauben”, was am Ende als tatsächlich wahrnehmbarer Effekt beim Besucher ankäme.
Sehr zufrieden bin ich damit, dass ich lediglich 10 Plugins einsetze, von denen genau 10 reine Backend-Plugins sind, die nichts mit der Gestaltung und der Performance des Blogs zu tun haben.
Mein Blog ist also im Grunde ein reines WP mit dem 20.20.3‑Standardtheme. Ein paar wenige Fonts werden lokal geladen, das Stylesheet meines Child-Themes ist bis auf die notwendigen Initialangaben leer.
Natürlich habe ich in den mitgelieferten Styles des Themes, die ich bisher verwendet habe, einige Änderungen nach meinem Geschmack vorgenommen. Das erledige ich aber im Rahmen des Full-Site-Editings mit dem Gutenberg.
Das ist übrigens für mich der interessanteste Lerneffekt, den ich mit WordPress in den letzten Jahren hatte.
Genau, das meine ich, Boris. Mit WordPress wird jeder Blogger nach seiner Facon glücklich. Es wird offenbar (Nutzer) buchstäblich jedem gerecht. Ich fand die Einführung der Blocks sensationell, andere eben die Möglichkeit des Full-Site-Editings. Da bin ich trotz Widerwillens auch dabei: https://poestlich.de
Das ist die Variante mit erweiterter Metazeile und Kommentar-Bereich.
Da du nun deine neue Domain so oft erwähnt hast 😉 Du hattest schon weitaus schickere Namen!
Stimmt vermutlich. Die hier laufen immer noch auf mich:
2Bier.de
Bedburgisches.de
Blogkonzil.de
Blogmemo.de
erftnetz.de
nexil.de
horstschulte.com
netzexil.de
wortschwatz.de
🙂
äääh ja => O M G
Und welche gefällt dir davon am besten?
netzexil.de
wortschwatz.de
blogmemo.de
erftnetz.de
Nur wenn du die nicht alle nutzt, warum sammelst du die dann?
Danke, Su. Ich lass’ es mir durch den Kopf gehen. 🙂
@Horst: Ich kann das nachvollziehen, ich bastle auch ständig. Für meine Domain https://textrebell.de bin ich mal einen andern Weg gegangen. Keine Googlefonts, keine Plugins, Caching, Optimierung nur über .htacess.
Natürlich auch mit dem Theme von GeneratePress; das Theme bringt die Grundvoraussetzung für eine schnelle Seite bereits mit. Das Ergebnis kann sich sehen lassen. Mit den richtig grottenlangsamen Websites ist es aber dank http/2 sowieso vorbei. Das „Auskitzeln” der letzten Hundertstelsekunde macht einfach Spaß.
Vielleicht erinnert sich noch jemand an den Suchmaschinenoptimierungs-Wettbewerb mit der berühmten Hommingberger Gepardenforelle? War auch Quatsch, machte aber einen Heidenspaß 😉
https://de.wikipedia.org/wiki/Hommingberger_Gepardenforelle
Hallo Peter, das ist ja interessant. Ich bin also nicht alleine mit meinen Neigungen 🙂
Hier im Blog nutze ich die .htaccess übrigens auch intensiv. Ich habe diesen Inhalt komplett übernommen. Es läuft…
Hier wechsle ich die externen Fonts – auch die von Google – hin und wieder gegen den Standard Font Stack aus. Das macht sich immer wieder gut. Bloß… lange bleibt es nicht so. Dann habe ich wieder etwas anderes.
GeneratePress ist ein tolles Theme. Der Code ist, wie du sagst, auf Geschwindigkeit getrimmt. Der Code ist phänomenal optimiert. Trotzdem setze ich seit Jahren schon wp-rocket und – weniger lang – das Optimierungstool „Perfmatters” ein. Die vertragen sich gut, wenn man es nicht übertreibt. Meinst du der Performanceschub wäre hauptsächlich auf http2 zurückzuführen? Ich fand den vor ein paar Jahren gemachten Versionssprung bei PHP. Da nahm WordPress echt Fahrt auf. Mittlerweile läuft hier die Version 8.1.
wutzone ist aber sehr gut 😉
Hilft mir sehr die Regeln;)
Martin