Ionic ist ein Frontend-Framework, mit welchem man via HTML5 / JavaScript und CSS native Apps bauen kann. Diese Apps können via “Apache Cordova” auf native Funktionen (Kamera, GPS, etc.) der Geräte zugreifen. Zudem wird Google’s JavaScript Framework “AnguarJS” genutzt und natürlich wird auch “SASS” unterstützt.
Vorbereitung
Man kann Multi-Platform Mobile Apps sowohl unter Windows, Linux oder Mac OS X entwickeln, jedoch ist die Vorbereitung unter Linux / Mac OS X um einiges einfacher.
Ich empfehle an dieser Stelle mal wieder die “.dotfiles” zu installieren.
cd ~
git clone https://github.com/voku/dotfiles.git
cd dotfiles
source bootstrap.sh
Man kann die App nun im Browser (ionic serve), im Android Emulator (ionic emulate android) oder direkt auf seinem Android-Gerät (ionic run android) ausprobieren!!!
Links
Es folgen ein paar Links zur App / API / Dokumentation und zum Beispiel-Quellcode
Falls du keinen Zugriff auf die Konfiguration von Apache hast, kannst du den Browser-Cache folgendermaßen beeinflussen. Nun wollen wir unseren JS/CSS Dateien noch einen Header mitgeben, welcher wiederum bewirkt, dass der entsprechende Browser (Client) die Datei für eine gewisse Zeit speichert und für „neu“ hält, dies spart wieder Traffic, welchen wir nicht bezahlen müssen und außerdem beschleunigt es den Seitenaufruf.
CSS in PHP umbenennen, um den php-Code in der Datei ausführen zu können.
mv test.css test.css.php
Anschließend werden wir am Anfang der Datei folgendes mit einfügen.
<?php
require_once("gzipCSS.php");
?>
Im folgenden Beispiel wird die Datei für 3 Tage (60 * 60 * 24 * 3) gespeichert.
[stextbox id=”info”]Falls man die Komprimierung jedoch bereits serverseitig aktiviert hat, hatte ich das Problem, dass die Webseite nicht zu-ende geladen werden konnte, daher würde ich empfehlen auf diese Methode zu verzichten, sofern man Zugriff auf das System hat und die Einstellungen am Webserver selber einstellen kann, zumal es relativ lange dauern dürfte, bis man alle Dateien auf diese weiße optimiert hat![/stextbox]
Expires – in diesen Header-Eintrag wird, für jede Server-Antwort festgelegt, wie lange diese gültig ist. Um jedoch erst-einmal zu verstehen, was in diesem Header steht folgt ein kleines Beispiel in
PHP:
function setExpires($expires) {
header(
'Expires: '.gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
}
setExpires(10);
echo ( 'This page will self destruct in 10 seconds<br />' );
echo ( 'The GMT is now '.gmdate('H:i:s').'<br />' );
echo ( '<a href="'.$_SERVER['PHP_SELF'].'">View Again</a><br />' );
nach 10 Sekunden ist diese Webseite alt und muss vom Browser erneut geladen werden.
Kommen wir nun zurück zur Konfiguration von Apache, um „expires“ zu aktivieren führen wir unter Linux Debian/Ubuntu folgendes Kommando aus.
a2enmod expires
a2enmod headers
Nun passen wir die entsprechende Konfiguration an, um bestimmte Dateien für eine gewisse Zeit clientseitig zu speichern.
vim /etc/apache2/mods-available/expires.conf
<IfModule mod_expires.c>
AddType image/vnd.microsoft.icon .ico
AddType application/javascript .js
AddType application/x-tar .tgz
AddType text/plain .c
AddType text/plain .h
ExpiresActive On
ExpiresDefault "access plus 4 houres"
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"
ExpiresByType image/ico "access plus 3 month"
ExpiresByType image/x-icon "access plus 3 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType video/x-flv "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 months"
ExpiresByType video/mp4 "access plus 1 months"
ExpiresByType video/mpeg "access plus 1 months"
ExpiresByType video/x-ms-wmv "access plus 1 months"
ExpiresByType audio/mpeg "access plus 1 months"
ExpiresByType audio/y-wav "access plus 1 months"
ExpiresByType application/pdf "access plus 2 weeks"
ExpiresByType application/zip "access plus 2 weeks"
ExpiresByType application/x-tar "access plus 2 weeks"
ExpiresByType application/x-download "access plus 2 weeks"
ExpiresByType application/ps "access plus 2 weeks"
ExpiresByType application/msword "access plus 2 weeks"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType application/xml "access plus 24 houres"
ExpiresByType application/xhtml+xml "access plus 24 houres"
ExpiresByType text/html "access plus 12 houres"
ExpiresByType text/htm "access plus 12 houres"
ExpiresByType text/plain "access plus 12 hours"
ExpiresByType text/xml "access plus 12 hours"
<IfModule mod_headers.c>
<FilesMatch "\\.(ico)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
<FilesMatch "\\.(css|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</FilesMatch>
<FilesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</FilesMatch>
<FilesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=300, private, must-revalidate"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
ExpiresActive Off
Header unset Expires
Header unset Last-Modified
Header set Pragma "no-cache"
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
</FilesMatch>
</IfModule>
FileETag none
</IfModule>
… und den Apache-Webserver neu-starten, um die neue Konfiguration zu übernehmen.
/etc/init.d/apache2 restart
Nun werden bestimmte Daten z.B. Bilder erst nach einem Monat wieder von der Webseite geholt, solange diese noch im Cache des Browsers sind und nicht manuell neu angefragt werden (F5).
ohne Expires:
mit Expires:
Die Grafik sind ebenfalls von YSlow, die Erweiterung, welche ich am Anfang des Artikels bereits beschrieben habe. Im ersten Bild siehst du die Ausgabe, wenn ein neuer Besucher (leerer Browsercache) meine Seite besucht und im zweiten, wenn z. B. ein Stammbesucher die Website aufruft, somit lässt sich gut erkennen wie viel Traffic it dieser Methode bereits bei einem Seitenaufruf eingespart werden kann, rechnet das mal für einen Monat hoch. ^^
Syntax:
ExpiresByType <TYPE> “<BASIS> [ plus ] <ANZAHL> <TYP>”
<TYPE> hier wird der Datei-Type definiert
<BASIS>
– modification ist das Änderungsdatum
– access oder now stehen für den Zugriffszeitpunkt
Das Schlüsselwort „plus“ ist optional. Es verdeutlicht die Tatsache, dass die nachfolgende Zeitangabe zum Basiszeitpunkt addiert wird
So langsam möchte ich auf die Fragen, welche bisher aufgetaucht sein könnten eingehen und mit der Beschleunigung der Webseite anfangen, daher starten wir mit der Komprimierung.
Alle neuen Browser (ab IE6) unterstützen komprimierte Dateien, man kann sich dies so ähnlich vorstellen, wie in dem diesem Proxy-Beispiel, wo die Dateien serverseitig komprimiert werden und vom Client, in unserm Fall nun der Browser wieder dekomprimiert werden. Aber dazu kommen wir gleich. Das Problem ist, dass Bilder bereits komprimiert sind und falls diese im Nachhinein noch einmal passiert, diese sogar größer werden können als zuvor, daher versucht man diese bereits bei der Bereitstellung in der optimalen Dateigröße anzubieten, zudem sollte man vermeiden, dass zu viele kleine Dateien vom Server geladen werden müssen, da zu viele Verbindungen bzw. Anfragen sich auch seht negativ auf die Performance einer Webseite auswirken.
2.1) Bilder komprimieren
2.1.1) Bilder Sprites
spritemap
Durch viele kleine Icons / Menü-Bildern kommen viele Serveranfragen zustande, welche man durch ein größeres Bild, welches dann wiederum mit css so bearbeitet werden kann, dass man bestimmte Bildabschnitte ansprechen kann, ersetzten könnte.
Es folgt noch ein Beispiel, um das Prinzip zu verstehen…
alte CSS-Regeln:
#header {background: url(bild1.jpg) top left repeat-x; height:80px;}
ul.menu li {background: url(bild2.jpg) top left repeat-x; height:15px;}
bild1.jpg und bild2.jpg sind jeweils 1px breit. Waf der folgenden Webseite → Sprite-Generator ← kann man diese beiden Dateien nun zu einer Sprite-Datei zusammenfassen und herunterladen bzw. auf Webserver hochladen.
Dieses Sprite-Bild wird nun für alle Elemente, die einen im Sprite enthaltenen Hintergrund haben eingefügt:
#header, ul.menu li {background-image:url(bg_sprite.png);}
Mithilfe der im Generator angegebenen Regeln, werden die alten CSS-Regeln ersetzen:
Dies fällt bei größeren Bildern mehr ins Gewicht, jedoch kann auch die Komprimierung von solchen Logos etc. schon einige hundert MB im Monat einsparen, zumal PNG in Gegensatz zu JPEG eine verlustfreie Neukomprimierung unterstützt.
Als alternative zu all dieses serverseitigen Möglichkeiten kannst du deiner Bilder natürlich auch mit einem Bildbearbeitungsprogramm (z.B. Paint.NET) öffnen und z.B. optimiert für Webseiten abspeichern.
2.2) JavaScript/CSS komprimieren
2.2.1) JavaScript/CSS komprimieren – serverseitig
Hier werde ich kurz zeigen wir du deine JS- und CSS-Dateien nicht nur komprimieren kannst, um die Ladegeschwindigkeit deiner Webseite zu verbessern, sondern auch noch optimierst, so dass diese schneller ausgeführt werden. Der CSS-Kompressions-Algorithmus verwendet zudem einen Satz von fein aufeinander abgestimmten reguläre Ausdrücke, um die CSS-Datei zu komprimieren.
[stextbox id=”info”]Bei mir hat das kombinieren von einigen JS- und CSS-Dateien negative Auswirkungen gehabt, so haben einige JS nicht mehr funktioniert, zudem sollte man bedenken, dass einige Dateien nicht auf jeder Webseite benötigt werden und daher auch ruhig später geladen werden können, sobald ein Besucher z.B. auf Kommentare klickt.[/stextbox]
Eine weitere Methode besteht darin, die Daten selber gar nicht zu verändern, sondern diese direkt und nach einer bestimmten Zeit neu von einem Server komprimieren zu lassen, diese Methode hat daher auch wieder nachteiligen Einfluss auf die Ladegeschwindigkeit, da ein weitere Request, DNS-Lookup usw. hinzukommt. Jedoch kann man an diesen Online-Dienst auch mehrere CSS- bzw. JS-Dateien gleichzeitig übergeben. Ob dies wirklich die Performance steigern kann müsste man im Einzellfall ausprobieren.
Serverseitige Komprimierung und somit eine Reduzierung der zu Übertragungen Datenmengen von 40 – 70 % sind hier zu erreichen, zudem kannst du mithilfe der folgenden Konfigurationen gleich mehrere Webseiten, welche auf dem selben Server laufen optimieren.
ohne gzip-Kompression:
http_request
mit gzip-Kompression:
http_request_compressed
Aktiviere mod_deflate (gzip) – serverseitig
Diese Art der Komprimierung macht natürlich nur bei Dateien Sinn, welche auch komprimiert werden können z.B. HTML, CSS oder Javascript …
a2enmod deflate
… dieser Befehl kann unter anderen Distributionen anders aussehen z.B.: BSD
Mithilfe von gzip (DeflateCompressionLevel) kann man verschneide Kompressions-Level einstellen, wobei 1 die schnellsten Komprimierung (weniger Kompression) und 9 die langsamste Komprimierung (beste Kompression) ist. Die Standard-Kompressions-Level ist 6. da eine zu hohe Kompression auf Kosten der der Systemleistung geht, ggf. kann man diesen Wert anpassen, wenn man noch genügend Ressourcen frei hat.
Nun müssen wir unsern Webserver neu-starten, um die Konfiguration zu übernehmen.
Wer noch apache und nicht apache2 verwendet sollte “mod_gzip” anstelle von “deflate” ansehen, jedoch werde ich nicht weiter auf die veraltete Apache-Version eingehen, wenn noch jemand den alten “Apache Web-Server” einsetzt, soll man ggf. ein Update auf apache2 durchführen…
“Nur unter Apache 1.3 ist “mod_gzip” effektiver ab “Apache 2.x” sollte man “mod_deflate” verwenden.”
Es gibt auch noch die Möglichkeit Dateien serverseitig im Vorhinein zu komprimieren und in einer .htaccess anzugeben, welche Dateien bzw. Dateiendungen vom Browser wieder dekomprimiert werden müssen. Ich selber habe auch eine Mischung aus den verschienden Komprimierungsverfahren gewählt, so habe ich sehr große JS-Dateien im Vorhinein folgendermaßen komprimiert, so dass der Server dies nicht jedes mal machen muss, zudem hat dieses Verfahren den großen Vorteil, dass man die negative Auswirkung des hohen Komprimierungslevel, auf die Systemauslastung umgeht.
Der Artikel beschreibt, wie man seine Webseite bzw. seinen Server analysiert und optimiert um Performance zu gewinnen, Ladezeit zu reduzierten bzw. Traffic einzusparen. Man kann einiges an Performance gewinnen, indem man z.B. Bilder im richtigen Format abspeichert bzw. komprimiert, CSS- / JS-Dateien kombiniert und ebenfalls komprimiert oder auch bestimmt Daten vorkomprimiert zur Verfügung stellt.
Abschließend möchte ich diesen Thema noch einmal kurz zusammenfassen, so dass man ggf. selber weitere Möglichkeiten erkennt, die Ladegeschwindigkeit seiner Webseite zu verbessern, jedoch nicht auf die Technische Umsetzung eingehen.
Kenne deinen Feind !!!
80 bis 90% der schlechten Performance liegt an der Webseite selber und nicht auf der Serverseite, solange nur wenig Besucher auf deiner Webseite sind, braucht man sich eigentlich um einen Revere-Proxy oder eine alternative zu Apache keine oder zumindest nur wenig Gedanken machen, da die Performance erst mit steigender Besucherzahl einbricht. Jedoch sollte man in jedem Fall die gzip-Komprimierung und den Browser-Cache nutzen.
Externe Dateien (Bilder, JS, CSS, Videos…)
Jeder Aufruf einer Datei kostet Performance und Bandbreite, daher sollte man im allgemeinen weniger Requests produzieren, indem man z.B. JS- bzw. CSS-Dateien kombiniert. Dieser negative Einwirkung steigt dramatisch bei externen Dateien von andern Servern und besonders dann, wenn dieser gerade mal nicht erreichbar ist.
Scripte
Immer wenn eine Browser eine Webseite abruft und im HTML-Code ein Script finde, wird das weitere laden der Webseite eingestellt und erst-einmal die JavaScript Engine damit beansprucht, diesen zu interpretieren. Daher sollte man diese Dateien erst am Ende der Webseite laden lassen, so dass der User die Webseite früher sehen kann, auch wenn z.B. die Animation des Menüs erst nach nachgeladen werden muss. Mit diesem Ansatz, erscheint es nur Sinnvoll CSS-Daten am Anfang laden zu lassen, so dass sich die Webseite dem User direkt im korrektem Layout präsentiert.
Bilder
Ein weites großer Bereich sind Bilder, dabei muss man jedoch ein gutes Mittelmaß an Text und Bildern finden, da die User zwar Bilder immer schön finden.. Logo, Hintergrundbild u.s.w. jedoch macht es nur wenig Sinn seine selbst jeder kleine Datei zu optimieren, wenn man oben über der Webseite ein 300 KB großes Bild eingefügt hat. Wie bereit im Artikel beschrieben gibt es jedoch zahlreiche Methoden (PNG- und JPEG-Dateien) diese zu optimieren.
Yahoo hat zudem eine sehr umfassende Liste von weiteren Regeln zusammengestellt, welche man beachten sollte.
In order to optimize the website and to continuously improve it, this site uses cookies. By continuing to use the website, you consent to the use of cookies.
