Wissenswertes für Webdesigner beim Gestalten einer Website bei der Optimierung

Auf dieser Seite zeigen wir ein paar Tipps und Tricks bei der Optimierung einer Website.

Navigation

Optimierung

23Aug2008

Wie erzeugt man einen Bildwechsel ohne Wartezeit?


Unten können Sie so einen Bildwechsel testen. Ursprünglich waren auch die Bilder auf der Seite "Über uns" mit dieser Technik realisiert.

Monika

Um nicht mit Java-Scripten und Mouseover-Effekten zu arbeiten, haben wir diesen Effekt mit CSS-Mitteln und der dynamischen Pseudo-Klasse ":hover" realisiert. Und damit nicht ein zweites Bild geladen werden muß, und es damit zu Wartezeiten beim Bildwechsel kommt, gehen wir folgendermaßen vor.

Anstelle von zwei Bildern (eins in "Farbe" und eins in "schwarz/weiß") haben wir die Bilder zusammengefügt. Unterhalb des "schwarz/weiß-Bildes" haben wir das "farbige Bild" eingebunden und erhalten somit nur ein Bild.

In dem Moment wo nun der Mauszeiger das "schwarz/weiß-Bild" berührt, verschieben wir das Bild exakt um die Hälfte nach oben und das "farbige Bild" erscheint. Das ist schon alles.

.monika { background: url(/bilder/monika.jpg) no-repeat 0 0; width: 300px; height: 199px } .monika:hover { background-position: 0 -200px }

Das Bild selber wird mit einem div-Container in die Seite eingebunden.

<div class="monika" title="Hallo, ich bin die Monika..."> Monika </div>


01Jan2013

Langsames Einblenden


Eine weitere Technik mit dem schönen Effekt des langsamen Einblenden des Farbbildes (siehe unten) wird wie folgt realisiert.

Farbbild von MonikaSchwarz-Weißbild von Monika

Hierfür benötigen wir die beiden Einzelbilder. Also ein Bild in "Farbe" und das andere in "schwarz/weiß" und legen diese Bilder mit CSS-Mitteln übereinander. Das "farbige Bild" liegt dabei als unterstes und das "schwarz/weiß-Bild" darüber.

Wenn man nun mit der Maus das "schwarz/weiß-Bild" berührt, blenden wir das Bild mit dem Befehl "opacity" langsam aus und das "farbige Bild" erscheint. Die folgenden Zeilen in CSS und HTML sind dazu notwendig.

.monika2 { position: relative; width: 300px; height: 199px } .monika2 img { position: absolute; transition: opacity 1s ease-in-out } .monika2 img.oben:hover { opacity: 0; transform: scale(1) }

Die beiden Bilder werden wie im ersten Beispiel mit einem div-Container eingebunden.

<div class="monika2" title="Hallo, ich bin die Monika..."> <img src="/bilder/monika2.jpg" width="300" height="200" alt="Farbbild von Monika" /> <img class="oben" src="/bilder/monika1.jpg" width="300" height="200" alt="Schwarz-Weißbild von Monika" /> </div>


20Jan2014

Externe CSS-Dateien zusammenfassen


Um das Aufrufen einer Webseite weiter zu optimieren, ist es sinnvoll die HTTP-Requests, also Anfragen vom Browser an den Webserver, auf ein Minimum zu reduzieren. Wird zum Beispiel eine CSS-Datei oder ein Script von der aufgerufenen Webseite benötigt, wird eine Anfrage an den Webserver gestellt und der Inhalt geladen. Es sei denn, der Inhalt befindet sich bereits im Browser-Cache des Bedieners.

Mit einem kleinen php-Script werden mehrere CSS-Dateien zusammengefasst und somit die Anfragen an den Webserver verringert. Außerdem werden mit dem Script Kommentare, Leerzeichen und Zeilenumbrüche entfernt.
Auf der Webseite von Webdesign tepelmann kann man sich das Script anschauen.

