. .

Ihre Homepage • Ladezeiten optimiert

Methoden der Ladezeiten-Optimierung

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.


Optimierung der Ladezeit durch Reduzierung der Datenmengen

Reduzierung der zu ladenden Objekte

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 HTTPInformationBedeutung: HTTPHypertext Transfer Protocol deutsch: Hypertext-Übertragungsprotokoll; Protokoll zur Übertragung von Daten über ein Netzwerk; Um Webseiten und andere Daten aus dem World Wide Web in einen Browser zu laden.-Request vom Browser geladen. Dies erfordert also für jedes Bild, jede CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Datei und jede JavaScriptInformationBedeutung: JavaScriptJavaScript eine Skriptsprache, hauptsächlich für dynamische Webseiten eingesetzt-Datei einen separaten HTTPInformationBedeutung: HTTPHypertext Transfer Protocol deutsch: Hypertext-Übertragungsprotokoll; Protokoll zur Übertragung von Daten über ein Netzwerk; Um Webseiten und andere Daten aus dem World Wide Web in einen Browser zu laden.-Request des Browsers. Das Senden und Empfan- gen eines HTTPInformationBedeutung: HTTPHypertext Transfer Protocol deutsch: Hypertext-Übertragungsprotokoll; Protokoll zur Übertragung von Daten über ein Netzwerk; Um Webseiten und andere Daten aus dem World Wide Web in einen Browser zu laden.-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 CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Dateien bzw. JavaScriptInformationBedeutung: JavaScriptJavaScript eine Skriptsprache, hauptsächlich für dynamische Webseiten eingesetzt-Dateien zu laden, ist es sinnvoll diese jeweils in nur einer Datei zusammenzufassen um die HTTPInformationBedeutung: HTTPHypertext Transfer Protocol deutsch: Hypertext-Übertragungsprotokoll; Protokoll zur Übertragung von Daten über ein Netzwerk; Um Webseiten und andere Daten aus dem World Wide Web in einen Browser zu laden.-Requests zu reduzieren.

Darüber hinaus wird für jede DNSInformationBedeutung: DNSDomain Name System-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.


Optimierung der Ladezeit durch Quelltext-Optimierung

Optimierung des Quelltextes

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 Interner Link zum Thema: Technischer Aufbau!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 WYSIWYGInformationBedeutung: WYSIWYG„What You See Is What You Get“ - deutsch: „Was du siehst, ist, was du bekommst“-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 HTMLInformationBedeutung: HTMLHypertext Markup Language, dt. Hypertext-Auszeichnungssprache lernen und Ihre Seiten selbst in einem Text-Editor, wie beispielsweise Externer Link zu: www.textpad.comTextPad, Externer Link zu: notepad-plus.sourceforge.netnotepad++ oder den Externer Link zu: www.phase5.infoHTML-Editor phase5 schreiben.

Bereinigen Sie Ihren Quelltext von unnötigem Spaghetti-MarkupInformationBedeutung: Spaghetti-MarkupSpaghetti-Markup: ein bildhafter Ausdruck für ein Programm, in dem, durch beispielsweise zahlreiche verschachtelte Sprunganweisungen, der Programmablauf schwer nachzuvollziehen ist. Wie bei einem Berg Spaghetti, bei dem es sehr schwer ist heraus zu finden, welche Nudelenden zusammen gehören. und achten Sie auf eine fehlerfreie und standardkonforme Auszeichnung sowie eine logische Strukturierung. Achten Sie auf eine strikte 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 HTMLInformationBedeutung: HTMLHypertext Markup Language, dt. Hypertext-Auszeichnungssprache-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 HTMLInformationBedeutung: HTMLHypertext Markup Language, dt. Hypertext-Auszeichnungssprache-Elemente per CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente 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.


Optimierung der Ladezeit durch Bildbearbeitung

Optimierung von Grafiken

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 GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format, JPEGInformationBedeutung: JPEGJPEG File Interchange Format, Grafikformat zur Speicherung von Bildern, die nach der JPEG-Norm komprimiert wurden und PNGInformationBedeutung: PNGPortable Network Graphics, deutsch: portable Netzwerkgrafiken.

Das meist verwendet Format für weniger farbintensive Bilder ist das GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-Format, da bei diesem die maximale Farbanzahl bei 256 Farben liegt.

Für die Darstellung von Logos, Buttons und Bannern ist das GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-Format das geeignete. Bei den meisten Bildbearbeitungsprogrammen kann die Farbanzahl, mit der ein Bild als GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format 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 GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-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 JPEGInformationBedeutung: JPEGJPEG File Interchange Format, Grafikformat zur Speicherung von Bildern, die nach der JPEG-Norm komprimiert wurden-Format wird verwendet, wenn Bilder mit größerer Farbbrillanz also beispielsweise Fotos oder Collagen in eine Webseite integriert werden sollen. Die maximale Farbanzahl des JPEGInformationBedeutung: JPEGJPEG File Interchange Format, Grafikformat zur Speicherung von Bildern, die nach der JPEG-Norm komprimiert wurden-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 JPEGInformationBedeutung: JPEGJPEG File Interchange Format, Grafikformat zur Speicherung von Bildern, die nach der JPEG-Norm komprimiert wurden-Format gespeichert werden, in der Regel deutlich größer, als die Dateigröße eines Bildes im GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-Format.

