Ladezeiten-Optimierung

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Ladezeiten-Optimierung

Post by svasti » Fri Aug 08, 2014 1:59 pm

Wow, diese Seite
meltemi wrote:Siehe:
http://developers.google.com/speed/page ... %2Fblog%2F
hat's in sich. Vor allem sagt sie aus, das bei CMSImple_XH noch "Verbesserungspotential" ist. Müsste man im Einzelnen in weiteren Threads durchgehen.

cmsimple-xh.org:
mobile:
58 / 100 User Experience
Should Fix:
Use legible font sizes
Size tap targets appropriately
Configure the viewport
78 / 100 Speed
Should Fix:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Consider Fixing:
Leverage browser caching
Enable compression
Minify CSS
Minify HTML

Desktop:
89 / 100 Suggestions Summary
Consider Fixing:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Enable compression
Leverage browser caching
Minify CSS
Minify HTML
meltemi wrote:h4-h6 werden bei Google überhaupt nicht gewertet,
Tja, was rede ich da. :(
Last edited by cmb on Thu Aug 14, 2014 12:20 pm, edited 1 time in total.
Reason: Topic nach /viewtopic.php?f=29&t=7956&p=43229#p43229 gesplittet

meltemi
Posts: 177
Joined: Sat Feb 22, 2014 10:11 pm
Location: Franken (Deutschland)
Contact:

Re: menulevel set by class

Post by meltemi » Sat Aug 09, 2014 1:00 am

Hallo,
svasti wrote:Wow, diese Seite
meltemi wrote:Siehe:
http://developers.google.com/speed/page ... %2Fblog%2F
hat's in sich.
Es ist immer hilfreich, was Google dort vorschlägt. Aber es werden nur bestimmte von Google selbst festgelegte Kriterien berücksichtigt.

Eine Seite kann auch dann schnell beim Besucher aufgebaut werden, wenn ihre Werte in diesem Google-Test schlecht sind. Nämlich dann (als Beispiel), wenn nur weniger als 10 Elemente runtergeladen werden, deren Größe zusammen weniger als 100 KB beträgt. In diesem Fall müßte man eigentlich nicht mal die Komprimierung aktivieren (deutscher Google-Text), und die Seite wäre trotzdem schnell.

Andererseits ist es gar nicht so schwierig, dort bei Mobil -> Schneller gemacht und bei Desktop jeweils 100 Punkte zu erreichen. (1)
google wrote:Eliminate render-blocking JavaScript and CSS in above-the-fold content
Das wird ja immer ziemlich weit oben angezeigt, und die meisten stürzen sich dann da drauf und rätseln rum, was damit gemeint ist. Wenn eine Seite ansonsten schnell ist, ist dieser Punkt vernachlässigbar.

YSlow (Yahoo-Erweiterung für fast alle Browser) ist noch hilfreicher. Am besten verwendet man mehrere Werkzeuge.

Gruß


Anmerkung:
(1)
Das schaffe sogar ich mit einer technisch völlig veralteten Website aus dem Jahr 2001. Christoph ist mein Zeuge: er ist ein findiger Kerl und hat das letzte Nacht etwa um 03:00 Uhr bei Google geprüft ;-)

Bei Mobil -> Nutzererfahrung ist meine uralte Seite mit 59 Punkten etwa gleich schlecht wie Matt Cutts' ziemlich SEO orientiert[er] (Zitat snafu) Wordpress-Blog. Im Jahr 2001 gab's keine Smartphones und ich habe auch jetzt noch keins :-)


@svasti,

Zehn Bilder (zehn Anfragen) auf der xh-com-Startseite sind zu viele. Tipp: Fasse sie in einer Sprite-Datei zusammen (nur mit Hintergrund-Bildern möglich).

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: menulevel set by class

Post by cmb » Sat Aug 09, 2014 11:33 am

