• Haupt / Wie Man

5 Tipps für superschnelles CSS

Haben Sie über die Größe des CSS Ihrer Website nachgedacht? Wenn Ihr Stylesheet im Ballon aufsteigt, kann dies das Rendern von Seiten verzögern.

• 16 Top-Beispiele für CSS-Animationen

Obwohl CSS nicht der größte Asset-Typ ist, den Sie bereitstellen, ist es einer der ersten, den der Browser erkennt. Da der Browser das Rendern der Seite blockiert, bis CSS heruntergeladen und analysiert wird, muss sie so schlank wie möglich sein. Hier sind fünf Tipps, die Ihnen dabei helfen, dorthin zu gelangen.

Hast du eine komplexe Seite? Du brauchst das Perfekte Web-Hosting Bedienung. Oder, wenn Sie eine Site ohne viel Aufhebens erstellen möchten, versuchen Sie es mit a Webseitenersteller .

01. Verwenden Sie flache Selektoren

Deine Eltern haben dir gesagt, dass Oberflächlichkeit keine Tugend ist, aber wenn es um CSS geht, liegen sie falsch. Bei konsequenter Verwendung können flache Selektoren Kilobyte von großen Stylesheets abschneiden. Nehmen Sie diesen Selektor:

nav ul li.nav-item

Dies könnte prägnanter ausgedrückt werden:

.nav-item

Der Browser hilft nicht nur dabei, Ihr CSS schlank zu halten, sondern rendert auch die Elemente, auf die flache Selektoren abzielen, schneller. Browser lesen Selektoren von rechts nach links. Je tiefer die Selektoren sind, desto länger dauert es, bis der Browser die Elemente, auf die diese Selektoren angewendet werden, gerendert und erneut gerendert hat. Bei komplexen DOMs, die häufig reflowen, können kurze Selektoren auch den Ruck reduzieren.

Idealerweise möchten Sie, dass die Selektoren so flach wie möglich sind. Dies bedeutet jedoch nicht, dass Sie alles auf den Knochen reduzieren sollten. Manchmal benötigen Sie zusätzliche Spezifität, um Komponenten zu erweitern. Finden Sie die richtige Balance, aber seien Sie auch pragmatisch.

02. Verwenden Sie Kurzschrift-Eigenschaften

Dies scheint ein gesunder Menschenverstand zu sein, aber Sie werden überrascht sein, wie oft Langhand-Eigenschaften unnötig verwendet werden. Hier ist ein Beispiel für einige verwendete Langhand-Eigenschaften:

font-size: 1.5rem; line-height: 1.618; font-family: 'Arial', 'Helvetica', sans-serif;

Das ist viel CSS! Lassen Sie uns das aufräumen:

font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif;

Das machen Kurzschrift-Eigenschaft verdichtet mehrere Deklarationen zu einem handlichen Einzeiler, der viel weniger Platz beansprucht.

In dem oben gezeigten Beispiel verbraucht die Kurzschrift etwa 40 Prozent weniger Platz als ihr Langhandäquivalent. Es ist auf den ersten Blick nicht so lesbar, aber die Syntax wird zur zweiten Natur, nachdem Sie einige Zeit damit verbracht haben.

Na sicher, machen ist nicht die einzige Abkürzung, die Ihnen zur Verfügung steht. Zum Beispiel, Spanne kann anstelle längerer Eigenschaften wie verwendet werden Rand oben , Rand rechts und so weiter.

Das Polsterung Eigenschaft funktioniert genauso. Für weitere Möglichkeiten zum Bereinigen Ihres CSS bietet Mozilla Developer Network eine hilfreiche Liste von Kurzreferenz für Immobilien .

Was ist, wenn Sie einen Wert weiter unten in der Kaskade überschreiben müssen? Angenommen, Sie haben ein Überschriftenelement, dessen Schriftgröße für größere Anzeigen geändert werden muss.

In diesem Fall sollten Sie die spezifischere verwenden Schriftgröße Eigenschaft stattdessen:

h1{ font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif; } @media (min-width: 60rem){ h1{ font-size: 2rem; } }

Dies ist nicht nur praktisch, sondern erhöht auch die Flexibilität der Komponenten. Wenn irgendein anderer Teil des Basiswerts machen Wenn die Eigenschaft geändert wird, werden diese Änderungen auf größere Anzeigen übertragen. Dies eignet sich hervorragend für Komponentenüberschreibungen, bei denen ein neuer Kontext eine andere Behandlung erfordert.

03. Verwenden Sie den Hinweis zum Vorladen der Ressource

