wissensdurstig
Hallo werte Gemeinde,
ich steh gerade vor einem Problem, bei dem ich wohl auf externe Hilfe angewiesen bin und hoffe, dass ich hier im Forum wie immer gute Tipps erhalte.
Und zwar bin ich gerade am Fertigstellen eines Projekts und versuche nun etwas an der Geschwindigkeit zu tunen.
Habe deswegen meine Seite von GTMetrix (http://gtmetrix.com/) analysieren lassen und daraufhin bekam ich folgendes Resultat:
(Auszug)
Recommendation Grade
Type Priority Combine images using CSS sprites F (0)
59%
Images Medium Leverage browser caching F (0)
54%
Server High Specify image dimensions F (44)
50%
Images High Inline small CSS E (50)
93%
CSS High
Alles andere war zwichen 95-100% also, nicht optimierungsbedürftig. Also, nun stehe ich vor dem Problem, vor allem 2 Dinge zu verbessern:
1. Browser Caching beim User einzuschalten, und
2. Meine Seite mithilfe von CSS-Sprites zu entschlanken.
Nun habe ich mich in die Materie eingelesen und habe bereits die -htaccess Datei bearbeitet, aber heraus kam nicht das gewünschte Resultat. Zwar habe ich meinen Score von 0 auf 7% verbessert, aber immernoch meldet GTMetrix zig Files an, die noch in die Datei aufgenommen werden sollten:
Weiß jemand, was ich falsch gemacht habe?
2. Ich habe erstmal eine grundsätzliche Frage zu dem Thema CSS-Sprite. Es gibt ja im Netz kostenlose Tools die einem eine "gespritete" Bild-Datei erstellen und den neuen CSS-Code generieren.
Wenn mein altes, also einzelnes Bild bereits Attribute wie background-position, padding, margin etc besitzt, muss ich dann die neuen background-position Werte dazurechnen bzw. abziehen? Muss ich die Padding, - und Margin-Werte drinlassen oder wegmachen?
Ich hab mal eine Seite testweise bearbeitet und da hat es mir natüürlich gleich vollkommen das Design zerschossen. Hab's wieder rückgängig gemacht, kann also nicht mit Code dienen. Muss mich da wohl erst noch etwas Schlau machen.
Also, nun meine eigentlich Frage: Gibt es eine Best-practice Methode wie man den neuen CSS Code möglichst fehlerfrei umsetzt ohne alte Einstellungen zu überschreiben?
Wie macht ihr sowas?
Vielen Dank schon mal im Voraus für eure Hilfe und für's Zeitnehmen!
ich steh gerade vor einem Problem, bei dem ich wohl auf externe Hilfe angewiesen bin und hoffe, dass ich hier im Forum wie immer gute Tipps erhalte.
Und zwar bin ich gerade am Fertigstellen eines Projekts und versuche nun etwas an der Geschwindigkeit zu tunen.
Habe deswegen meine Seite von GTMetrix (http://gtmetrix.com/) analysieren lassen und daraufhin bekam ich folgendes Resultat:
(Auszug)
Recommendation Grade
Type Priority Combine images using CSS sprites F (0)
59%
Images Medium Leverage browser caching F (0)
54%
Server High Specify image dimensions F (44)
50%
Images High Inline small CSS E (50)
93%
CSS High
Alles andere war zwichen 95-100% also, nicht optimierungsbedürftig. Also, nun stehe ich vor dem Problem, vor allem 2 Dinge zu verbessern:
1. Browser Caching beim User einzuschalten, und
2. Meine Seite mithilfe von CSS-Sprites zu entschlanken.
Nun habe ich mich in die Materie eingelesen und habe bereits die -htaccess Datei bearbeitet, aber heraus kam nicht das gewünschte Resultat. Zwar habe ich meinen Score von 0 auf 7% verbessert, aber immernoch meldet GTMetrix zig Files an, die noch in die Datei aufgenommen werden sollten:
Hier ist der Auszug meiner .htacceess Datei:
Code:
<IfModule mod_headers.c>
<FilesMatch “\.(js|css)$”>
Header set Cache-Control “max-age=86400, public”
</FilesMatch>
<FilesMatch “\.(gif|png|jpg|jpeg|pdf|ico)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css M5259487
ExpiresByType text/javascript M5259487
ExpiresByType application/x-javascript M5259487
ExpiresByType image/jpeg M5259487
ExpiresByType image/png M5259487
ExpiresByType image/gif M5259487
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>2. Ich habe erstmal eine grundsätzliche Frage zu dem Thema CSS-Sprite. Es gibt ja im Netz kostenlose Tools die einem eine "gespritete" Bild-Datei erstellen und den neuen CSS-Code generieren.
Wenn mein altes, also einzelnes Bild bereits Attribute wie background-position, padding, margin etc besitzt, muss ich dann die neuen background-position Werte dazurechnen bzw. abziehen? Muss ich die Padding, - und Margin-Werte drinlassen oder wegmachen?
Ich hab mal eine Seite testweise bearbeitet und da hat es mir natüürlich gleich vollkommen das Design zerschossen. Hab's wieder rückgängig gemacht, kann also nicht mit Code dienen. Muss mich da wohl erst noch etwas Schlau machen.
Also, nun meine eigentlich Frage: Gibt es eine Best-practice Methode wie man den neuen CSS Code möglichst fehlerfrei umsetzt ohne alte Einstellungen zu überschreiben?
Wie macht ihr sowas?
Vielen Dank schon mal im Voraus für eure Hilfe und für's Zeitnehmen!
Zuletzt bearbeitet:
