- © 2007 - 2010 [ webdesign.tepelmann.com ]
- für Enthusiasten »
- Validome |
- XHTML |
- CSS |
- WAI-AAA |
- Validator-AAA
- Sie haben die Webseite webdesign.tepelmann.com direkt aufgerufen oder es wurde kein Referer übergeben.
Um die Ladezeiten einer Webseite zu reduzieren, gibt es mehrere Möglichkeiten. Im Vorfeld einer Optimierung sollten Sie die Faktoren analysieren, die die Ladezeit beeinflussen. In der Regel ist dies, bei einer gängigen Webseite, die Menge der Daten die zwischen Server und Browser gesendet wird sowie die Zeit die der Server für die Bearbeitung benötigt. Ziel ist es also, die zu übermittelnden Datenmengen zu reduzieren und die Bearbeitungszeit des Servers zu optimieren.
Für die Ladezeit einer Webseite ist primär die Anzahl der zu ladenden Objekte verantwortlich, die Reduzierung der Datenmengen führt somit zu schnelleren Ladezeiten und weniger Server-Traffic.
Beim Laden einer Webseite, wird jedes im Quelltext ausgewiesene Objekt mit einem HTTP-Request vom Browser geladen. Dies erfordert also für jedes Bild, jede CSS-Datei und jede JavaScript-Datei einen separaten HTTP-Request des Browsers. Das Senden und Empfan- gen eines HTTP-Request benötigt Zeit, Ladezeit.
Ziel sollte daher sein, die Anzahl der zu ladenden Objekte zu reduzieren und Objekte die für den Seitenaufbau und die Funktionalität der aktuell aufgerufenen Webseite nicht erforderlich sind zu entfernen. Sollte es jedoch notwendig
sein unterschiedliche CSS-Dateien bzw. JavaScript-Dateien zu laden, ist es sinnvoll diese jeweils in nur einer Datei zusammenzufassen um die HTTP-Requests zu reduzieren.
Darüber hinaus wird für jede DNS-Abfrage eine nicht zu vernachlässigende Zeit benötigt, die Abfragen werden für eine bessere Performance zwar vom Browser gecached, jedoch nur für eine begrenzte Zeit. Entsprechend sollten auf der Startseite einer Webpräsenz keine Objekte von anderen Webseiten eingebunden werden.
Eine Quelltext-Optimierung ist letztlich eine Quelltext-Komprimierung − was häufig zu einer erheblichen Verringerung der Dateigröße führt und sich somit primär in schnelleren Ladezeiten und weniger Server-Traffic äußert.
Einen kleinen Einblick über den technischen Aufbau der einer Webseite hatten wir ja bereits im Thema Webdesign Optimierung angeführt.
Als Quelltext oder auch Quellcode bezeichnet man im World Wide Web den in einer Programmiersprache geschriebenen Text, welcher die Informationen enthält, die von einem Computer verarbeitet und durch einen Web-Browser auf dem Bildschirm für den Menschen als lesbare Webseite dargestellt werden kann.
Neben den vom Browser angezeigten Inhalten einer Webseite enthält der Quelltext zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben.
Der Quelltext kann in einem einfachen Text-Editor erstellt werden, allerdings kommen häufig WYSIWYG-Editoren, wie z.B. FrontPage, Fusion oder Namo Webeditor zum Einsatz. Diese Webeditoren vereinfachen zwar die Erstellung des Quelltextes, können jedoch keinen sauber strukturierten und standardkonformen Quelltext erstellen.
Um Webseiten mit einem sauber strukturierten und standardkonformen Quelltext zu erstellen müssen Sie HTML lernen und Ihre Seiten selbst in einem Text-Editor, wie beispielsweise notepad++, den HTML-Editor phase5 oder TextPad, schreiben.
Bereinigen Sie Ihren Quelltext von unnötigem Spaghetti-Markup und achten Sie auf eine fehlerfreie und standardkonforme Auszeichnung sowie eine logische Strukturierung. Achten Sie auf eine strickte Trennung von strukturiertem Inhalt und dem jeweiligen Layout.
Soll also heißen, dass Sie Überschriften nicht durch eine
einfache Schriftvergrößerung, sondern durch die ent- sprechenden HTML-Elemente <h1></h1> erzeugen. Dies gilt ebenso für Absätze <p></p>, Listen <ul><li></li></ul> sowie Hervorhebungen wie <strong></strong> und <em></em>.
Wobei alle Formatierungen der HTML-Elemente per CSS in einer externen Stylesheet-Datei erfolgen, die Sie im header des Quelltextes wie folgt einbinden.
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
Eventuell vorhandene Scripte lagern Sie in eine Externe Datei aus und binden diese möglichst am Ende des Quelltextes wie folgt ein.
<script src="script.js" type="text/javascript"></script>
Verwenden Sie keine Framesets, vermeiden Sie Tabellen sowie überflüssige div-Container und trennen Sie sich von überflüssigen Kommentaren.
Durch diese Maßnahmen werden Sie den Quelltext Ihrer Webseiten sehr viel schlanker und übersichtlicher gestallten. Und dies nicht nur für Sie, sondern auch für die Suchmaschinen.
Zu guter Letzt prüfen Sie den Quelltext Ihrer Webseiten auf Validität, denn Fehler in der Quelltext-Struktur führen nicht nur im Browser zu Darstellungsproblemen, sondern stellen auch für Suchmaschinen eine Hürde bei der Indizierung des Inhalts dar.
Um Bilder für die Webseite zu optimieren, gibt es heute zwar eine Vielzahl an Bildbearbeitungsprogrammen, die diese Option bereits beinhalten, jedoch darf man nicht erwarten mit einem Mausklick auf die Option "Optimieren", das Optimum zu erreichen. Eine gute Bildbearbeitungssoftware ist zwar sehr hilfreich, jedoch immer nur so gut wie deren Anwender.
Für alle die sich erstmals mit diesem Thema auseinandersetzen, noch ein Hinweis. Denken Sie daran vor jeder Bearbeitung unbedingt eine Sicherungskopie Ihrer Bilder anzulegen um Datenverlust zu vermeiden.
Die wichtigsten Formate, die eine qualitativ gute und trotzdem größenreduzierte Darstellung von Bildern im Web zulassen sind zweifelsfrei die Formate GIF, JPEG und PNG.
Das meist verwendet Format für weniger farbintensive Bilder ist das GIF-Format, da bei diesem die maximale Farbanzahl bei 256 Farben liegt.
Für die Darstellung von Logos, Buttons und Bannern ist das GIF-Format das geeignete. Bei den meisten Bildbearbeitungsprogrammen kann die Farbanzahl, mit der ein Bild als GIF gespeichert werden soll, vorgeben werden. Je weniger Farben ausgewählt werden, desto geringer ist die Dateigröße, und daraus resultierend auch die Ladezeit, des Bildes.
Der Vorteil des GIF-Format ist, dass transparente Bereiche dargestellt werden können. Es ist beispielsweise möglich einen Button so zu gestalten, dass dieser abgerundete Ecken erhält, ohne dieser Rundung eine Hintergrundfarbe zu zuweisen. Dieser Bereich muss im Bildbearbeitungsprogramm als transparent angegeben werden. Es ist somit möglich Bilder zu erstellen, die unabhängig von der Hintergrundfarbe oder vom verwendeten Hintergrundbild sind.
Das JPEG-Format wird verwendet, wenn Bilder mit größerer Farbbrillanz also beispielsweise Fotos oder Collagen in eine Webseite integriert werden sollen. Die maximale Farbanzahl des JPEG-Formats liegt bei über 16 Millionen Farben. Da die Bildgröße direkt proportional zur Farbanzahl und auch zur Bildqualität ist, gilt es hier einen Kompromiss zwischen Qualität und Bildgröße zu finden und eine, für die Anzeige des Bildes in der Webseite, optimale Farbanzahl zu wählen.
Des Weiteren ist die Dateigröße von Bildern die im JPEG-Format gespeichert werden, in der Regel deutlich größer, als die Dateigröße eines Bildes im GIF-Format.
Das PNG-Format wurde als Alternative zum GIF-Format entwickelt, welches bis 2004 mit Lizenzforderungen der Softwarefirma Unisys für den von GIF verwendeten LZW-Algorithmus belastet war.
Das PNG-Format eignet sich sowohl für Fotos wie auch für Grafiken und Schriften, es ermöglicht eine verlustfreie und meist kompaktere Komprimierung. Im Gegensatz zum GIF-Format unterstützt es eine Farbtiefe von 24-Bit.
PNG-Dateien können Transparenzinformationen enthalten, entweder in Form eines Alphakanals oder für jede Farbe der Farbpalette. Ein Alphakanal ist eine zusätzliche Information, die für jedes Pixel angibt, wie viel vom Hintergrund des Bildes durchscheinen soll. Das PNG-Format erlaubt somit, unabhängig vom Hintergrund die Kanten von Text und Bildern zu glätten.
Unabhängig von den drei oben genannten Grafikformaten gewinnt ein, bisher noch weitgehend unbekanntes Format an Bedeutung, SVG.
SVG ist ein XML-basiertes Dateiformat sodass SVG-Dateien mit Hilfe eines Texteditors bearbeitet werden können.
Darüber hinaus ist SVG ein vektorbasiertes Dateiformat, sodass die Daten nicht Pixel für Pixel, sondern in geometrischen Formen gespeichert werden. Was in der Regel zu einer geringeren Dateigröße führt. Darüber hinaus lassen sich SVG-Grafiken frei skalieren.
Das SVG-Format wurde 2001 vom W3C als Empfehlung veröffentlicht und ein Großteil des Sprachumfangs kann von den meistverwendeten Webbrowsern, mit Ausnahme des Internet Explorer, von Haus aus dargestellt werden. Beim Internet Explorer ist die Darstellung durch ein Plug-in wie den SVG-Viewer von Adobe möglich.
Unter Zuhilfenahme von PHP und der gzip-Kompression können Sie den HTML-Quelltext komprimieren, sodass alle Daten gezipped übermittelt werden was somit die Ladezeit der Webseiten verringert.
Um die Komprimierung der Daten per gzip-Kompression zu aktivieren haben Sie zwei Möglichkeiten.
Die Erste Möglichkeit:
Sie speichern die folgende Anweisung in einer .htaccess Datei:
php_flag zlib.output_compression on
Dieser Eintrag veranlasst den Server Daten per gzip-Kompression an den Client(Browser) zu senden.
Die Zweite Möglichkeit:
Sie fügen am Anfang jeder PHP-Datei folgenden Code ein:
<?php
ob_start( 'ob_gzhandler');
?>
Selbstverständlich können Sie dies auch in einer Funktion speichern und per include() oder require() in die Datei inkludieren.
Beim Aufruf Ihrer Webseite wird der komprimierte Quelltext an den Browser übermittelt und muss von diesem wieder extrahiert werden. Diese Technik wird heute von allen neueren Browsern unterstützt. Um jedoch die Benutz- barkeit unserer Webseite sicherzustellen, empfiehlt es sich dies Kompatibilität zu überprüfen.
Über den HTTP_ACCEPT_ENCODING-Header teilt uns der Browser mit, was er akzeptiert, sodass man diesen auslesen und wie folgt auf die gzip-Kompatibilität prüfen kann.
if( strpos( @getenv ("HTTP_ACCEPT_ENCODING"),"gzip") !== FALSE)
{
ob_start("ob_gzhandler");
}
Der Test zeigt, dass der von Ihnen genutzte
CCBot/1.0 (+http://www.commoncrawl.org/bot.html) gzip-Kompression akzeptiert.
Wie beim HTML Quelltext lassen sich auch CSS-Dateien per gzip komprimieren. Eine weitere Möglichkeit ist die Verwendung so genannter CSS Optimizer, die eine CSS-Datei auf ihr Minimum reduzieren können.
Grundvoraussetzung für die gzip-Komprimierung ist, dass das CSS-Stylesheet in eine externe Datei ausgelagert wurde. Damit die CSS-Datei styles.css vom PHP-Parser
erkannt und bearbeitet wird, muss ihr Datei-Endung .php angehängt werden.
<?php
if( strpos( @getenv ("HTTP_ACCEPT_ENCODING"),"gzip") !== FALSE)
{
header("Content-type: text/css");
ob_start("ob_gzhandler");
}
?>
Eine Weitere Möglichkeit die Größe einer CSS-Datei zu reduzieren, ergibt sich durch das entfernen aller unnötigen Zeichen und Kommentare.
Sie können dies auf zweierlei Arten erreichen, zum einen können Sie sich so genannter CSS Optimizer bedienen. Diese reduzieren eine CSS-Datei unter anderem durch Löschen aller Zeilenumbrüche und löschen des letzten
Semikolons einer Regel sowie die Zusammenfassung von Anweisungen wie padding-top und padding-bottom.
Das Problem dieser CSS-Komprimierung ist der Verlust der Leserlichkeit. Eine Wartung bzw. Erweiterung so komprimierter CSS-Dateien ist somit kaum noch möglich. Es empfiehlt sich auf jeden Fall Kopien der Original-Dateien anzulegen.
<?php
header("Content-type: text/css");
// Pufferung von Ausgaben
// diese Funktion ruft mit einem callback die Funktion cleaning auf
ob_start("cleaning");
// Diese Funktion entfernt alle Kommentare, Tabs, Leerzeichen und Zeilenumbrüche
function cleaning($superfluous)
{
// Kommentare entfernen
$superfluous = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $superfluous);
// Tabs, Leerzeichen und Zeilenumbrüche entfernen
$superfluous = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $superfluous);
return $superfluous;
}
?>
Hier den Inhalt der CSS-Datei einfügen!
<?php
// Leert den Ausgabe-Puffer und deaktiviert die Ausgabe-Pufferung
ob_end_flush();
?>
Vorteil dieser Variante, die CSS-Datei bleibt leserlich und kann problemlos gewartet und gegebenenfalls auch erweitert werden.
JavaScript-Dateien lassen sich unter Verwendung so genannter JavaScript-Compressoren auf ein Minimum reduzieren.
Auch JavaScript-Dateien lassen sich komprimieren. Bei der Komprimierung von JavaScript-Dateien werden Leerzeichen, Zeilenumbrüche und Kommentare entfernt. Funktionsnamen und Variablen erhalten eine ID und diese werden am Ende der Datei wieder mit den Ausdrücken zugewiesen.
Da 2 bis 3stellige ID´s weniger Speicherplatz benötigen als lange Variablen- oder Funktionsnamen führt dies zu einer geringeren Dateigröße, und somit auch zu einer geringeren Ladezeit. Problematisch ist jedoch, dass die Datei für den Benutzer kaum noch zu lesen ist und eine Bearbeitung somit äußert schwierig macht.
Die Umsetzung von suchmaschinen- optimierenden Maßnahmen setzt auf eine strickte Trennung von strukturier- tem Inhalt und dem jeweiligen Layout.
Der wohl wichtigste Aspekt für ein erfolgreiches Webdesign. Die Struktur einer Website ist die grundlegende Voraussetzung.
Das Optische Design ist, was dem Besucher als erstes ins Auge sticht und was auch die meisten unter dem Begriff Webdesign verstehen.
Textaufbereitung? Die Texteinhalte der Webseiten werden meist weniger gelesen, als überflogen. Entsprech- end müssen Texte für das Web angepasst und aufbereitet werden.
Sobald es um mehr als das Dar- stellen von Texten und Bildern geht, muss man sich mit der Benutzer- schnittstelle befassen.
Duplicate Content wurde maßgeblich dafür verantwortlich gemacht, das Ranking einer Webseite negativ zu beeinflussen.
Die klassische Art des externen Linkaufbaus besteht darin, Themen relevante Linkpartner zu finden.
Wenn es darum geht die eigene Website bekannt zu machen spielen Webkataloge eine große Rolle.
Mit der Veröffentlichung einer Presse- meldungen in einem Presseportal können Sie gezielt Backlinks generie- ren.
Social Bookmarks sind die Backlinks der Zukunft, da deren Relevanz für Suchmaschinen weiter zunimmt.
Für die Ladezeit einer Webseite ist primär die Anzahl der zu ladenden Ob- jekte verantwortlich, eine Reduzierung führt somit zu schnelleren Ladezeiten.
Eine Ladezeit-Optimierung des Quell- textes durch dessen Komprimierung, äußert sich somit primär in schnel- leren Ladezeiten und weniger Server-Traffic.
Eine gute Bildbearbeitungssoftware ist zwar sehr hilfreich, jedoch immer nur so gut wie deren Anwender.
Eine Ladezeit-Optimierung durch Komprimierung des HTML Quelltext via PHP und Komprimierung der CSS- & JavaScript-Dateien.