Tag Archives: HTML

html_order_3

“gzip” für Webseiten

Um das Verhalten von “gzip / deflate” besser zu verstehen, möchte ich als erstes ganz kurz auf den Algorithmus hinter der Komprimierung eingehe. Dafür muss man zumindest zwei Grundlegende Theorien verstehen. Zum einen die sogenannte Huffman-Kodierung, dabei geht darum Text mit möglichst wenig Bits (0 || 1) zu übersetzten.

Es folgt ein einfaches Beispiel:

String: “im westen nichts neues”

Die Länge des Strings beträgt 22 Zeichen, was bei einem 4-Bit-Code (0000, 0001 …) eine Anzahl von 22 * 4 Bit = 88 Bit ergeben würde.

Berücksichtigt man jedoch die Häufigkeit der wiederkehrenden Zeichen, kann man für bestimmte Zeichen, welche oft im String vorkommen, kürze Bit-Codes nutzen.

huff1

Als erstes Zählen wir die Anzahl der vorkommenden Zeichen. Die Zeichen welche die geringste Häufigkeit aufweisen werden anschließend als erstes miteinander Verknüpft und jeweils addiert.

huff4

Wie man bereits erkennt bekommen die Zeichen welche nicht so häufig auftreten längere Strecken und somit gleich auch längere Bit-Codes.

huff7

Wenn man alle Zweige verknüpft hat, entsteht daraus dann ein Binär-Baum, welcher von oben nach unten gelesen wird.

Die eindeutigen Bit-Codes sind nun z.B.: 00 für e, 100 für n, 1011 für t und so weiter. Nun benötigen wir nur noch 73 Bit anstatt 88 Bit, um den String binär darzustellen. ;)

Das zweite Prinzip hat auch mit Wiederholung von Zeichen zu tun. Die sogenannte “LZ77″ Kompression, welche wiederkehrende Muster in Strings erkennt und durch Referenzen von vorherigen Strings ersetzt.

Es Folgt ein einfaches Beispiel:

String: “Blah blah blah blah blah!”

 vvvvv     vvvvv     vvv
Blah blah blah blah blah!
      ^^^^^     ^^^^^

Wenn man nun die Wiederholung durch durch eine Referenz angibt, welche aus der Länge des Wortes (” blah” = 5) und Länge der Wiederholungen. (“lah blah blah blah” = 18). Daraus ergibt sich anschließend der folgende komprimierte Text.

Blah b(5,18)!

… aber nun endlich zum praktischen Teil! Es folgen ein paar Beispiele und Überlegungen im Zusammenhang mit Webseiten / Webservern.

1.) “gzip”, ABER weniger ist manchmal mehr

Bei kleinen Webseiten und schwachen V-Servern kann es vorkommen, dass die serverseitige Komprimierung im Gesamtkontext keinen Geschwindigkeitsvorteil bietet, da die Komprimierung ggf. mehr Overhead (Payload, CPU-Rechenzeit, Verzögerung der Auslieferung) mit sich bringt als es Vorteile (geringere Dateigröße) bietet. Zumal viele Dateien (Bilder, CSS, JS) nach dem ersten Seitenaufruf im Cache sind und nicht wieder vom Server ausgeliefert werden müssen. Gerade für mobile Geräte macht die Komprimierung jedoch fast immer Sinn, daher würde ich die Komprimierung immer aktivieren!

PS: hier noch ein Blog-Post zum Thema Webseiten Beschleunigen

moelleken_org-gzip
mit gzip
moelleken_org-nogzip
ohne gzip

GRÜN = Download
GELB = Wartet
BLAU = Verbindung zum / vom Server

Bei “nginx” gibt es zudem ein Modul (HttpGzipStaticModule) welches direkt vorkomprimierte Dateien ausliefert, anstatt diese bei Anfrage zu komprimieren. Jedoch muss man bisher selber dafür sorgen, dass eine entsprechende Datei mit dem selben Timestamp vorhanden ist. (z.B.: main.css & main.css.gz) Falls jemand hier eine Alternative oder ein einfaches Script zum erstellen der zu komprimierenden Dateien hat, meldet euch bitte bei mir oder einfach in den Kommentaren.

