Because Speed Matters - Peformance-Thread

unkown-6363 · 8. Juni 2014

Hallo Leute,
Ich dachte wir können hier mal einen Diskussions-Thread starten über Performance. Das ganze ist natürlich Themenübergreifend über Server, PHP, Dateigröße, ...
Wir können uns unterhalten über die optimalen Browser-Caching-Verfahren (Expires/max-age)/(last-modified/etag), Dateigröße minimieren, komprimierte Übertragung, ...

Wichtige Ressourcen sind unter anderem:

https://developers.google.com/speed/pagespeed/insights/ Google Page-Speed Analyse-Tool; das bewertet nach diesen Regeln (auf Deutsch vorhanden): https://developers.google.com/speed/docs/insights/rules
https://developers.google.com/speed/articles/ Mehrere interessante Artikel der Google Developers, die sich zwar teilweise mit den Regeln des Analyse-Tools (oben verlinkter Artikel) überschneiden, aber teilweise auch interessante und neue Gedanken einbringen!
http://www.initializr.com/builder?print&h5bp-htaccess htaccess von den fähigen Leuten bei Inizializr
http://www.feedthebot.com/pagespeed/enable-compression.html Beispiel für Serverseitige GZIP-Komprimierung in htaccess

Meine bisherigen wichtigsten Erfahrungen sind:

Serverseitige Komprimierung --> Eintrag in .htaccess mit Ouput-Filter für DEFLATE oder GZIP
statische Dateien komprimieren, also Kommentare entfernen, (doppelte)Leerzeichen, Zeilenumbrüche, ...
Browser-Caching

Das "Problem" ist, dass man da so viele Konfigurationsmöglichkeiten hat, dass man kaum weiß, was denn nun optimal ist.

Meine derzeitige .htaccess auf dem Server; auf das wesentliche gekürzt:

Code

# Source: http://www.feedthebot.com/pagespeed/enable-compression.html 
# & http://www.initializr.com/builder?print&h5bp-htaccess (2014-02-05 18:00) ### gekürzt und angepasst für meinen Bedarf
<IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# ETag verhindern; Header-Größe verringern
<IfModule mod_headers.c>
    Header unset ETag
    #Header set Connection Keep-Alive # kann deaktiviert werden: Standard seit Jahren von Servern und Browsern
</IfModule>
FileETag None
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                        "access plus 1 month"
    ExpiresByType text/css                "access plus 1 month"
    ExpiresByType application/json        "access plus 0 seconds"
    ExpiresByType application/xml         "access plus 0 seconds"
    ExpiresByType text/xml                "access plus 0 seconds"
    ExpiresByType text/html               "access plus 0 seconds"
    ExpiresByType image/x-icon            "access plus 1 week"
    ExpiresByType application/javascript  "access plus 1 month"
    ExpiresByType image/gif               "access plus 1 month"
    ExpiresByType image/jpeg              "access plus 1 month"
    ExpiresByType image/png               "access plus 1 month"
    ExpiresByType image/webp              "access plus 1 month"
    ExpiresByType video/webm              "access plus 1 month"
    ExpiresByType application/atom+xml    "access plus 1 hour"
    ExpiresByType application/rss+xml     "access plus 1 hour"
    ExpiresByType application/x-font-ttf  "access plus 1 month"
    ExpiresByType image/svg+xml           "access plus 1 month"
</IfModule>

Alles anzeigen

Kennt jemand von euch die .htaccess von initializr? Die Jungs und Mädels dort scheinen echt Ahnung zu haben, aber in ihrer htaccess (http://www.initializr.com/builder?print&h5bp-htaccess -08-06-2014 15:00 Uhr) verwenden sie "nur" DEFLATE anstatt GZIP.

Code

<IfModule mod_deflate.c>
    # Force compression for mangled headers.
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>
    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/ld+json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>
</IfModule>

Alles anzeigen

Was hat ihr für Tipps, Meinungen, Erfahrungen, ... zu Komprimierung? (vor allem Serverseitig)

PS: wäre cool, wenn wir das Thema hier so aufbohren, wie damals PHP5-Hashing

The Scout · 8. Juni 2014

Wenn es darum geht, kann ich für die "manuelle" Optimierung nur das ANT Build Script empfehlen: GitHub ANT

Hier mal eine (grobe) Übersetzung der Features:

Zitat

Kombiniert und minimiert JavaScript (via Closure Compiler)

Fügt via @import spezifizierte CSS in die aktuelle Datei ein

Kombiniert und miniert CSS (via YUI Compressor)

Optimiert JPGs und PNGs (mit jpegtran, advpng & optipng)

Grundlegende bis aggressive HTML Komprimierung (via htmlcompressor)

Überarbeitet die Dateinamen der Anlagen, so dass "heavy caching" genutzt werden kann (1 year expires).

Aktualisiert die HTML, damit auf die neuen, optimierten CSS & JS zu verweisen

Aktualisiert die HTML, um auf die minifizierte jQuery, anstatt der Developerversion, zu verweisen

Entfernt unnötige Verweise aus der HTML (zB root folder Favicons)

(Optional) Überprüft das JS mit einem Qualitätstool, wie JSLint oder JSHint

(Optional) Überprüft das CSS mit einem Qualitätstool, CSSLint

Cache-busting support for a module directory (wie übersetzt man das am Blödsten?)

(Optional) Vorkompilieren von LESS CSS Dateien

(Optional) Vorkompilieren von SASS CSS dateien

(Optional) Erstellt eine JSDOC3 Dokumentation

(Optional) Konvertiert JPGs zu progressive JPGs

(Optional) Validiert das HTML

(Optional) Markiert Skripte als "async" oder "defer"

Ansonsten, zur Serveroptimierung, wie schon erwähnt, die .htaccess von initializr.com. Sehr schön (auf englisch) auskommentiert, wodurch man als Nutzer gut nachvollziehen kann, was geboten wird, und dementsprechend auch selbst nachjustierbar.
Und sonst ist bestimmt noch der HTML 5 AppCache für statischen Inhalt sehr interessant.

unkown-6363 · 8. Juni 2014

Das sieht interessant aus! Mal anschauen, danke The Scout: !

The Scout · 9. Juni 2014

Übrigens glaube ich mal gelesen zu haben, dass bei initializr nur DEFLATE kommt, weil nicht alles Browser GZIP beherrschen und nur weiße Seiten rendern würden. Aber ich weiß nicht mehr, wo ich das her habe

unkown-6363 · 9. Juni 2014

und mod_gzip ist nicht auf allen Servern installiert. Auf noch wenigern als das DEFLATE zeuch

Because Speed Matters - Peformance-Thread

Jetzt mitmachen!

Teilen