meltemi wrote:Andererseits ist es gar nicht so schwierig, dort bei Mobil -> Schneller gemacht und bei Desktop jeweils 100 Punkte zu erreichen.
Teilweise könnte da CMSimple_XH bzw. die Templates und Plugins gleich Verbesserungen bringen, teilweise sollte bzw. muss dass aber auch dem Webmaster überlassen werden. Die Details sollten wir aber wirklich besser in (einem) anderen Thread(s) diskutieren.
meltemi wrote:Christoph ist mein Zeuge: er ist ein findiger Kerl und hat das letzte Nacht etwa um 03:00 Uhr bei Google geprüft ;)
Stimmt. :)
meltemi wrote:YSlow (Yahoo-Erweiterung für fast alle Browser) ist noch hilfreicher. Am besten verwendet man mehrere Werkzeuge.
Da kann ich nur zustimmen.
meltemi wrote:Zehn Bilder (zehn Anfragen) auf der xh-com-Startseite sind zu viele. Tipp: Fasse sie in einer Sprite-Datei zusammen (nur mit Hintergrund-Bildern möglich).
ACK. Ansonsten bieten sich Image-Maps (für die "anderen CMSimple-Seiten" Fähnchen) bzw. zusammengefasste Bilder und u.U. Data-URLs an.
Christoph M. Becker – Plugins for CMSimple_XH

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: menulevel set by class

Post by svasti » Wed Aug 13, 2014 10:26 pm

meltemi wrote:@svasti,
Zehn Bilder (zehn Anfragen) auf der xh-com-Startseite sind zu viele.
Bilder sind eingedampft:
  • XH und HTML5-Logo jetzt 1 Bild (-1)
  • Bilder für Community und Plugins jetzt 1 Sprite (-1)
  • 5 Flaggen für internationale XH-Seiten jetzt eine Image Map (-4) (vorbereitet von Christoph)
  • Farbverlauf oben jetzt per css (-1)
  • d.h. 7 Bilder weniger.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: menulevel set by class

Post by cmb » Wed Aug 13, 2014 11:08 pm

svasti wrote:Bilder sind eingedampft:
Klasse! :)
svasti wrote:5 Flaggen für internationale XH-Seiten jetzt eine Image Map
Da könnte man sich evtl. mit JavaScript und dem Canvas "austoben", um den Hover-Effekt wieder herzustellen. Jemand Lust?
svasti wrote:d.h. 7 Bilder weniger
Evtl. könnte man noch search.jpg als Data-URI im CSS einbetten:

Code: Select all

#search input {
background: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3NzcsNzc3Nzc3Nzc3Nzc3Nzc3NDQ3NzcsNzc3Nzc3Nys3Nzc0Nzc3Nzc3Nzc3N//AABEIABAAEAMBEQACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAEBwH/xAAhEAACAgEEAgMAAAAAAAAAAAABAgMRBAAFITESUSJh4f/EABYBAQEBAAAAAAAAAAAAAAAAAAQDAf/EABwRAAEEAwEAAAAAAAAAAAAAAAIAAQMREjGh0f/aAAwDAQACEQMRAD8Aqcuf55M4meVVR2RFRyo4NXx3pMcGYs7I5zYlSbsuXJlRzJLZMT+IYjkggEX9/moyBgVKsZZDa3K2pJpmlinkgLm3ChSCfdEGjrBMh0tIBLaDBFmbRuAijSXJxciQfMCypNAlvVd30QK7qyE84z3sH56ks0TxVom6v//Z") no-repeat left 1px white;
}
Das funktioniert selbst im IE 8 ganz prima, und noch rückständigere Browser, die es nicht unterstützen, zeigen dann das Bild eben nicht an -- auch kein wirkliches Problem.

Übrigens sind wir schwer vom Thema abgekommen (das ich viel später gerne noch mal aufgreife), und unterhalten uns in der falschen Sprache für dieses Forum. Soll ich die entsprechenden Posts verschieben?

PS: bzgl. der Ladezeiten-Optimierung habe ich vor ein paar Tagen mal einen Artikel im Wiki angefangen -- da könnte "man" auch mal weiter machen.
Christoph M. Becker – Plugins for CMSimple_XH

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: menulevel set by class

Post by svasti » Thu Aug 14, 2014 12:54 am