2.) “gzip”, ABER nicht für alles

Zunächst sollte man bereits komprimierte Dateien (z.B. JPEG, PNG, zip etc.) nicht noch zusätzlich via „gzip“ ausliefern, da die Dateigröße im schlimmsten Fall noch steigen kann oder zumindest wird für sehr wenig Dateigröße, sehr viel CPU-Zeit auf der Server (Komprimierung) und auf dem Client (Dekomprimierung) verbraucht.

gzip_images

Ich empfehle an dieser Stelle mal wieder die “.htaccess“-Datei vom HTML5-Boilerplate, welche bereits viele Einstellungen für den Apache-Webserver liefert. Außerdem gibt es dort auch eine optimierte Konfiguration “nginx.conf” für den nginx-Webserver.

3.) “gzip”, ABER nicht immer

Die “gzip”-Komprimierung kann Ihre Stärken bei größeren Dateien viel besser ausspielen, da wir ja bereits im theoretischen Teil gelernt haben, dass die Komprimierung auf Wiederholungen aufbaut und wenn wenig wiederkehrende Zeichen und Muster vorhanden sind lässt es sich schlecht komprimieren.

Beim “nginx”-Webserver kann man die minimale zu bearbeitende Dateigröße angeben, sodass eine 6 Byte große Datei mit dem Inhalt “foobar” bei schwacher „gzip“ nicht auf 40 Byte vergrößert wird.

gzip_small_file

4.) “gzip”, ABER nicht so hoch

Zudem sollte man nicht mit der höchsten Komprimierungsstufe komprimieren, da man pro Komprimierungsstufe immer weniger Erfolg bei immer mehr CPU-Zeit bekommt. Man sollte weniger stark komprimieren und dadurch Rechenleistung /-zeit einsparen, um die Webseite schneller ausliefern zu können.

gzip_level

test2_1.js.gz (schwache Komprimierung)
test2_2.js.gz (normale Komprimierung)
test2_3.js.gz (starke Komprimierung)

5.) „gzip“ + Minifizierung

Durch Minifizierung von CSS und JS kann man die Dateigröße ebenfalls reduzieren, auch wenn man nicht an die Dateigröße von komprimierten Dateien herankommt, außerdem sinkt der Erfolg der Komprimierung, da wir durch die Minifizierung bereits einige Wiederholungen minimiert haben.

Es folgt ein Beispiel mit „jquery.js / jquery.min.js“:

Zustand

Größe der Datei

gewonnene Größe durch die Komprimierung

nicht minifiziert + nicht komprimiert Datei

250 kB (¼ MB)

-

nicht minifiziert + schnelle Komprimierung

76,3 kB

173,7 kB

nicht minifiziert + normale Komprimierung

68,3 kB

181,7 kB

nicht minifiziert + hohe Komprimierung

68 kB

182 kB

minifiziert + nicht komprimiert Datei

82,3 kB

-

minifiziert + schnelle Komprimierung

30,8 kB

51,5 kB

6.) “gzip” + Komprimierung verbessern

Im Gegensatz zur Programmierung, wo man Wiederholungen vermeidet, sollte man im Frontend (HTML, CSS) gezielt Wiederholungen nutzen, um die Komprimierung zu optimieren. So zeigt  das folgende Beispiel wie man die Dateigröße durch die korrekte Positionierung von Attributen der HTML-Tags verbessern kann.

Zwei Dateien mit dem selben Dateigröße, nur die Reihenfolge der Attribute in der zweiten HTML-Dateien (“test1_2.html”) wurden nicht in der selben Reihenfolge angegeben.

html_order_3
test1_1.html
html_order_2
test1_2.html

html_order

Wie man in dem Bild erkennen kann, haben wir die Dateigröße der HTML-Datei um zirka 10% reduziert indem wir den Komprimierungsalgorithmus  bei der Arbeit unterstützen. ;)

Videos:

 

Blogblume - Januar 2011

Blogblume V3.0

