weberknecht.biz

Optimierung der Ladezeit mit minify

Reinhard Söllradl — Thu, 08 Jul 2010 16:46:26 +0000

Die Ladezeit-Optimierung einer Website ist heute nicht mehr so ein prominentes Thema als noch zu Zeiten von 56k-Modems. Die Zeiten ändern sich. Heute hat zwar fast jeder Internetnutzer eine Breitbandanbindung zur Verfügung, aber nichtsdestotrotz sollte dieses Thema für jeden Webentwickler zum Qualitätsanspruch gehören. Gerade jetzt wo Google überlegt die Ladezeit als Ranking-Faktor aufzunehmen.

Zur Optimierung der Ladegeschwindikeit einer Website sollten Maßnahmen wie die Bildoptimierung, schlanker HTML/CSS-Code für jeden Webdesigner selbstverständlich sein. Aber dies sind nicht alle Optimierungsmöglichkeiten.

Heute ist JavaScript wieder en vogue und wird mit bekannten Libraries (jQuery, MooTools, …) und eigenen Skripten gerne eingesetzt. Dies führt zur Zunahme des gesamten Speichervolumes und erhöht die Anzahl der HTTP-Requests. Für jede im HTML- und CSS-Code verknüpfte Datei (JS, CSS, Bilddateien) führt der Browser einen HTTP-Request aus (wenn nicht im Browsercache). Unabhängig von der Speichergröße der angeforderten Datei bringt jeder Request einen gewissen Delay mit sich (Verbindungsaufbau, …).

Mit dem Einsatz des Tools “minify” lassen sich die Requests reduzieren und zudem wird der JavaScript- und CSS-Code automatisch auf das Nötigste reduziert (enfernen von Kommentaren, Leerzeichen, …).

Funktionsweise von minify

Statt in HTML-Code alle JavaScript-Dateien einzeln einzubinden wird zu minify gelinkt und per Get-Parameter das gewünschte Skriptpaket angefordert.
Statt:


  ...
  
  
  
  ...

Alle gewünschten Skriptpakete (beispielsweise zwei, eines für die CSS-Dateien und eines für die JavaScript-Dateien) werden in der Einstellungsdatei “groupsConfig.php” beliebig definiert. Beispiel:

return array(
    'css' => array(
        '//css/reset.css',
        '//css/screen.css',
        '//css/lib/jquery.fancybox.css'
    ),
    'js' => array(
        '//js/jquery.js',
        '//js/jquery.fancybox.js',
        '//js/jquery.scrollTo.js',
        '//js/jquery.ketchup.js',
        '//js/website.js'
    )
);

Beim Aufruf eines Dateipaketes liefert minify den Code aller zugehörigen Skripte in reduzierter und komprimierter Form aus. minify bietet viele Anpassungmöglichkeiten und erfordert nur PHP ab 5.2.1.

Download und Informationen auf der
Projektseite von minify.

Style Button v1.0

Reinhard Söllradl — Fri, 21 May 2010 08:53:25 +0000

Den “Style Button” habe ich für die Verwendung in meinen Webprojekten erstellt und richtet sich an den Einsatz in Webapplikationen. Das Design ist möglichst schlicht und neutral gehalten.

Wer möchte darf den Quellcode beliebig weiterverwenden und anpassen. Sollte es Vorschläge zu Verbesserungen geben bitte ich diese als Kommentar zu posten.

Screenshot mit Beispieldarstellungen:

Die Verwendung im HTML-Code ist durch das einfache Markup leicht möglich. Für das Design werden bereits einige CSS3-Styles verwendet. Beispielweise für die abgerundeten Ecken. Die CSS3 Unterstützung durch den Browser ist allerdings nicht zwingend erforderlich.

Die Darstellung wurde in folgenden Browser erfolgreich getestet:
Firefox 3.6, Safari 4, Internet Exporer 7 & 8.

Infos und Download sind auf der Laborseite zu finden:

Style Button v1.0

Google Font API

Reinhard Söllradl — Thu, 20 May 2010 13:04:03 +0000

Google bietet nun mit Google Font API einen Service für die einfache Verwendung von Webfonts im eigenen Webdesign. Momentan stehen um die 20 Schriftfamilien zur Auswahl. Das Ganze funktioniert mit allen modernen Browsers und dem IE ab Version 6 und erfordert kein JavaScript oder Flash.

Google Font API

HTML/CSS/JavaScript-Referenz

Reinhard Söllradl — Fri, 30 Apr 2010 10:12:49 +0000