cmb wrote:Evtl. könnte man noch search.jpg als Data-URI im CSS einbetten:
super, gemacht. Noch ein Request weniger!

Außerdem beginnen jetzt alle Seiten im Content mit h2, der oben stehende Titel, bzw. das Motto der Website ist in h1. Damit kommt h1 immer nur einmal vor. Hab mir die Sache aber einfach gemacht und ins Template geschrieben:

Code: Select all

<?php echo str_replace(array('<h1','<h2','<h3','</h1','</h2','</h3'),array('<h2','<h2','<h2','</h2','</h2','</h2'),content());?>

meltemi
Posts: 177
Joined: Sat Feb 22, 2014 10:11 pm
Location: Franken (Deutschland)
Contact:

Re: menulevel set by class

Post by meltemi » Thu Aug 14, 2014 1:08 am

cmb wrote:wir ... unterhalten uns in der falschen Sprache
Ich spendiere für die falsche Sprache eine base64-codierte Flagge:

Code: Select all

background:url(data:image/gif;base64,R0lGODlhEAAKALMAAAAAAGZEM8wAAERERLtmRLuIZqqIiP+7ZrvM3d3d3d27mf/du///3d3u/5mZmf///ywAAAAAEAAKAEAEGhDISSs4OOt9hP9gKFjkJJ5fWaJsG3JwLGMRADs=) right no-repeat;
Und schon wieder eine Server-Anfrage weniger. Das ist wie mit den (vormals siebzehn, jetzt nur noch) neun kleinen Negerlein: dann wären es nur noch acht ;-)
cmb wrote:Soll ich die entsprechenden Posts verschieben?
Ich kann nur für mich sprechen: meine Beiträge darfst Du gerne verschieben.


@svasti,

unter uns gesagt: die xh-com-Startseite ist schon schnell (9 Anfragen, 65 KB) :-)

Aber solche Seiten sind auch immer eine Image-Angelegenheit, weil manch einer genauer prüft (mit YSlow, mit F12 in seinem Browser, bei Google-Pagespeed oder sonstwo).

Dabei könnten helfen:
1.)
Nur zwei CSS-Dateien statt drei verwenden: Regeln aus plugins.css in stylesheet.css verschieben.
2.)
Komprimierung einschalten.
3.)
Cache-Verhalten der Datei-Typen regeln (siehe Tipps in YSlow).

Der nächste Schritt könnte dann sein, die Erfahrungen auch für die Standard-Templates zu nutzen.

edit: 1 * 10 (veraltet) in 9 geändert.

snafu
Posts: 352
Joined: Sun Dec 26, 2010 5:18 pm

Re: menulevel set by class

Post by snafu » Thu Aug 14, 2014 7:01 am

bei den Optimierungen nach den Vorschlägen von google oder yslow sollte man nicht vergessen, die reale Übertragungsgeschwindigkeit mit Tools wie http://tools.pingdom.com/fpt/ zu verifizieren, am besten über längere Zeit (und zwar nach Einwahlknoten getrennt!). Ich hab das mal ziemlich exzessiv gemacht ;-}
Da ich lange Zeit (bis 2012) nur DSL Light hatte , sind meine Websites Traffic optimiert. Das man bei einer UPLOAD Geschwindigkeit auf ISDN Niveau (7kb/Sek) und Transferraten im Bereich von 50kb/Sek relevante Ladezeiten Unterschiede zwischen 500kb *.png im Template und der Alternative 100kb komprimiertes jpg deutlich spürt, leuchtet ein. Bei DSL 16000 fällte es nicht mehr so auf.

Den größten Impact hat die Reduzierung der Http Requests! Ob eine Datei nun eine 2KB unkomprimierte CSS ist oder ein komprimiertes gziptes 500byte Häpchen oder eine 100kb Grafik/Font macht wenige Unterschied.
Die Ladezeit für die 2 externen Fonts (2x175kb) die im Original Gonzo enthalten sind (sowohl im WP Original als auch in meiner CMSinple Anpassung) lag auf dem Niveau der restlichen 20-25 (unjefähr) http requests der Seite, deren Transvervolumen aber nur im Bereich von ca 40-50kb waren.

minify von css/js bringt nur was, wenn man es dann auch in jeweils eine Datei bündelt,
Etag konfigurieren, expire Header, html komprimieren, alles ganz nett und macht bei analog, isdn und dsl light sicher Sinn, wenn es um Übertragungsgeschwindigkeit geht, bei meiner aktuellen 16000 Leitung konnte ich keine relevanten Unterschiede feststellen. Unterschiede von 20-50ms können auch leicht dadurch entstehen, daß der Server auf dem man sein Webspace Paket hat, auch andere Kunden auf dem gleichen Server bedient ... wie wichtig Uhrzeit und Einwahlknoten sind lässt sich bei den Pingom Tools auch schön feststellen, man nehme z.B. mal den Einwahlknoten Dallas ... ;-}

Den allergrößten Geschwindigkeitsgewinn hat man bei Caching als statische HTML Seiten, zumindest bei Wordpress. Meine sowieso schon akzeptable Ladezeit hat sich um signifikante 25-50% verbessert (je nach Uhrzeit, Lust&laune des Servers die Daten rauszurücken).
In absoluten Zahlen geht es dabei um Unterschiede zwischen 200-500ms, wobei Ladezeiten unter einer Sekunde für einen Ressourcenfresser wie Wordpress schon beeindruckend sind.

Aus Anwendersicht ist aber eigentlich alles zwischen 1-2 Sekunden gut, zwischen 2-5 Sekunden noch duldbar .. dannach wird es nervig. Zu dem Thema gibt es genug Lesefutter und Studien im Web, man muß da nur auf das Veröffentlichungsdatum sehen, je aktueller die Studie, desto schneller werden die Besucher ungeduldig ;-}
lg.
winni

Durch einen Sucher betrachtet wird alles zu einem Motiv.
meine Galerie; mein Blog, mein CMSimple Template Tutorial

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: menulevel set by class

Post by cmb » Thu Aug 14, 2014 12:55 pm

meltemi wrote:
cmb wrote:wir ... unterhalten uns in der falschen Sprache
Ich spendiere für die falsche Sprache eine base64-codierte Flagge:

Code: Select all