Ich habe das Script nur noch dahingehend geändert, dass in der Datei noch zusätzlich der Last-Modified-Header ausgegeben wird, um das aktuelle Änderungsdatum bei einer Analyse anzuzeigen.

<?php ... header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); ... ?>

Damit werden nun nicht mehr alle CSS-Dateien einzeln in die Webseite eingebunden, sondern es wird nur noch das php-Script, welches die CSS-Dateien zusammenführt, eingebunden.


20Jan2014

Externe JavaScripte zusammenfassen


Auch hierbei nutzen wir ein php-Script das ähnlich aufgebaut ist wie das Script im vorigen Artikel. Man findet es ebenfalls auf der Webseite von Webdesign tepelmann.

Und auch hier habe ich die Zeile für das Ermitteln des aktuellen Änderungsdatum eingefügt.
Beim Test ist mir allerdings ein Fehler aufgefallen, so dass ich die Zeile:

<?php ... $content = str_replace(array("\r\n", "\r", "\n", "\t"), "", $content); ... ?>

geändert habe in:

<?php ... $content = str_replace(array("\r\n", "\r", "\t"), "", $content); ... ?>


15Feb2009

HTML mit mod_gzip komprimieren


Veraltet!

Webseiten werden mit dem externen Erweiterungsmodul mod_gzip spürbar schneller geladen, weil die Inhalte der Seiten durch das Verfahren erheblich komprimiert werden.

Am Anfang einer HTML-Datei braucht man dafür nur die folgenden Zeilen einzugeben:

<?php ob_start( 'ob_gzhandler' ); ?>


Neuere Umsetzung!

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.


15Feb2009

CSS mit mod_gzip komprimieren


Veraltet!

Webseiten werden noch schneller geladen, in dem man auch die CSS-Dateien mit mod_gzip komprimiert. Unsere Dateien sind über die Hälfte kleiner geworden!

Am Anfang einer CSS-Datei wird folgendes eingegeben:

<?php ob_start('ob_gzhandler'); header('Content-Type: text/css'); ?>

Nun muß man nur noch in einer .htaccess-Datei alle CSS-Dateien auf der folgenden Art und Weise einbinden. Die .htaccess-Datei muß dabei in dem gleichen Pfad wie die CSS-Dateien liegen.

<Files button.css> ForceType application/x-httpd-php </Files>


Neuere Umsetzung!

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.


21Feb2009

JavaScripte mit mod_gzip komprimieren


Veraltet!

Und das schöne bei diesem Erweiterungsmodul ist, es läßt sich auch bei einem JavaScript anwenden! Ein von uns getestetes JavaScript ist zum Beispiel von 3.371 Byte auf 1.354 Byte geschrumpft!

Am Anfang des JavaScript wird wieder folgendes eingegeben:

<?php ob_start('ob_gzhandler'); header('Content-Type: text/javascript'); ?>

Auch hierbei werden in einer .htaccess-Datei alle JavaScripte eingebunden.

<Files keypress.js> ForceType application/x-httpd-php </Files>


Neuere Umsetzung!

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.


09Sep2011

Webseiten werden mit gzip-Compression optimal komprimiert.


Der große Nachteil bei den vorher aufgeführten Methoden ist, dass alle Dateien geändert werden müssen. Im Nachhinein eine sehr mühselige Arbeit.

Die gzip-Compression über die .htaccess-Datei funktioniert mit dem mod_deflate Modul des Servers. Dadurch wird zwar die Serverlast etwas erhöht, aber durch die eingesparte Datenmenge wird dieser Nachteil mehr als ausgeglichen.

Diese Methode hat den großen Vorteil, dass wir lediglich die .htaccess-Datei wie folgt ändern müssen:

<IfModule mod_deflate.c> <FilesMatch "\.(ico|js|css|html|htm|php|xml|woff|ttf|otf|eot)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule>

Mit der ersten Zeile wird geprüft, ob das Modul überhaupt auf dem Server aktiviert ist. Ist das nicht der Fall müssen leider die vorher aufgeführten Methoden angewendet werden.

