Es gibt viele Ansätze, um den Code zu optimieren. Dieser Ansatz hat sich mit dem Voranschreiten der mobilen Geräte entwickelt, da EDGE und HSDPA/3G teilweise zu langsam sind, um große und anspruchsvolle Webprojekte in einer angenehmen Zeit laden zu können. Die durchschnittliche Wartezeit, welche von einem Internetnutzer geduldet wird liegt zwischen 2 und 3 Sekunden – diese Hürde schaffen mobile Endgeräte meistens nicht. Dadurch wird das Surfen unattraktiv. Die große Anzahl an Bits werden durch die heutigen Möglichkeiten erzeugt. Smartphones haben i.d.R. starke Prozessoren, aber das Surfen bringt nur in Ballungsgebieten oder mit W-Lan wirklich Spaß. Aus diesem Grund ist es möglich den Quelltext an einigen Stellen zu optimieren, um einige Millisekunden zu sparen.
Ich zeige hier einige kleine Ansätze auf, um dem Payload zu minimieren – es gibt sicherlich noch mehr.
Whitepaces entfernen
In jeder *.php, *.js, *.css und *.html Datei befinden sich viele unnötige Whitespaces, welche Bit’s belegen. Whitespaces sind Leerzeichen im Quelltext – diese gelten nach dem ASCII – Code als echtes Zeichen.
Unser Ziel ist es, dieses Bruchstück Code zu optimieren:
h1 {
¶¶¶¶font-size:¶28pt;¶
¶¶¶¶letter-spacing:¶12px;¶
¶¶¶¶border-bottom:¶1px solid #ddd;¶
¶¶¶¶padding-bottom:¶10px;
¶¶¶¶margin:¶0;
}
Durch ¶ habe ich Leerzeichen verdeutlicht, welche im folgenden korrigiert werden:
h1{font-size:28pt;letter-spacing:12px;border-bottom:1px solid #ddd;padding-bottom:10px;margin:0}
Für CSS gibt es einen speziellen Code-Compresser, welcher diese Arbeit erledigt: http://www.csscompressor.com/
CSS/JS gehören ausgelagert!
Die Zeiten von Inline-CSS und Inline-JS sind vorbei, denn diese belasten nur und können schlechter vom jeweiligen Browser gecached werden. Für “guten” Code ist es wichtig, dass die JS – Methoden und CSS-Klassen in ein externes Dokument ausgelagert werden. Dafür legt man im root – Verzeichnis einfach Ordner: /js und /styles an für die ausgelagerten Dokumente. Diese können nun vom Browser und/oder Proxy besser gecached werden und dir eigentliche Quelltext ist nicht mehr irre lang. Das gute an JavaScript ist, dass man strikt nach dem Lokalisierungsprinzip anwenden kann, d.h. Methoden nur an einer Stelle schreiben und diese immer wieder aufzurufen.
Des Weiteren müssen diese Dokumente dann natürlich aufgerufen werden, jedoch ist zu beachten, dass *.css vor *.js eingebunden wird, denn falls der Browser JavaScript “verbietet”, dann kann es zu Problemen mit weiteren Laden der Website kommen.
CSS minimieren
Dise Aufsplittung bringt wieder Zeilenumbrüche und somit weiter Bytes mit sich.
h2.subtitle {
margin-top: 0px;
margin-bottom: 40px;
padding-top: 10px;
}
Bei einer 0 kann man generell immer das ” px ” weglassen. Außerdem braucht man nicht für jeden margin Teil eine eigene Zeile eröffnen, sondern es reicht die Zahlen in richtiger Reihenfolge aufzuschreiben.
h2.subtitle{margin-top:0 40px;padding-top:10px}
Tool für JavaScript
JavaScript ist nicht ganz so einfach zu optimieren. Deshalb empfehle ich hier einige Tools für die Minimierung:
Den gewünschten Quelltext in diese Tools einfügen und dann minimieren lassen. Diese entfernen i.d.R. auch nur Leerzeichen und editieren teilweise Schlüsselwörter, welche kürzer gefasst werden können.
HTML Link Struktur
Es ist heutzutage nicht mehr nötig in jedem href=” einen absoluten Link zu verwenden, denn dieser reserviert wieder Bytes und erhöht den Payload des Requests.
Völlig ausreichend ist folgender relativer Link:
Impressum
Sorry, the comment form is closed at this time.