Naja eigentlich ist es für mich meine erste Blogblume daher V1.0. In der Blogparade auf “blogblume.de” geht es darum, eine “Blume zu pflanzen” (mithilfe von HTML Graph) aber noch schönes als das Bild das an Ende dabei herauskommt, ist der Aufbau dieser “Blume”, daher einfach selber ausprobieren… :-)


Blogblume - Januar 2011
Blogblume - Januar 2011


Webseite -> Blume


  • blue: für links (der A tag)
  • red: für Tabellen (TABLE, TR and TD tags)
  • green: für den DIV tag
  • violet: für Bilder (der IMG tag)
  • yellow: für Formulare (FORM, INPUT, TEXTAREA, SELECT und OPTION tags)
  • orange: für Zeilenumbrüche und Zitatblöcke (BR, P, und BLOCKQUOTE tags)
  • black: der HTML tag, das root node
  • gray: alle anderen tags
google-chrome

Überblick: Google – Chrome

“Google Chrome ist ein Webbrowser, der von Google Inc. entwickelt wird und seit dem 2. September 2008 verfügbar ist. Am 11. Dezember 2008 erschien die erste finale Version. Zentrales Konzept ist die Aufteilung des Browsers in optisch und aufProzessebene getrennte Browser-Tabs.” – Wiki


1.) Versionsgeschichte von Google Chrome (Quelle: Wiki)

Legende: Alte Version Aktuelle Version Aktuelle Vorabversion Zukünftige Version
Webkit-
Version

JS-Version

(V8)

Version Veröffentlichung Anmerkungen und wichtige Änderungen
522 0.3 0.2 2. September 2008 erste Veröffentlichung als Beta-Version für Windows
0.3 29. Oktober 2008 Verbesserte Pluginstabilität
525 0.4 24. November 2008 Lesezeichenmanager mit Export und Import, Datenschutzabschnitt in den Optionen, Sicherheitsupdates
528 1.0 11. Dezember 2008 erste stabile Version.
530 0.4 2.0 24. Mai 2009 Vollbild (F11), 35% schnelleres JavaScript beim SunSpider Benchmark Test, Unterstützung vom Mausrad
532 1.2 3.0 15. September 2009 Neue „Neuer Tab“-Seite, bis zu 25% schnelleres JavaScript, Unterstützung des HTML5-video-und-audio-Tags, Themes.
532.5 1.3 4.0 25. Januar 2010 Erweiterungen, native Unterstützung für Greasemonkey-Scripte, Lesezeichensynchronisierung, verbesserte Entwicklerwerkzeuge, verbesserte HTML5-Unterstützung[20]
4.1 17. März 2010 Integration des Google-Übersetzers und erweiterte Content-Einstellungen[21]
533 2.1 5.0 25. Mai 2010 Erste offizielle Version für Linux und Mac; bis zu 30% schnelleres JavaScript, Zoom-Einstellungen werden pro Seite gespeichert; verbesserte Unterstützung von HTML 5; Lesezeichenmanager als Tab, Synchronisierung von Browser-Einstellungen[22] integriertes Flash-Plugin
534 2.2 6.0 2. September 2010 Überarbeitetes Design der Omnibox (Adresszeile), bis zu 15% schnelleres JavaScript, Integration der Autofill-Funktion, Synchronisierung von Erweiterungen und Autofill, Unterstützung für das WebM-Format[23]
534 2.3 7.0 19. Oktober 2010 Verbesserte Unterstützung von HTML5, schnelleres JavaScript, Unterstützung des File-API, Behebung hunderter Bugs, erleichtertes Blockieren von Cookies
534 2.4 8.0 Dezember 2010 Hardwarebeschleunigung durch Grafikkarte, Instant-Suche, verbesserte HTML5-Unterstützung, “about:flags” zum Aktivieren von Vorabfunktionen, integrierter PDF-Betrachter[24]
534 2.4 9.0 2010/2011 Print Preview (Vorabfunktion; ist standardmäßig deaktiviert)


2.) Tastenkombination:

Tastenkombination Funktion
Strg + T Tab öffnen
Strg + 1…8 Tab 1/…/8 aufrufen
Strg + Tab Durchschalten der Tabs
Strg + Umschalt + T Geschlossen Tab zurückholen
Strg + B Bookmarks ein-/ausblenden
Strg + H Verlauf anzeigen
Strg + J Downloadseite aufrufen
Umschalt + Esc Task-Manager aufrufen
Strg + F Suchen

weitere Tastenkombis für Chrome:

Unterscheidung: Win, MAC, Linux

-> http://www.google.com/support/chrome/bin/static.py?page=guide.cs&guide=25799&topic=28650


3.) Design (Theme) für Chrome

Wer ein neues Design (Theme) für Chrome sucht wird hier fündig:

-> https://tools.google.com/chrome/intl/de/themes/index.html


4.) WebInspector – Webseiten live ändern

Mit dem standardmäßig installiertem WebInspector kann man den Quell-Code einer Webseite ändern und diese Änderung auch direkt ansehen. Einfach einen bestimmten -> Bereich markieren -> rechte Maustaste -> “Element untersuchen”

http://trac.webkit.org/wiki/WebInspector


5.) Erweiterungen nachinstallieren

-> http://code.google.com/chrome/extensions/


5.1.) Xmarks Bookmark and Password Sync: (Synchronisiert auch zwischen verschiedenen Browsern, ggf. danach wieder deinstallieren)

https://chrome.google.com/extensions/detail/ajpgkpeckebdhofmmjfgcjjiiejpodla

5.2.) Erweiterung “RSS-Abonnement” (von Google):

https://chrome.google.com/extensions/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd

5.3.) HTML Validator:

https://chrome.google.com/extensions/detail/cgndfbhngibokieehnjhbjkkhbfmhojo

5.4.) Firebug Lite for Google Chrome:

https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench



6.) neue Funktionen freischalten

In der Vorherigen Tabelle findet man bereits einige Funktionen, (interner PDF-Betrachter (+ Sandbox), Hardwarebeschleunigung …) um diese nutzen zu können muss man jedoch folgende Schritte befolgen:


6.1.) Vorabversion verwenden:

Natürlich läuft eine Stable-Version ggf. stabiler und eine Dev-Version noch unstabiler wie eine Beta, jedoch hatte ich bisher keine Probleme mit der Dev-Version. :-)


Windows:

MAC:

Linux:


Quelle: dev.chromium.org/getting-involved/dev-channel


6.2.) ggf. Plugins deaktivieren

Ich habe nun andere PDF-Reader deaktiviert…

about:plugins


6.3.) ggf. experimentelle Funktionen freischalten

about:flags


6.4.) ggf. nachschauen mit welchen Parametern Chrome nun gestartet wurde

about:version


HTML-Umlaute korrigieren

Mit dem folgendem Befehl kann man in allen “html”-Dokumente, im aktuellen Verzeichnis (+ Unterverzeichnissen) die HTML-Umlaute korrigieren lassen.

find . -iname "*.html" -exec sed -i 's/[äöüÄÜÖ]/\&¨/g;y/äöüÄÖÜ/aouAOU/;' {} \;
find . -iname "*.html" -exec sed -i 's/ß/\&szlig\;/g' {} \;

weiter “find”-Beispiele findest du hier:
suckup.de/linux/find-linux/

HTML5 – YouTube ohne Flash Player

Die HTML5 Implementierung kommt voran, so unterstützt YouTube nun die Funkion ohne den Flash Player Videos abzuspielen, jedoch leider nur über den proprietäre H.264 Video-Codec.

Momentan unterstützen nur wenige Browser, sowohl den Video-Tag in HTML5 und den H.264 Video-Codec. Dazu gehören:

– Google Chrome
– Apple Safari (ab Version 4 +)
– Microsoft Internet Explorer (+ Chrome Frame)

Um HTML5 auf YouTube zu benutzen, müsst du einen der erwähnten Browser installieren, folgende Seite besuchen und dem Experiment zustimme. Nun kannst du die

www.youtube.com/html5