In einem Blogartikel von Gerrit van Aaken hab ich den Link zu der HTML/CSS/JavaScript-Referenz von sitepoint.com gefunden. Interessant zum schnellen Nachschlagen für alle (zukünftigen) Webentwickler. Momentan allerdings nur in englischer Sprache verfügbar.

http://reference.sitepoint.com

typechart.com

Reinhard Söllradl — Wed, 28 Apr 2010 15:07:21 +0000

Diese Website bietet ein Reservoir von Fontstyles für den Webeinsatz.
Die jeweils nötigen CSS Anweisungen kann man sich direkt für die Weiterverwendung anzeigen lassen.
Ein praktische Sache für alle Webdesigner!

www.typechart.com

Neues Projekt: “html-service.at”

Reinhard Söllradl — Fri, 09 Apr 2010 07:13:41 +0000

Gestern ging mein neues Eigenprojekt “HTML-Service” online!

HTML-Service erstellt aus Ihrem Webdesign-Entwurf im Photoshop®-Format qualitativen HTML/CSS-Code.

Preise für die Webdesignumsetzung beginnen mit € 240,–.
Zum Start des Service gibt es im Monat April 2010 10% Rabatt auf die Auftragssumme.

Zur Projektseite von html-service.at

365psd

Reinhard Söllradl — Thu, 18 Mar 2010 09:05:13 +0000

Auf der Website 365psd.com wird ein Jahr lang jeden Tag eine weitere freie Photoshop-Datei angeboten. Die Dateien bieten sich hauptsächlich für den Bereich der Webentwicklung an. Eine kommerzielle Verwendung ist erlaubt.

365psd.com

Gefunden bei: almstudio.at

supportdetails.com

Reinhard Söllradl — Mon, 15 Mar 2010 09:04:17 +0000

Die Website supportdetails.com bietet eine einfache und schöne Anzeige der technischen Eckdaten des Clients. Angezeigt werden unter anderem das Betriebssystem, Bilschirmauflösung, der verwendete Webbrowser, IP-Adresse und mehr.

Dies kann für Webworker beim Kundensupport nützlich sein. Viele Webentwickler kennen sicher den Fall dass ein Kunde ein technisches Problem mit der entwickelten Website hat. Um der Problemursache auf die Schliche zu kommen sind Informationen über die technischen Gegebenheiten beim Kunden oftmals hilfreich.
Gefunden bei liechtenecker.at

supportdetails.com

Vorstellung des CMS “loom pur”

Reinhard Söllradl — Wed, 10 Mar 2010 17:16:44 +0000

Heute möchte ich das CMS „loom pur“ vorstellen. Ich habe dieses System gezielt für den Einsatz bei kleinen und mittleren Kundenprojekten entwickelt.

Eigenentwicklung

Oftmals werden bekannte und teilweise kostenlose Systeme für Webprojekte eingesetzt die mit einem Überdruss an Funktionen überzeugen möchten. Zweifellos keine generell schlechten Systeme, nur für den Einsatz bei kleinen und mittleren Projekten nicht immer die optimale Lösung.
Für mich sprachen mehrere Gründe für eine Eigenentwicklung:
Ein Hauptgrund ist die Möglichkeit sich bei der Funktionalität auf die Wünsche des Kunden und den Projektanforderungen konzentrieren zu können. Weiters lege ich viel Wert auf die Benutzerfreundlichkeit bei der Nutzung der Wartungsoberfläche. Mit der Ausrichtung auf die Kundenwünsche muss sich der Kunde nicht mit nebensächlichen Funktionsmöglichkeiten herumschlagen und auseinandersetzen. Meine bisherigen Kunden waren über dieses Entgegenkommen sehr erfreut.  Weitere Gründe für die Eigenentwicklung ist die Systemsicherheit und die Möglichkeit schnell Anpassungen und Erweiterungen einzubringen.

„loom pur“ ist bereits bei einigen meiner Kundenwebsites im Einsatz.
Weitere Informationen finden Sie auf der Projektseite zu „loom pur“

chive – Alternative zu phpMyAdmin?

Reinhard Söllradl — Tue, 09 Mar 2010 15:20:24 +0000

chive könnte eine interessante Alternative zu phpMyAdmin werden. Ist ein Projekt des Unternehmens fusonic GmbH aus Österreich und wurde auch in PHP geschrieben. Optisch ist das Tool ansprechend umgesetzt. Bei meinem ersten kurzen Test wirkte die Sotware noch etwas buggy. Aber da das Projekt noch relativ jung ist, kann dies bald behoben sein. Ich bin gespannt wie sich das Tool und die Nutzung entwickelt!