Tipp:
Und mit diesem php-Skript kann man sehr einfach überprüfen, ob die gzip-Compression auch wirklich funktioniert.


24Aug2008

Mit welchen Tools haben wir unsere Webseiten getestet?


Um unsere Webseiten nach möglichst vielen Kriterien zu testen, haben wir diese mit verschiedenen Tools überprüft, von denen wir hier die wichtigsten auflisten.

HTML und XHTML

HTML und XHTML

  • Markup Validation Service: Der bekannteste Validator (W3C Konsortium)
  • Add-on für Firefox: Ein Add-on für den Firefox-Browser ist der HTML Validator basierend auf Tidy. Er überprüft HTML-Dokumente auf Fehler und zeigt dann entsprechende Icons in der Statuszeile des Browsers an.
  • WDG LinkValet: Der WDG LinkValet testet die Erreichbarkeit aller Seitenaufrufe der ganzen Website. Der Vorteil ist, er weist jeden Link mit entsprechendem Fehlerbericht aus.
  • W3C LinkChecker: Auch der W3C LinkChecker vom W3C Konsortium überprüft die Erreichbarkeit der Seitenaufrufe. Hier muß man nur folgende Häkchen setzen: Summary only, Hide redirects: all, Check linked documents recursively recursion depth: 500.

CSS

CSS

RSS-Feed

RSS

  • Feed Validation Service: Der W3C Feed Validation Service für Atom und RSS-Feed (W3C Konsortium).
  • FEED Validator: Der FEED Validator testet ebenfalls den RSS-Feed. Er findet aber meines Erachtens noch einige Fehler mehr.

P3P

P3P

  • P3P Validator: Der P3P Validator ist ebenfalls vom W3C Konsortium. P3P schafft Transparenz im sensiblen Feld des Datenschutzes.

Accessibility (Zugänglichkeit)

Accessibility Test

  • Web Accessibility Test: Mit dem TAW (Web Accessibility Test) testet man eine Webseite auf seine Zugänglichkeit und Barrierefreiheit, basierend auf den Richtlinien des W3C - Web Content Accessibility Guidelines 1.0 (WCAG 1.0).
  • Functional Accessibility Evaluator: Mit dem FAE testet man eine Webseite auf seine funktionelle Zugänglichkeit.

Tools die mehrere Tests beinhalten

Tools

  • Qualidator: Der Qualidator überprüft die ersten 5 Seiten einer Website mit ca. 60-70 automatischen Tests auf die Kernpunkte der Bereiche Usability (Benutzungsfreundlichkeit), Accessibility (Zugänglichkeit), SEO (Suchmaschinenoptimierung) und Quality (technische Qualität).
    Unser Testresultat vom 10.03.2013 ergibt einen Wert von 99.3%
  • Die getestete Website schneidet in der Gesamtanalyse exzellent ab und spielt in der "Premium League"! Die Zugänglichkeitsrichtlinien (Accessibility) wurden auf höchstem Niveau vorbildlich umgesetzt. Hinsichtlich der Usability Grundsätze wurde die Website vorzüglich realisiert. Der Suchmaschinenoptimierung wurde bestmögliche Beachtung geschenkt.
  • Dein Domainwert: Für jede bewertete Domaine werden Merkmale wie zum Beispiel Backlinks in verschiedenen Suchmaschinen, den Google-Pagerank und vieles mehr angezeigt und gespeichert.
    Unser Testresultat vom 19.10.2009 ergibt einen Wert von 2.218,01 EUR
  • Web Page Analyser: Der Web Page Analyser analysiert die Ladegeschwindigkeit sowie die Größe aller eingebundenen Elemente einer Seite.

18Mai2011

Alles für eine gute Homepage.


Diese Webseiten und Programme haben uns bei der Erstellung unserer Website geholfen.

Zum Seitenanfang springen

Sie befinden sich hier: Klamonfra > Wissenswertes > Optimierung