kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Performance


WordPress-Mediathek auf Subdomain auslagen. Warum und wie.

Die Performance gehört zu den wichtigsten Faktoren wenn es um die technische Optimierung einer Website geht. User erwarten schnelle Seiten und auch Google rankt Sites mit hoher Performance im Index weiter nach vorne. Es lohnt sich also hier zu optimieren.
Um zu prüfen welche Bereiche eurer Website verbesserungswürdig sind, könnt ihr beispielsweise Google Page Speed oder Yahoo YSlow nutzen. Beide Dienste empfehlen die Nutzung eines sog. CDN (= Content Delivery Network), also die Auslagerung von Medianinhalten auf verschiedene Server dessen Aufgabe ausschließlich die Verwaltung und Verteilung dieser Inhalte ist. Es muss aber kein echter CDN-Dienst sein. Häufig reicht eine eigene Subdomain.

Beitrag zu Ende lesen

CSS-Sprites online erstellen – Spritepad

Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.

Beitrag zu Ende lesen

Responsive Image Replacement mit Breakpoints: Doubletake

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Beitrag zu Ende lesen

WebP-Grafiken mit Photoshop-Plugin erstellen

"Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als auch für Anwender die Arbeit mit dem Internet so angenehm wie möglich zu gestalten. Angefangen beim hauseigenen Browser Chrome, über die Relevanz der Website-Ladezeiten für die Suchmaschinen-Platzierung, bis hin zu Webfont-Bibliotheken: die Performance einer Website wird immer wichtiger. Vor einiger Zeit wurden die Entwickler von Google beauftragt, eine neue Dateikompression für Grafiken zu erarbeiten. Die neue Bilddatei sollte mindestens der Qualität von JPG entsprechen, jedoch deutlich kleinere Dateien erzeugen. Das Ergebnis dieser Entwicklung ist das neue Grafikformat WebP (gesprochen "Weppy"). Doch leider kennt Photoshop das Format noch nicht.

Beitrag zu Ende lesen

Website-Ladezeiten in verschiedenen Browsern und aus unterschiedlichen Ländern testen

Um die Ladezeiten einer Website zu testen bzw. zu bewerten, gibt es mittlerweile einige brauchbare Tools: Da wäre zum Beispiel der Google-Dienst Page-Speed Online oder das Browser-Plugin YSlow von Yahoo. Beide Dienste lassen sich übrigens gemeinsam und sehr komfortabel auf GTMetrix.com online nutzen.
Wenn ihr darüber hinaus überprüfen möchtet wie sich die Ladezeit eurer Website in verschiedenen Ländern und Browsern darstellt, so lohnt sich zusätzlich ein Blick auf die Website LoadsIn.

Beitrag zu Ende lesen

Google Page Speed Online

Google hat das hauseigene Tool "Page Speed" kräftig ausgebaut. Bisher war das Hilfmittel zur Bewertung der Website-Performance lediglich als Firefox-Extention verfügbar und konnte über die Google Webmaster Tools eingesehen werden.
Jetzt steht das Plugin auch für Google Chrome zur Verfügung und - was ich persönlich noch viel besser finde - als Online-Version!