mod expires Einstellungen für CSS/JS

TheRiddler1982

Cadet 2nd Year
Registriert
Nov. 2012
Beiträge
27
Hi zusammen,

ich versuche gerade meine Seite (www.ziin.de) zu optimieren und nutze dafür Google Pagespeed. Das Ergebnis sagt unter anderem:

Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
https://maps.googleapis.com/maps/api/js?sensor=false (30 Minuten)
http://www.google-analytics.com/ga.js (2 Stunden)
http://ziin.de/…egories-widget/3.6/css/avh-ec.widget.css (24 Stunden)
http://ziin.de/…nt/themes/twentyfourteen/js/functions.js (24 Stunden)
http://ziin.de/…content/themes/ziin/js/video-js/video.js (24 Stunden)

Ich habe bereits bei mir in der .htaccess folgendes eingetragen:

<IfModule mod_expires.c>

ExpiresActive on
ExpiresDefault "access plus 1 month"

# CSS
ExpiresByType text/css "access plus 1 year"

# JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
...

aber trotzdem habe ich bei den Ergebnissen dastehen, dass er will, dass ich das cachen soll.

Wie kann ich denn das Problem mit den externen Ressourcen lösen?
https://maps.googleapis.com/maps/api/js?sensor=false (30 Minuten)
http://www.google-analytics.com/ga.js (2 Stunden)

Kann ich das auch steuern?

Was mach ich falsch?

Danke!
 
Hi,
was das Cachen von externen Ressourcen angeht, kannst Du glaube ich nicht mehr viel tun.
Du könntest aber mal darüber nachdenken, die Assets, die Dein Server ausliefert mit Hilfe eines Wordpress-Plugins wie "Autoptimize" zu bündeln.
Das sollte nochmal an der Performance-Schraube drehen.
Ebenso hilft möglicherweise "ZenCache" die Performance deiner Wordpress-Instanz zu verbessern.

Worüber Du Dir meiner Meinung nach mehr Gedanken machen solltest ist das Video.
Beim ersten Besuch Deiner Seite werden da ungefragt 10 MB geladen.
Das mag am Desktop mit guter Verbindung relativ unkritisch sein.
Aber stell Dir mal vor, dass jemand im Zug mit einer 3G-Verbindung über deine Seite stolpert.
Derjenige muss 2,5 Minuten (!) warten, bis Deine Webseite so aussieht und benutzbar ist, wie Du Dir das wünschst.
Würdest Du so lange warten, oder lieber eine andere (schnellere) Seite ansurfen?

Ich würde hier empfehlen, ein Bild zu verlinken und erst bei Klick/Tap anfangen das Video zu laden.

Generell würde ich Dir empfehlen, Deine Webseite mal mit einem Smartphone zu betrachten und zumindest rudimentär für bestimmte Display-Größen das Layout entsprechend anzupassen.

Wenn Du dazu noch Fragen hast, immer her damit ;)
 
Was die externen Ressourcen angeht: Gar nicht.

Was die eigenen Ressourcen angeht: Schau doch selbst mal, was für ein Header geschickt wird. Evtl. ist Pagespeed auch einfach lahm, oder aber deine Konfiguration hat noch Macken.
Insgesamt wäre es aber sinniger, auf ETAGs zu setzen. Das kostet den User zwar einen zusätzlichen Roundtrip, der dann aber in der Regel mit nem NOT MODIFIED beantwortet wird. Im Gegenzug reagieren die Browser deiner Besucher auch sofort auf Änderungen an den Styles/Scripts, und nicht erst nach nem Jahr. Stell dir mal vor, dein Expires-Header würde tatsächlich funktionieren, aber du müsstest jetzt wegen eines Bugs oder gar einer Sicherheitslücke z.B. deine functions.js ändern. Deine User würden noch ein Jahr mit ihrer alten Version im Cache verbleiben....

Was du insgesamt falsch gemacht haben könntest? Deine ExpiresByType - DEklaration könnte u.U. nicht greifen, weil du die korrekten MIME-Types nicht gesetzt hast.