Das PNGInformationBedeutung: PNGPortable Network Graphics, deutsch: portable Netzwerkgrafiken-Format wurde als Alternative zum GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-Format entwickelt, welches bis 2004 mit Lizenzforderungen der Softwarefirma Unisys für den von GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format verwendeten LZW-Algorithmus belastet war.

Das PNGInformationBedeutung: PNGPortable Network Graphics, deutsch: portable Netzwerkgrafiken-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 GIFInformationBedeutung: GIFGraphics Interchange Format, deutsch: Grafikaustausch-Format-Format unterstützt es eine Farbtiefe von 24-Bit.

PNGInformationBedeutung: PNGPortable Network Graphics, deutsch: portable Netzwerkgrafiken-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 PNGInformationBedeutung: PNGPortable Network Graphics, deutsch: portable Netzwerkgrafiken-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, SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken.

SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken ist ein XMLInformationBedeutung: XMLExtensible Markup Language, deutsch: erweiterbare Auszeichnungssprache-basiertes Dateiformat sodass SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken-Dateien mit Hilfe eines Texteditors bearbeitet werden können.

Darüber hinaus ist SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken 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 SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken-Grafiken frei skalieren.

Das SVGInformationBedeutung: SVGScalable Vector Graphics, deutsch: Skalierbare Vektorgrafiken-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.

Ihr Browser kann das Objekt leider nicht anzeigen!

Und auch dies ist eine SVG Grafik

Ihr Browser kann das Objekt leider nicht anzeigen!

Während Firefox, Safari und Opera die SVG-Grafiken schon seit längerem unterstützen, ignoriert Microsofts Internet Explorer bislang auch diesen W3C-Standard. Adobe hatte bereits 2005, kurz nach der Veröffentlichung des W3C-Standards ein SVG-Plugin angeboten, den Download - Adobe SVG ViewerAdobe SVG Viewer. Leider hat Adobe, die Unterstützung für den Adobe SVG Viewer zum 1. Januar 2009 eingestellt.


Optimierung der Ladezeit durch Komprimierung

Optimierung via Komprimierung


HTML Quelltext via PHP komprimieren

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 gzipInformationBedeutung: gzipgzip ist ein Kompressionsprogramm-Kompression zu aktivieren haben Sie zwei Möglichkeiten.

Die Erste Möglichkeit:
Sie speichern die folgende Anweisung in einer .htaccess - Server-Konfiguration.htaccess-Datei:

php_flag zlib.output_compression on

Dieser Eintrag veranlasst den Server Daten per gzipInformationBedeutung: gzipgzip ist ein Kompressionsprogramm-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 gzipInformationBedeutung: gzipgzip ist ein Kompressionsprogramm-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
OTHER 0 gzip-Kompression akzeptiert.

CSS-Dateien komprimieren

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 gzipInformationBedeutung: gzipgzip ist ein Kompressionsprogramm-Komprimierung ist, dass das CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Stylesheet in eine externe Datei ausgelagert wurde. Damit die CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Datei styles.css vom PHP-Parser

erkannt und bearbeitet wird, muss ihr Datei-Endung .php angehängt werden.

An den Anfang der CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Datei, Namens styles.css.php fügen Sie folgenden Code ein:
<?php header("Content-type: text/css");
if( strpos( @getenv ("HTTP_ACCEPT_ENCODING"),"gzip") !== FALSE)
{
ob_start("ob_gzhandler");
}
?>

Eine weitere Möglichkeit die Größe einer CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-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 CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente Optimizer bedienen. Diese reduzieren eine CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Datei unter anderem durch Löschen aller Zeilenumbrüche und Leerzeilen, löschen

des letzten Semikolons sowie der Zusammenfassung von Anweisungen wie padding-top und padding-bottom.

Das Problem dieser CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Komprimierung ist der Verlust der Leserlichkeit. Eine Wartung bzw. Erweiterung so komprimierter CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Dateien ist somit kaum noch möglich. Es empfiehlt sich auf jeden Fall Kopien der Original-Dateien anzulegen.

Um dieses Problem zu vermeiden, favorisiere ich die zweite und temporäre Variante.
<?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", "\s",), "", $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 CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Datei bleibt leserlich und kann problemlos gewartet und gegebenenfalls auch erweitert werden.

JavaScript-Dateien komprimieren

Neben der bereits im obigen Beispiel genannten temporären Variante via php, die selbstverständlich auch für JavaScript-Dateien genutz werden kann, lassen sich JavaScript-Dateien unter Verwendung so genannter JavaScript-Compressoren auf ein Minimum reduzieren.