Das Vorspannung Ein Ressourcenhinweis kann dem Browser einen Vorsprung beim Laden des CSS Ihrer Site verschaffen. Das Vorspannung Der Ressourcenhinweis weist den Browser an, einen frühen Abruf für ein Asset einzuleiten.

Sie können es als einstellen Tag in HTML:

Oder als HTTP-Header in Ihrer Serverkonfiguration:

Link: ; rel=preload; as=style

In beiden Szenarien Vorspannung gibt dem Browser einen Vorsprung beim Laden /css/styles.css . Verwenden von Vorspannung In einem HTTP-Header ist dies vorzuziehen, da dies bedeutet, dass der Browser den Hinweis früher in den Antwortheadern als später im Antworttext erkennt.

Ein weiterer Grund zu verwenden Vorspannung In einem HTTP-Header wird bei den meisten HTTP / 2-Implementierungen ein Server-Push-Ereignis ausgelöst. Server-Push ist ein Mechanismus, mit dem Assets bei Anforderungen an Inhalte präventiv an den Client gesendet werden. Er bietet ähnliche Leistungsvorteile wie Inlining-CSS.

Server-Push ist unter HTTP / 1 nicht verfügbar. Jedoch mit Vorspannung In einer HTTP / 1-Umgebung kann die Leistung noch verbessert werden.

04. Redundanzen mit csscss beseitigen

Es kann sich lohnen, Ihr CSS mit einem Redundanzprüfer auf doppelte Regeln zu überprüfen. Nehmen Sie zum Beispiel das Ruby-basierte Tool csscss.

Ruby-Benutzer können es installieren mit:

gem install csscss

Nach der Installation können Sie Ihr CSS auf Redundanzen wie folgt untersuchen:

csscss -v styles.css

Dieser Befehl listet auf, welche Selektoren Regeln gemeinsam nutzen, die Sie aus Platzgründen de-duplizieren können:

{h1} AND {p} share 3 declarations - color: #000 - line-height: 1.618 - margin: 0 0 1.5rem

Sie können doppelte Regeln unter einem Selektor verschieben:

h1, p{ color: #000; line-height: 1.618; margin: 0 0 1.5rem; }

Sie wären überrascht, wie viel Platz dieser Prozess in großen Projekten einsparen kann. Verwenden Sie die --Hilfe Option, um weitere Befehle anzuzeigen, mit denen Sie die Dinge weiter optimieren können.

05. Gehen Sie mit cssnano die Extrameile

Für die Kirsche oben können Sie verwenden cssnano - ein Knoten und ein PostCSS-abhängiges Tool. cssnano minimiert nicht nur CSS, sondern führt auch viele gezielte Optimierungen durch, die Ihr CSS noch weiter reduzieren können. Installieren Sie es auf Ihrem System mit npm wie folgt:

npm i -g cssnano-cli

Verwenden Sie es dann, um Ihr CSS zu optimieren:

cssnano styles.css optimized-styles.css

Wenn das Ausführen von Befehlen ad hoc nicht Ihr Stil ist, können Sie cssnano mit einem Build-System automatisieren. So verwenden Sie cssnano in einem Gulpfile:

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const cssnano = require('cssnano'); const buildCSS = ()=>{ return gulp.src('css/styles.css') .pipe(postcss([cssnano()]) .pipe(gulp.dest('css/optimized')); }; const watch = ()=>{ gulp.watch('css/styles.css', buildCSS); }; exports.buildCSS = buildCSS; exports.watch = watch;

Das buildCSS Aufgabe liest das CSS, in das Sie schreiben css / styles.css leitet dann die optimierte Ausgabe an die weiter CSS / optimiert Verzeichnis. Das sehen Aufgabe beginnt buildCSS wann immer Änderungen in auftreten css / styles.css .

Das sehen Die Aufgabe kann dann im Terminal wie folgt aufgerufen werden:

gulp watch

Mit einigen Optimierungen können Sie einen Workflow erstellen, der diese spezifische Optimierung zusätzlich zu anderen CSS-bezogenen Aufgaben wie dem Erstellen von Sass / Less-Dateien, dem automatischen Fixieren und mehr ausführt.

Möchten Sie Ihre Webseiten speichern? Als PDF exportieren und zuverlässig speichern Cloud-Speicher .

Dieser Artikel erschien ursprünglich in Netz , das weltweit führende Magazin für Webdesigner. Abonnieren Sie hier .

Zum Thema passende Artikel:

• Grundlegendes zur CSS-Anzeigeeigenschaft
• Die neue Grenze der CSS-Animation
• So erstellen Sie komplexe Layouts mit CSS