Code:
<IfModule mod_mime.c>
  AddType application/javascript              js jsonp
  AddType application/json                    json
  AddType audio/ogg                           oga ogg
  AddType audio/mp4                           m4a f4a f4b
  AddType video/ogg                           ogv
  AddType video/mp4                           mp4 m4v f4v f4p
  AddType video/webm                          webm
  AddType video/x-flv                         flv
  AddType image/svg+xml                       svg svgz
  AddEncoding gzip                            svgz
  AddType application/vnd.ms-fontobject       eot
  AddType application/x-font-ttf              ttf ttc
  AddType font/opentype                       otf
  AddType application/x-font-woff             woff woff2
  AddType image/x-icon                        ico
  AddType image/webp                          webp
  AddType text/cache-manifest                 appcache manifest
  AddType text/x-component                    htc
  AddType application/xml                     rss atom xml rdf
  AddType application/x-web-app-manifest+json webapp
  AddType text/x-vcard                        vcf
  AddType application/x-shockwave-flash       swf
</IfModule>
Ergänzung ()

funkmasterflow schrieb:
Worüber Du Dir meiner Meinung nach mehr Gedanken machen solltest ist das Video.
Beim ersten Besuch Deiner Seite werden da ungefragt 10 MB geladen.
Das mag am Desktop mit guter Verbindung relativ unkritisch sein.
Aber stell Dir mal vor, dass jemand im Zug mit einer 3G-Verbindung über deine Seite stolpert.

Ja, Riesen-Videos gehören nicht auf Webseiten, schon gar nicht als Autoload. Meine <2MBit Dorf-DSL hier hängt bei der Seite ebenfalls komplett in der Luft.
ABER: Tatsächlich ist Autoplay (Audio/Video) für Smartphones/Tablets kein Problem. Sowohl iOS Safari als auch Chrome und der Android-Browser auf Android-Devices lassen keinerlei Autoplay zu. Geht einfach nicht.
 
Ich rede auch nicht von Autoplay ;)
Wenn ich das richtig gesehen habe (Chrome Developer Tools) werden erstmal 10MB abgeholt, ohne das das Video läuft.
Wenn man es dann abspielt, werden über 100 MB geladen.
 
Auch dieses Prefetching dürfte auf iOS/Android nicht statt finden. Nach meinen Tests in letzter Zeit werden nur Metadaten automatisch gelesen. Alle weiteren Daten übertragen erst, wenn eine tatsächliche User-Interaktion statt findet.
 
Ok, mag sein.
Wie gesagt, habe das nur eben in den Dev-Tools gesehen und nicht weiter verifiziert.
Wenn das so ist, wie Du sagst, dann ist ja alles gut (was das Thema Autoplay/Prefetching angeht) ;)
 
Hi zusammen,

danke für die zahlreichen Antworten!

Also das mit dem Autoplay habe ich nun gefixt. Das war eine HTML5 Player Einstellung. Nutze den VideoJS Player. Habe Preload="None" eingestellt. Somit werden keine 10MB mehr geladen, sondern nur die 4MByte, was immer noch gewaltig viel ist.

Habe nun auch ein Caching-Plugin (WP Fastest Cache) installiert, vielen Dank für den Tipp. Hier werden anscheinend die richtigen .htaccess Einstellungen gesetzt. Es verschwinden alle internen Dateien. Habe aber trotzdem noch die MIME Typen, wie vorgeschlagen, mit aufgenommen.

Ich weiß, ich habe noch keine Smartphone-Version. Das ist auch aktuell nicht meine Zielgruppe. Ich verdiene mein Geld mit der Dienstleistung "Foto". Die Leute, die mich buchen, schauen in der Regel nur über Desktop und Notebooks auf meine Seite.


Ich bin nicht Entwickler der Seite, habe keine Erfahrung mit HTML, PHP, CSS und JS. Die Seite habe ich in Auftrag gegeben. Kleinigkeiten versuche ich selbst durch Herumprobieren und Google zu lösen.

Jedoch habe ich ein paar Probleme, vor allem mit der Startseite, was sowohl Performance als auch Verhalten angeht. Auch das Wordpress Backend ist extrem langsam. Ich habe einen eigenen Rootserver (Debian 8.0) und kann eigentlich jede fiese Sache machen, wenn ich nur wüsste, welche :-).