background:url(data:image/gif;base64,R0lGODlhEAAKALMAAAAAAGZEM8wAAERERLtmRLuIZqqIiP+7ZrvM3d3d3d27mf/du///3d3u/5mZmf///ywAAAAAEAAKAEAEGhDISSs4OOt9hP9gKFjkJJ5fWaJsG3JwLGMRADs=) right no-repeat;
Das würde ich so nicht machen. Die Flagge ist keine Hintergrund-Grafik, da sie für den Besucher ja wichtig ist (ein Screenreader würde die Hintergrundgrafik vermutlich einfach ignorieren). Man könnte eine entsprechende Data-URI direkt im HTML verwenden; die ca. 140 Bytes mehr sind vielleicht verschmerzbar, und Browser, die Data-URIs nicht unterstützen sollten dann das alt Attribut anzeigen (und zumindest IE 6 und 7 tun das auch).

Grundsätzlich sollten wir uns da aber vielleicht languagemenu() mal vornehmen (damit werden die Flaggen auch auf cmsimple-xh.org erzeugt). Entweder Ausgabe der Data-URIs, oder zumindest bei mehreren Flaggen sinnvoll, eine dynamisch generierte (gecachte) Imagemap.
meltemi wrote:Nur zwei CSS-Dateien statt drei verwenden: Regeln aus plugins.css in stylesheet.css verschieben.
Da sollten wir vielleicht allgemein die Zusammenfassung der Plugin-Stylesheets fortsetzen. Damals wollte ich die Reihenfolge der Stylesheets (Core, Template, Plugins) allerdings nicht ändern, und im allgemeinen bin ich nicht sicher, ob man das Template-Stylesheet nicht lieber separat lässt, da ja so mancher mehrere Templates verwendet.
meltemi wrote:Der nächste Schritt könnte dann sein, die Erfahrungen auch für die Standard-Templates zu nutzen.
ACK.
snafu wrote:minify von css/js bringt nur was, wenn man es dann auch in jeweils eine Datei bündelt,
Ich würde sagen, es bringt nur was bei relativ großen Dateien. Bei den zusammengefassten Plugin-Stylesheets sollten wir das aber machen; zumindest das Zusammenfassen von mehreren aufeinanderfolgenden Whitespace-Zeichen zu einem Space sollte eigentlich auch leicht möglich sein, und vermutlich keine Probleme verursachen. Allerdings bringt das auch nicht viel: plugins.css von cmsimple-xh.org hat derzeit 13,7 KB, und käme dann auf 12,3 KB. Selbst mit einem aggressiven Minifier (z.B. http://cssminifier.com bleiben noch 8,72 KB übrig. Bei JavaScript sind da andere Raten üblich (gerade mal mit dem aktuellen twocents.js getestet: 9.47 KB -> 3.78 KB; wäre der Code kommentiert, wäre das Verhältnis noch krasser; würde der Code externe Bezeichner verwenden, dann wäre das Verhältnis weniger deutlich).
snafu wrote:Den allergrößten Geschwindigkeitsgewinn hat man bei Caching als statische HTML Seiten, zumindest bei Wordpress.
Sollte man sich vielleicht mal ansehen, aber ich vermute, dass das recht aufwendig wird, da ja manche dynamischen Dinge wichtig sind (Kontaktformular, Kommentarformulare, etc.)
Christoph M. Becker – Plugins for CMSimple_XH

snafu
Posts: 352
Joined: Sun Dec 26, 2010 5:18 pm

Re: menulevel set by class

Post by snafu » Thu Aug 14, 2014 3:13 pm

cmb wrote:
snafu wrote:Den allergrößten Geschwindigkeitsgewinn hat man bei Caching als statische HTML Seiten, zumindest bei Wordpress.
Sollte man sich vielleicht mal ansehen, aber ich vermute, dass das recht aufwendig wird, da ja manche dynamischen Dinge wichtig sind (Kontaktformular, Kommentarformulare, etc.)
Für WP gibt es über ein dutzend cache Plugins, ich hab ein ziemlich "primitives" genommen (is klar, nä ;-}).
http://wordpress.org/plugins/wp-fastest-cache/
es gibt leistungsfähigere Versionen, wobei ich mit leistungsfähiger jetzt nicht meine, daß sie sich hinsichtlich der Ladezeiten für den Besucher unterscheiden, es geht dann mehr um die Features im Hintergrund, wie WP Multisite Tauglichkeit und auch automatisches automatisches Rebuild des Caches für einzelne Seiten, wenn Kommentare (unmoderiert) geschrieben werden und viel mehr Einstellmöglichkeiten im Adminbereich ...
echte Unterschiede, aus Sicht des Besuchers, werden wahrscheinlich erst sichtbar, wenn man mehrere Visitors hat die gleichzeitig kommentieren und das regelmäßig. In 99% aller Fälle werden aber nur Seiten zum lesen ausgeliefert.

a. man kann nach belieben Seiten&Posts vom Caching ausnehmen, wie z.B. die Kontaktseite.
b. die Lösung für den Kommentarbereich ist trivial, da wird empfohlen die Kommentare auf "moderieren" zu stellen ... wenn man nicht gerade eine "High Traffic" Seite mit regen Diskussionen hat, ist das jetzt keine Tragödie ... bei Bedarf stellt man die Seite halt auf nicht cachen

und dann gibt es auch die Lösungen, die statische Seiten generieren und in diesen dann Kommentare/Diskussionen über disqus abwickeln (weiß nicht mehr welcher Cache das war, ich hab fast alle ausprobiert).

erwähnte ich schon, daß die deutschen kommentarfaul sind?
lg.
winni

Durch einen Sucher betrachtet wird alles zu einem Motiv.
meine Galerie; mein Blog, mein CMSimple Template Tutorial

Post Reply