Michael: Validiert

Valid XHTML 1.0 Transitional

CSS ist valide!

Aus aktuellem Anlass habe ich mich mal darum gekümmert, dass mein Blog gegen XHTML 1.0 und CSS 2.1 validiert. Ich hatte die Hoffnung, dass die technischen Probleme damit ebenfalls behoben seien. Mit Chrome (build 9.0.597.83) gibt es noch immer Probleme.

Noch jemand ohne Fahrschein?

Allesblog#blog#css#w3c
    • Akku
    • Äem … sorry, aber ich sehe da 16 Validierungsfehler, und eine Menge davon werden von deinem Flattr-Plugin verursacht, was ja auch der Grund für meinen Post war. Leider hast du inzwischen noch mehr ungültige Attribute in dem Plugin untergebracht, was mich zu einem erneuten hoffnungsvollen Aufruf führt: bitte valide reparieren!

      Referenz (NICHT VALIDIERT):

      http://validator.w3.org/check?uri=http://www.allesblog.de/blog/2011/01/31/validiert/

    • Michael Henke
    • Ein “Problem” ist, dass der Code-Baustein vom JavaScript im Anschluss noch verändert wird. Der Validator führt das JavaScript nicht aus. Ob eine Webseite vor oder nach dem kompletten Laden aller Scripte usw. validiert, sind zwei grundsätzlich unterschiedliche Angelegenheiten. Auf den ersten Fall kann ich im Rahmen der Flattr API Einfluss nehmen, auf den letzteren Fall nicht.

Michael: Style und Skript

In genau DER Reihenfolge! Google bewertet eine Internetseite unter verschiedensten Gesichtspunkten. Damit ist jetzt nicht SEO gemeint, um einen möglichst hohen PageRank zu erhalten. Es gibt auch Kriterien, die vom Kontext der Seite unabhängig sind und sich an technischen Größen ausrichten. Dazu gehört auch die Ladegeschwindigkeit der Seite.

Moderne Webbrowser laden mehrere Seiteninhalte parallel um diese möglichst schnell zu erhalten und die Seite aufbauen zu können. Integraler Bestandteil jeder Seite sind Style-Dateien (.css) und Skripte (.js). Diese werden zumeist in dem <head>-Teil des Seitenquelltextes angegeben. Fügt man mehrere dieser Dateien in gemischter Reihenfolge ein, so verlangsamt sich künstlich Seitenaufbaugeschwindigkeit, da der Browser zuerst versucht alle Style-Informationen zu lesen, und anschließend alle Skripte auszuführen. Verweist man zuerst auf alle Style Dateien und anschließend auf die Skripte, können die beiden Dateigruppen jeweils vollständig parallel geladen werden und in optimaler Reihenfolge ausgeführt werden, ohne das nochmal eine CSS Datei geladen werden muss nachdem bereits alle Skripte geladen wurden.

Warum ist das so? JavaScript kann CSS Elemente Refferenzieren. In CSS hingegen kann man kein JavaScript sprechen. Wenn ich in CSS Datei 2 Elemente definiere, die ich nach Script 1 lade, kann ich Script 1 nicht ausführen, weil in CSS2 eventuell weitere betreffende Elemente definiert werden. Wenn aber alle CSS Informationen geladen und somit bekannt sind, kann ich die JavaScript-Dateien direkt nach dem Laden auch ausführen.

In WordPress hat man keine direkte Möglichkeit Einfluss darauf zu nehmen, in welcher Reihenfolge die einzelnen Plugins geladen werden und ihre Script- und Style-Informationen in den Seitenheader schreiben. Hier hilft ein bisschen PHP Code und ein Plugin von Satya Prakash. Nachdem der Seitenkopf komplett bestimmt wurde, geht das Plugin noch mal durch die Reihenfolge der Dateien und sortiert alle JavaScript-Referenzen nach den CSS Dateien an.

Allesblog#css#google#JavaScript#Page Speed#plugin#wordpress

Michael Henke - Autor Allesblog.deWer es noch nicht mitbekommen hat, der ist spät dran. allesblog.de hat eine eigene Facebook-Seite spendiert bekommen. Auf dieser tauchen sowohl die Beiträge aus dem Blog als Vorschau, als auch die Nachrichten aus dem Twitter Stream auf. Wer also nicht mit Twitter oder RSS umgehen kann, aber ein Facebook-Profil hat, der kann dort auf dem Laufenden bleiben.
Einfach auf den “Gefällt mir” Knopf drücken und schon sprudeln die Updates auf eure Facebook-Seite.

Los los, ich kann noch ein Paar Fans brauchen, ist doch WM-Fieber und so 😉

Kleines Detail am Rand noch, das “Daumen hoch”-Symbol auf der Facebook-Seite ist übrigens ein base64-codierter CSS-Code-Schnippsel. Ich wollte das Bild eigentlich auf meinem eigenen Blog einbauen, hab statt dessen jetzt den CSS Abschnitt kopiert…


"Gefällt mir"
Allesblog#blog#css#facebook#Twitter