Home / Tag Archives: CSS Tipps

Tag Archives: CSS Tipps

CSS Sprite Generator

Für die Erstellung von CSS Sprites braucht man kein Fachmann, bzw. Webdesigner sein. Mittels einfacher Online-Tools lassen sich solche kombinierten Bilder sehr schnell und problemlos erstellen. Im Folgenden stellen wir Euch den CSS Sprite Generator von website-performance.org etwas genauer vor. Der Generator kann kostenlos direkt online im Browser genutzt werden. …

Komplett lesen »

CSS in den Dokumentkopf

Wenn eine oder mehrere CSS-Dateien in dem Quellcode einer Webseite eingebunden werden müssen, dann hat dies in dem HEAD-Bereich zu erfolgen. Eine Einbindung der CSS-Dateien innerhalb des BODY-Bereiches ist zwar technisch möglich, kann die Darstellungsleistung jedoch unter Umständen beeinträchtigen. Daher sollten alle CSS-Dateien in den HEAD-Bereich einer Webseite eingetragen und …

Komplett lesen »

CSS mit PHP und GZIP komprimieren

CSS Dateien spielen bei vielen Webseiten eine entscheidende Rolle und Größe bei der Ladezeit. Da viele CSS Dateien die Größe von 10 kB überschreiten, lohnt es sich nach einer Variante der Komprimierung für diese CSS Dateien zu suchen. Mittels PHP und GZIP lässt sich schnell eine effektive Komprimierung und damit …

Komplett lesen »

CSS Dateien mit PHP zusammenfassen

Wird ein Projekt größer und besteht aus verschiedenen Designelementen, dann kann es schnell sehr unübersichtlich für den Webmaster und Designer werden, falls alle CSS-Klassen in einer CSS-Datei zusammengeführt werden. Dann ist es übersichtlicher mehrere CSS-Dateien zu erstellen und diese in dem HEAD-Bereich des Quellcodes nacheinander einzubinden. Doch was für die …

Komplett lesen »

@import-Funktion in CSS-Dateien vermeiden

Immer wieder setzen einige Webdesigner die @import-Funktion innerhalb der CSS-Dateien ein, um das Design aufzubauen. Damit versucht man den HTML-Quellcode der Seite möglichst kurz zu halten und nur eine CSS-Datei mittels link rel=’stylesheet‘ einzubinden. Weitere CSS-Dateien werden dann durch die @import-Funktion in die Start-CSS-Datei aufgerufen. Lösungsansätze des @import-Problems Um diesen …

Komplett lesen »

Asynchrones Laden (CSS und JS Scripte)

Seit der Einführung von google PageSpeed Insights wird bei vielen Webseiten die Meldung “JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen” angezeigt. Mit dem Tipp, das oder die betreffenden Scripte asynchrone laden zu lassen. Oftmals ist die von dem PageSpeed Insights-Tool leichter …

Komplett lesen »

Nicht verwendeter CSS-Code

Unter dem Page Speed Optimierungspunkt „nicht verwendeter CSS-Code (Remove unused CSS)“ werden alle CSS Codeschnipsel aufgelistet die auf der aktuell zu analysierenden Seite nicht verwendet werden. Dieser Analysepunkt ist somit Seitenbezogen und liefert pro Unterseite andere Ergebnisse. Bsp.: Wird die Startseite eines Projektes analysiert, können nicht verwendete form-Codezeilen (für Kontaktformular) …

Komplett lesen »

CSS-Dateien minimieren

Ein oft vernachlässigter Punkt bei der PageSpeed-Optimierung ist die Minimierung der CSS Dateien (minify CSS). Hier kann sehr schnell angesetzt und sofort sichtbare Performance-Verbesserungen erzielt werden. Das Ziel der CSS Optimierung ist die Verringerung der Größe der einzelnen CSS-Dateien. Dabei gilt, je kleiner die einzelne CSS-Datei ist, desto schneller kann …

Komplett lesen »

CSS Sprites – Bilder kombinieren

Für jedes Bild, das für das Design einer Webseite geladen wird, startet der Server eine Anfrage (eröffnet einen neuen http Request). Um diese Anfragen (http Request) zu minimieren ist die Entwicklung der CSS Sprites Technik entstanden. Was sind CSS Sprites? Unter CSS Sprites versteht man eine CSS Technik für die …

Komplett lesen »

CSS Dateien kombinieren

CSS-Dateien zu kombinieren (Combine external CSS) kann und muss bei der PageSpeed-Analyse unterschiedlich bewertet werden. Jeder Webmaster muss technologisch prüfen ob seine für das Webdesign verwendeten CSS-Dateien kombiniert werden können. Teilweise ist dies nicht möglich, vor allem bei extern eingebundenen CSS-Dateien wie z.B. über google-Adsense. Solche CSS Dateien werden per …

Komplett lesen »