{"id":174,"date":"2010-06-23T15:45:19","date_gmt":"2010-06-23T14:45:19","guid":{"rendered":"http:\/\/blog.bit-dynamics.de\/?p=174"},"modified":"2010-06-23T15:45:19","modified_gmt":"2010-06-23T14:45:19","slug":"ladezeiten-apache-tuning-php-javascript-css","status":"publish","type":"post","link":"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/","title":{"rendered":"Apache Feintuning – Schnellere Ladezeiten f\u00fcr Ihre Webseite"},"content":{"rendered":"

Die Ausgangslage<\/h2>\n

Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes „AMFramework“, dem auf PHP basierenden Entwicklungsframework mit Inline-Editing Content-Management Funktionalit\u00e4ten. Dar\u00fcber hinaus handelt es sich bei dem neuen Projekt um eine lebendige, sehr Bilder-lastige Seite, bei der locker mal einige MB an bereits komprimierten Bildern in die Leitung geschickt werden. Daher reagierte die Seite manchmal langsam. Ziel war also die performance der Webseite zu erh\u00f6hen, vor allem die „page loading time“. <\/strong><\/p>\n

Wie bekomme ich bei diesem Daten Mix aus vielen Bildern und Javascript trotzdem schnelle Ladezeiten und ein geringes Datenvolumen hin?<\/em><\/p><\/blockquote>\n

Eine m\u00f6gliche L\u00f6sung ist dabei eigentlich ganz einfach mit Apache 2 „Bordmitteln“ zu realisieren!
\n<\/p>\n

Dojos „Shrinksafe“ Tool f\u00fcr kompaktes js & CSS<\/h2>\n

Nun aber zu den Pain-Points: Da ein Gro\u00dfteil der Inline-CMS Funktionalit\u00e4ten auf Dojo<\/a> basieren und somit als JS-Library immer geladen und eingebunden werden m\u00fcssen, entstehen an dieser Stelle betr\u00e4chtliche Datenpakete, die sich durch die Leitung qu\u00e4len. Dojo wird bereits in mehreren Layern ausgeliefert, um immer nur die Funktionen zu laden, die auch ben\u00f6tigt werden. Dar\u00fcber hinaus sind alle JS und CSS Dateien mit Dojos „Shrinksafe“ Tool „Minified“ worde. Seitens der Anwendung konnte also kein weiteres Sparpotenzial realisiert werden.<\/p>\n

Apache Direktiven erh\u00f6hen Performance & Geschwindigkeit<\/h2>\n

An dieser Stelle tritt die Analyse mit Googles tollem „Page Speed<\/a>“ Plugin f\u00fcr Firebug in Aktion. Einige Analysen sp\u00e4ter gelangte ich mit folgenden Apache Direktiven zu einem bemerkenswerten Erfolg. Der Aufwand ist dabei minimal.
\n
\n<IfModule mod_expires.c>
\nExpiresActive On
\nExpiresByType image\/gif \"access plus 1 month\"
\nExpiresByType image\/png \"access plus 1 month\"
\nExpiresByType image\/jpeg \"access plus 1 month\"
\nExpiresByType text\/css \"access plus 1 month\"
\nExpiresByType text\/javascript \"access plus 1 month\"
\nExpiresByType application\/x-javascript \"access plus 1 month\"
\nExpiresByType application\/javascript \"access plus 1 month\"
\nExpiresByType application\/x-shockwave-flash \"access plus 1 month\"
\n<\/IfModule>
\n<IfModule mod_deflate.c>
\nAddOutputFilterByType DEFLATE text\/html text\/plain text\/xml text\/css application\/javascript text\/javascript
\n<\/IfModule>
\n<\/code><\/p>\n

Mit ISPConfig<\/strong>: Diese Anweisungen kopiert man einfach in das „Apache Direktiven“ Feld im „Optionen“ Reiter der jeweiligen Seite und wartet eine Minute, bis die Einstellungen \u00fcbernommen wurden.
\nOhne ISPConfig<\/strong>: Entsprechend in die vhost Config Datei unter \/etc\/apache2\/sites-available\/NAME<\/em>.vhost einf\u00fcgen und den Indianer neustarten oder die Configs refreshen. (NAME = Adresse des vhosts)<\/p>\n

L\u00f6sung: Cache & komprimierte \u00dcbertragung (mod_deflate)<\/h2>\n

Was bewirken diese simplen Einstellungen? <\/em><\/p><\/blockquote>\n

Zweierlei: Einerseits werden die angegebenen Dateitypen mit einem „Expires“ Header versehen, so dass Browser, dies dieses zulassen, die Daten zwischenspeichern (=cachen) und nicht erneut abrufen brauchen. Hierbei werden alle Daten einen Monat lang zwischengespeichert und danach ein mal neu abgerufen. Sofern sich etwas ver\u00e4ndert hat, werden die Dateien nat\u00fcrlich neu abgerufen.<\/p>\n

Die zweite Funktion aktiviert die komprimierte \u00dcbertragung von allen m\u00f6glichen Dateitypen. Hier g\u00e4be es als Alternative noch mod_gzip, welcher allerdings von Hand nachinstalliert werden muss, w\u00e4hrend mod_deflate standardm\u00e4\u00dfig mit installiert ist. Sollte sich nichts tun, k\u00f6nnte es sein, dass die entsprechenden Apache-Module nicht aktiviert sind.<\/p>\n

Daf\u00fcr einfach mal per SSH \/ Shell auf dem Server anmelden und folgende Befehle absetzen:
\n
\na2enmod deflate
\na2enmod expires
\n<\/code><\/p>\n

Hier aber mal die Ergebnisse von unserer neuen AMFramework Installation:<\/p>\n

Als Gast <\/strong>auf der Seite („Standardseite“ mit einigen Bildern):<\/p>\n

    \n
  • vorher: ~480kb<\/li>\n<\/ul>\n
      \n
    • mit \u00c4nderungen: ~140kb (beim ersten Laden, danach alles direkt aus dem Cache!)<\/li>\n<\/ul>\n

      Als Administrator <\/strong>auf der Seite (gleiche Seite):<\/p>\n

        \n
      • vorher: ~1,3MB<\/li>\n<\/ul>\n
          \n
        • mit \u00c4nderungen: ~450kb<\/li>\n<\/ul>\n

          Minimaler Aufwand – Maximaler Effekt<\/h2>\n

          Mit einem Aufwand von nur knapp einer Minute<\/strong> kann hier das Datenvolumen um ein Vielfaches reduziert werden. Auch ohne Caching werden so 2\/3<\/strong> der vorher \u00fcbertragenen Daten eingespart (Als Administrator knapp 1MB PRO \u00dcbertragung!). Daraus ergibt sich eine win\/win Situation! W\u00e4hrend der Besucher sehr verk\u00fcrzte Ladezeiten erf\u00e4hrt, sparen wir auf Seiten des Servers an Rechenleistung und Traffic.<\/p>\n

          Sch\u00f6n wie einfach sparen sein kann, oder?<\/p>\n

          Wir machen auch ihre Webseite schneller!<\/h2>\n

          Hat Ihre Webseite auch Performance Probleme? Das wirkt sich nicht nur auf die Benutzerzahlen aus, sonder mittlerweile auch auf das Ranking in den Suchmaschinen, wie z.B. Google. Die schlechte Performance Ihrer Seite merken Sie somit direkt im Geldbeutel. Au\u00dferdem kostet weniger Traffic nat\u00fcrlich weniger Geld = doppelt sparen.<\/p>\n

          Gerne machen wir eine kurze Analyse der Geschwindigkeit Ihrer Webseite und kl\u00e4ren Sie \u00fcber m\u00f6gliches Potential zur Verbesserung der Performance auf. Ihre Besucher, Google & der Geldbeutel wird Ihnen dankbar sein.<\/p>\n","protected":false},"excerpt":{"rendered":"

          Die Ausgangslage Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes „AMFramework“, dem auf PHP basierenden Entwicklungsframework mit Inline-Editing Content-Management Funktionalit\u00e4ten. Dar\u00fcber hinaus handelt es sich bei dem neuen Projekt um eine lebendige, sehr Bilder-lastige Seite, bei der locker mal einige MB an bereits komprimierten Bildern in die Leitung […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[6,8,9,12,13,16,22,23,25,26,27,28,32,33,37,42],"yoast_head":"\nApache Feintuning - Schnellere Ladezeiten f\u00fcr Ihre Webseite - Hive-IT GmbH<\/title>\n<meta name=\"description\" content=\"Die Ausgangslage Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes "AMFramework", dem auf PHP\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/\",\"url\":\"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/\",\"name\":\"Apache Feintuning - Schnellere Ladezeiten f\u00fcr Ihre Webseite - Hive-IT GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/hive-it.de\/#website\"},\"datePublished\":\"2010-06-23T14:45:19+00:00\",\"dateModified\":\"2010-06-23T14:45:19+00:00\",\"author\":{\"@id\":\"https:\/\/hive-it.de\/#\/schema\/person\/24ea202c576304e899b1f025490b6a5b\"},\"description\":\"Die Ausgangslage Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes \\\"AMFramework\\\", dem auf PHP\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hive-it.de\/#website\",\"url\":\"https:\/\/hive-it.de\/\",\"name\":\"Hive-IT GmbH\",\"description\":\"Webserver Planung, Betrieb und Optimierung f\u00fcr Enterprise WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hive-it.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hive-it.de\/#\/schema\/person\/24ea202c576304e899b1f025490b6a5b\",\"name\":\"Jan\",\"sameAs\":[\"Jan\"],\"url\":\"https:\/\/hive-it.de\/author\/jan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apache Feintuning - Schnellere Ladezeiten f\u00fcr Ihre Webseite - Hive-IT GmbH","description":"Die Ausgangslage Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes \"AMFramework\", dem auf PHP","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/","twitter_misc":{"Verfasst von":"Jan","Gesch\u00e4tzte Lesezeit":"4 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/","url":"https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/","name":"Apache Feintuning - Schnellere Ladezeiten f\u00fcr Ihre Webseite - Hive-IT GmbH","isPartOf":{"@id":"https:\/\/hive-it.de\/#website"},"datePublished":"2010-06-23T14:45:19+00:00","dateModified":"2010-06-23T14:45:19+00:00","author":{"@id":"https:\/\/hive-it.de\/#\/schema\/person\/24ea202c576304e899b1f025490b6a5b"},"description":"Die Ausgangslage Ein aktuelles Projekt, welches in den n\u00e4chsten Tagen online geht, setzt dabei auf unser Hauseigenes \"AMFramework\", dem auf PHP","inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hive-it.de\/2010\/06\/23\/ladezeiten-apache-tuning-php-javascript-css\/"]}]},{"@type":"WebSite","@id":"https:\/\/hive-it.de\/#website","url":"https:\/\/hive-it.de\/","name":"Hive-IT GmbH","description":"Webserver Planung, Betrieb und Optimierung f\u00fcr Enterprise WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hive-it.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/hive-it.de\/#\/schema\/person\/24ea202c576304e899b1f025490b6a5b","name":"Jan","sameAs":["Jan"],"url":"https:\/\/hive-it.de\/author\/jan\/"}]}},"_links":{"self":[{"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":0,"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"wp:attachment":[{"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hive-it.de\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}