nicht angemeldet
Pagespeed optimierung mit HTML minify
1 1 
Rolf b
3
Pagespeed optimierung mit HTML minify
Gunnar BittersmannHey Leute,
ich bastel momentan mit Wordpress an meiner Seite. Die Pagespeed Wertung sieht mit 91% schon ganz gut aus. Hat vielleicht jemand noch einen Tip was Gtmetrix damit meint:
Minify HTML for the following resources to reduce their size by 725B (5% reduction).
Minifying http://www.lottospielen24.org/lotto-de-erfahrungen could save 725B (5% reduction) after compression.
Es geht zwar nur um 725B, aber...
Freue mich auf euer Feedback, Egidius
-
ich bastel momentan mit Wordpress an meiner Seite. Die Pagespeed Wertung sieht mit 91% schon ganz gut aus. Hat vielleicht jemand noch einen Tip was Gtmetrix damit meint:
Minify HTML for the following resources to reduce their size by 725B (5% reduction).
Leerzeichen, Tabulatoren, Zeilenumbrüche und dergleichen werden bei der Darstellung von HTML zu einem Leerraum zusammengefasst, an manchen Stellen sind Leerzeichen auch gänzlich überflüssig (etwa zwischen zwei Blockelementen oder im Seitenkopf <head>). Es reicht also, auch im Quellcode diese Stellen zu einem oder keinem Zeichen zusammenzufassen.
Der größte Anteil dürfte auf Einrückungen und Zeilenumbrüche fallen, die samt und sonders nur der Lesbarkeit durch den Programmierer dienen.
Darüber hinaus gibt es noch wenige weitere Möglichkeiten, das eine oder andere Byte einzusparen.
Es geht zwar nur um 725B, aber...
Eben, 725 Byte. Du solltest dir sehr gut überlegen, ob du wegen 725 Bytes einen Aufstand machst. Sowas lohnt sich nur, wenn es automatisch vom Server erledigt und zwischengespeichert wird. Niemand hat etwas davon, wenn du wegen 5 Millisekunden deine Lebenszeit verschwendest oder der Server bei jedem Seitenaufruf 50 Millisekunden braucht, diese 5 Millisekunden Ballast zu entsorgen.
-
@@Regina Schlaukrug
Der größte Anteil dürfte auf Einrückungen und Zeilenumbrüche fallen, die samt und sonders nur der Lesbarkeit durch den Programmierer dienen.
Das „nur“ gehört in Gänsefüßchen.
Es geht zwar nur um 725B, aber...
Eben, 725 Byte.
Im HTML-Code. Bei der Übertragung (gezippt) dürften es noch weniger sein. HTML minifying considered bullshit.
Gleiches für CSS. Ich bin immer „begeistert“, wenn ich nach einer Regel im Stylesheet suche und diese (wie alle anderen Regeln auch) in Zeile 1 steht.
Nur bei JavaScript kann man durch minifying was rausholen, weil dann auch Variablenbezeichner gekürzt werden.
LLAP 🖖
--
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
-
-
body { color: #8e8e8e; background-color: #fcfcfc; }Warum nur?!?!?
Warum meinen eigentlich so viele Webdesigner, dass es toll aussieht, wenn man seinen Text mit leichtem Pastellton aufs Fenster des Lesers haucht?Kontrast stinkt nicht! Und erfreut diejenigen, deren Augen schon etwas müder geworden sind.Davon mal ab - die 729 Bytes scheinen durch das Eliminieren von Einrückungen zu entstehen; aber du kannst vermutlich eine Menge mehr sparen, wenn Du die <div>eritis reduzierst, deine internen URL-Angaben ohne Host aufschreibst (also z.B.
/wp-content/themes/goodnews5/js/main.js?ver=1.0statthttp://www.lottospielen24.org/wp-content/themes/goodnews5/js/main.js?ver=1.0spart 29 Bytes pro URL) und deine Klassenflut zu bremsen versuchst. Ein Beispiel:<li id="menu-item-1001" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1001"><a href="http://www.lottospielen24.org/icelotto-de-erfahrungen/">Lotto Erfahrungen bei Icelotto</a></li>Aber vermutlich bringt das Dein GUI Framework so mit und ist nicht ohne größere Handarbeit zu ändern.
Wie auch immer, deine Requeste sind - nachdem der erste 450KB Klops unten ist, nur noch ca 7 KB leicht, darüber denkt heute keiner mehr nach.
Rolf
-
Hallo Rolf,
Kontrast stinkt nicht! Und erfreut diejenigen, deren Augen schon etwas müder geworden sind.
Zu starker Kontrast ist aber ach unangenehm für die Augen (weshalb man ja auch nicht #000 und #FFF wählt, sondern leicht verschobene Werte).
deine internen URL-Angaben ohne Host aufschreibst (also z.B.
/wp-content/themes/goodnews5/js/main.js?ver=1.0statthttp://www.lottospielen24.org/wp-content/themes/goodnews5/js/main.js?ver=1.0spart 29 Bytes pro URL)Vorsicht. Verweise in den Beiträgen selber werden bei Wordpress in den Feed übertragen, und dort sollten absolute URLs vorliegen.
LG,
CK
-
-
Hi,
HTML minifizieren bei dynamischen Seiten ist schwierig und der Nutzen meist gering wenn sowieso GZIP verwendet wird. Es gibt für WordPress verschiedene Plugins. Du kannst sie ausprobieren. Du wirst wohl keine nennenswerte Verkleinerung der HTML-Seite bemerken.
Bei der Performanceoptimierung sollte man am "dicken Ende" anfangen: Die Teile optimieren die die Seite langsam machen und deren Optimierung eine messbare Verbesserung der Performance bringt. Das ist in den aller meisten Fällen nicht das bisschen Whitespace im HTML.
Auf deiner Seite sehe ich zum Beispiel viele einzelne .css, .js Dateien und Webfonts. Die blocken zwar nicht alle das Rendering aber tragen zur heruntergeladenen Datenmenge bei.
Diese Dateien kannst du jeweils in eine zusammenfassen und minifizieren. Das spart eine Menge HTTP Overhead. Ich vermute der meiste Code in den .css und .js Dateien wird nicht unbedingt gebraucht. Dort kannst du vmtl. aufräumen und manche ganz herausnehmen.
Bei den Webfonts würde ich sparsamer sein. Du lädst fast 190 KB Fonts. Sind die alle nötig?
Auch bei den JPEGs lässt sich etwas herausholen. Für Mac gibt es z.B. ein fertiges Bildkomprimierprogramm: https://imageoptim.com/
Grüße
Nils