Daher eine ernste Frage an euch: ich würde einen Auftrag vergeben wollen zur Optimierung Frontend/Backend in Verbindung mit Wordpress. Falls jemand von euch sehr gute Erfahrung darin hat, würde ich mich über eine PN freuen und dann könnte man alles weitere per Mail/Telefon besprechen!
 
TheRiddler1982 schrieb:
Ich weiß, ich habe noch keine Smartphone-Version. Das ist auch aktuell nicht meine Zielgruppe. Ich verdiene mein Geld mit der Dienstleistung "Foto". Die Leute, die mich buchen, schauen in der Regel nur über Desktop und Notebooks auf meine Seite.
Das glaubst du auch nur, weil deine Seite auf Mobile Devices nicht anständig läuft und die Leute also direkt abspringen.
Sobald du eine ANSTÄNDIGE Responsive-Lösung mit viel schlankerem Datenaufkommen einbaust, wird dein Nutzerprofil massiv kippen, du wirst bei wenigstens 40% Hits über Mobile Devices landen. Wir haben Seiten erstellt, die inzwischen bei 70-75% Mobile-Anteil sind.

Ich bin nicht Entwickler der Seite, habe keine Erfahrung mit HTML, PHP, CSS und JS. Die Seite habe ich in Auftrag gegeben. Kleinigkeiten versuche ich selbst durch Herumprobieren und Google zu lösen.
Dann würde ich der Firma, die das Ding verbrochen hat, mal die Hölle heiß machen. Responsive Design war vielleicht vor 3-4 Jahren noch "nett, wenn man es hätte", heute gehört gut gemachtes RD einfach zu den Mindestanforderungen an eine neue Webpräsenz.

Kümmert sich wenigstens irgend jemand, der sich mit der Materie auskennt, um die drölfzillionen Sicherheitslücken, die Wordpress-Installationen so gerne mitbringen?

Jedoch habe ich ein paar Probleme, vor allem mit der Startseite, was sowohl Performance als auch Verhalten angeht. Auch das Wordpress Backend ist extrem langsam. Ich habe einen eigenen Rootserver (Debian 8.0) und kann eigentlich jede fiese Sache machen, wenn ich nur wüsste, welche :-).
Trenn dich von Wordpress, so einfach ist das. WP ist Codesuppe Deluxe und schlichtweg vollkommen unperformant.

Klar könntest du den Server umbauen, den Apache auf MPM-Worker oder gar MPM-Event umstellen. Du könntest PHP via PHP-FPM laufen lassen, im Static-Modus. Du könntest schauen, ob ein anständig konfigurierter OpCode Cache läuft. Du könntest sogar PHP durch ne HHVM ersetzen. Dann kannst du noch die gesamte Konfiguration von MySQL ersetzen (und im selben Atemzug gleich auf MariaDB 10 wechseln). Du kannst dem Server SSDs spendieren. DU kannst Memcached als Session Storage einrichten.

Am ENDE bleibt es aber bei einem einfachen Knackpunkt:
So eine Witz-Seite, mit so lächerlich unkomplizierten Funktionen, darf sich einfach nicht träge anfühlen. Der Pippifax könnte getrost bei irgend einem Shared Hoster für 5€/Monat liegen. Der Fehler ist das gewählte CMS. WP ist einfach Gülle, da fand einfach nie eine dringend notwendige Code-Bereinigung statt.

Daher eine ernste Frage an euch: ich würde einen Auftrag vergeben wollen zur Optimierung Frontend/Backend in Verbindung mit Wordpress.
Da kannst du genauso gut versuchen, einen Trabant auf 200km/h zu bringen. Es ist machbar, aber es ist viel einfacher und billiger, sich einfach ein anderes Auto zu kaufen.
 
Ok, das muss ich erst mal verdauen.

Ich patche den Server selbst + Wordpress. Ich denke, dass das Endziel schon ein CMS sein soll, da meine Hauptanwendung das Veröffentlichen von Fotos ist. Hier will ich kein Code schreiben!