Auch JavaScriptInformationBedeutung: JavaScriptJavaScript eine Skriptsprache, hauptsächlich für dynamische Webseiten eingesetzt-Dateien lassen sich komprimieren. Bei der Komprimierung von JavaScriptInformationBedeutung: JavaScriptJavaScript eine Skriptsprache, hauptsächlich für dynamische Webseiten eingesetzt-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.



Linkempfehlungen

Verweise & Links

HTML Quelltext Validatoren

CSS Validator

Link Validator

Doppelten Content finden

Bildbearbeitungsprogramme

skalierbare Vektorgrafiken

CSS Optimizer

JavaScript & CSS Optimizer


» zum Seitenanfang

PageSpeed-Optimierung

mehr zum Thema: Browser-CachingLeverage browser caching

Für statische Ressourcen der Webseite, wie Grafiken, JavaScript- und CSS-Dateien das Browser-Caching aktivieren.

» mehr zum Thema: Browser-Cachingmehr lesen

mehr zum Thema: CSS-Dateien kombinierenCombine external CSS

Alle externen CSS-Dateien mittels PHP kombinieren und so die Anzahl der HTTP-Requests reduzieren.

» mehr zum Thema: CSS-Dateien kombinieren • Combine external CSSmehr lesen


mehr zum Thema: JavaScript-Dateien kombinierenCombine JavaScript

Alle externen JavaScript-Dateien mittels PHP kombinieren und so die Anzahl der HTTP-Requests reduzieren.

» mehr zum Thema: JavaScript-Dateien kombinieren • Combine external JavaScriptmehr lesen

mehr zum Thema: JavaScript-Dateien später ladenDefer loading of JavaScript

Externen JavaScript-Dateien später laden, sodass andere Ressourcen parallel heruntergeladen werden können und das Laden der Webseite beschleunigt wird.

» mehr zum Thema: JavaScript-Dateien später laden • Defer loading of JavaScriptmehr lesen

mehr zum Thema: JavaScript-Dateien später parsenDefer parsing of JavaScript

Alle externen JavaScript-Dateien später parsen um den Aufbau der Webseite für den Nutzer so schnell wie möglich zu realisieren.

» mehr zum Thema: JavaScript-Dateien später parsen • Defer parsing of JavaScriptmehr lesen



Webdesign Optimierung

mehr zum Thema: Quelltext-OptimierungQuelltext-Optimierung

Die Umsetzung von suchmaschinen- optimierenden Maßnahmen setzt auf eine strikte Trennung von strukturier- tem Inhalt und dem jeweiligen Layout.

» mehr zum Thema: Quelltext-Optimierungmehr lesen

mehr zum Thema: Struktur-OptimierungStruktur-Optimierung

Der wohl wichtigste Aspekt für ein erfolgreiches Webdesign. Die Struktur einer Website ist die grundlegende Voraussetzung.

» mehr zum Thema: Struktur-Optimierungmehr lesen

mehr zum Thema: Layout-OptimierungLayout-Optimierung

Das Optische Design ist, was dem Besucher als erstes ins Auge sticht und was auch die meisten unter dem Begriff Webdesign verstehen.

» mehr zum Thema: Layout-Optimierungmehr lesen

mehr zum Thema: Text-OptimierungText-Optimierung

Textaufbereitung? Die Texteinhalte der Webseiten werden meist weniger gelesen, als überflogen. Entsprech- end müssen Texte für das Web angepasst und aufbereitet werden.

» mehr zum Thema: Text-Optimierungmehr lesen

mehr zum Thema: Schnittstellen-OptimierungSchnittstellen-Optimierung

Sobald es um mehr als das Dar- stellen von Texten und Bildern geht, muss man sich mit der Benutzer- schnittstelle befassen.

» mehr zum Thema: Schnittstellen-Optimierungmehr lesen

mehr zum Thema: Duplicate Content verhindern Duplicate Content

Duplicate Content wurde maßgeblich dafür verantwortlich gemacht, das Ranking einer Webseite negativ zu beeinflussen.

» mehr zum Thema: Duplicate Content verhindernmehr lesen



Backlink Optimierung

mehr zum Thema: Linkpartner findenLinkpartner finden

Die klassische Art des externen Linkaufbaus besteht darin, Themen relevante Linkpartner zu finden.

» mehr zum Thema: Linkpartner findenmehr lesen

Webkataloge Richtig nutzen

Wenn es darum geht die eigene Website bekannt zu machen spielen Webkataloge eine große Rolle.

» mehr zum Thema: Webkataloge Richtig nutzenmehr lesen

mehr zum Thema: Links über PresseportaleLinks über Presseportale

Mit der Veröffentlichung einer Presse- meldungen in einem Presseportal können Sie gezielt Backlinks generie- ren.

» mehr zum Thema: Links über Presseportalemehr lesen

mehr zum Thema: Backlinks der ZukunftBacklinks der Zukunft

Social Bookmarks sind die Backlinks der Zukunft, da deren Relevanz für Suchmaschinen weiter zunimmt.

» mehr zum Thema: Backlinks der Zukunftmehr lesen




Tastaturkürzel