Ok, machen wir Nägel mit Köpfen:

Was brauche ich für einen technischen Untergrund + CMS für eine Mobile Version/Desktop Version, CMS ähnliche Funktionalitäten, nicht für jede Funktionalität das Rad neu erfinden zu müssen, wenn ich in den saueren Apfel beißen würde und wieder von der grünen Wiese anfangen würde? Wichtig ist, dass das aktuelle Design unverändert bleibt. Nur die Technik/Umsetzung soll sich ändern.

Wie kann ich als Laie Webentwickler finden, die die von dir genannten Möglichkeiten auch können? Da ich selbst Entwickler (aber nicht für Webtechnologien) bin, kann ich schon einschätzen, ob Zeitschätzungen und Aufwände realistisch sind).

Danke nochmal fürs Feedback!
 
TheRiddler1982 schrieb:
Ich patche den Server selbst + Wordpress. Ich denke, dass das Endziel schon ein CMS sein soll, da meine Hauptanwendung das Veröffentlichen von Fotos ist. Hier will ich kein Code schreiben!
Natürlich CMS, aber eben nicht Wordpress... WP hat einen genialen Bedien-Fluss, und die Autoupdate-Funktion ist auch nicht übel. Da hörts dann aber auch auf. Der Unterbau ist eben durchweg furchtbar schlecht. Das Resultat sind dann eben Leistungseinbrüchte und Sicherheitslücken.

Was brauche ich für einen technischen Untergrund + CMS für eine Mobile Version/Desktop Version,
Es gibt keine separate Mobile Version (außer, du willst wieder unflexiblen Mist haben), es gibt nur Responsive Design. Der ideale Ansatz dabei ist "Mobile First", also beginnend mit einer sehr schlanken Darstellung (sagen wir mal: ca. 280px breit) mit Touch-Bedienfluss. Von da aus gehts immer weiter nach oben in der Auflösung und ergänzt noch Maus-Bedienflüsse, ohne den Touch-Part zu beschädigen. Sonst kommt jemand mit nem Convertible, das zwar n großes Display hat, aber trotzdem Touch-Input.

Welches CMS du dann verwendest hängt davon ab, wie viel Geld du in die Hand nehmen willst.
Ich für meinen Teil würde immer auf Contao setzen. Die Performance von Contao ist wirklich ordentlich, bricht lediglich bei sehr großen Seiten etwas weg (und das primär im Backend und auf nicht-cachebaren Frontend-Seiten). Wenn man den Frontend-Cache anständig konfiguriert, sind im Frontend Response-Zeiten von 50-60ms (Time to First Byte) durchaus realistisch, auch bei Projekten mit sehr vielen Zugriffen.
Die Strafe für Contao: Du musst damit leben, dass quasi alle 2 Jahre ein harter Schnitt erfolgt, bei dem die API von Grund auf überarbeitet wird. Dafür gibts dann eben auch Kompatibilität zu neueren PHP-Features. Außerdem gibts keinen Auto-Updater.

Aber wie gesagt: Eigener Server ist Geldverschwendung, vor allem wenn du wirklich bloß so n bisschen Foto-Pillepalle hast. Eigener Server lohnt sich, wenn du einen Webshop, ein gut besuchtes Forum oder ein News-Portal betreibst. Deine Seite sollte ein Hosting-Paket für 5-10€ problemlos in Windeseile ausliefern können.

Wichtig ist, dass das aktuelle Design unverändert bleibt. Nur die Technik/Umsetzung soll sich ändern.
Du wirst Einschnitte beim Design in Kauf nehmen müssen, da ein Responsive Design ganzheitlich entworfen werden muss. Das Endergebnis kann durchaus ähnlich sein, aber nicht identisch.

Wie kann ich als Laie Webentwickler finden, die die von dir genannten Möglichkeiten auch können?
Frag ein paar Agenturen in deiner Nähe. Schau dir vorher deren Referenzen an und denk dir dann deinen Teil dazu. Wenn deren REferenzen zu 2/3 aus Wordpress bestehen, dann kannst du die FIrma gleich von der Liste streichen.
 
Zurück
Oben