So optimieren Sie die CSS-Bereitstellung – 7 einfache Schritte

CSS-Optimierung VektorbildVorbei sind die Zeiten, in denen Designexperten und branchenführende Blogger empfohlen haben, Webseiten mit nicht mehr als 30 Kilobyte zu erstellen.

Damals sollte diese „Kappe“ HTML, JavaScript, Bilder, CSS und Flash verarbeiten. Seien wir ehrlich, es braucht nicht viel, um 30 kb vollständig zu überschreiten.

Mit zunehmender Beliebtheit von JavaScript und CSS wurde es üblich, dass CSS allein die Obergrenze von 30 KB überschritt. Dies gilt insbesondere für größere Websites.

Sie sollten sich jedoch beim Erstellen und Entwerfen von Seiten für Ihre Website nicht zu sehr auf Ihre „Kilobyte-Anzahl“ konzentrieren. Es ist wichtig, dass Sie Ihre Seiten behalten optimiert und eng beim Schreiben Ihres CSS.

Bei der Optimierung geht es nicht nur darum, die Größe Ihrer Dateien zu minimieren. Es geht darum, Ihre Seiten frei von Unordnung und Aufblähung zu halten und sie so organisiert und effizient wie möglich zu gestalten. Wenn Sie mehr über Best Practices für die CSS-Optimierung erfahren, werden Sie feststellen, dass Sie automatisch kleinere Dateigrößen erstellen.

Hier sind 5 einfache Dinge, die Sie tun können, um Ihr CSS jetzt zu optimieren.

So optimieren Sie die CSS-Bereitstellung vollständig

1. Verwenden Sie die Kurzschrift

Das Schreiben in Kurzschrift ist eine sehr verbreitete Praxis geworden. Dies ist bei weitem der einfachste Weg, um Ihren Code zu reduzieren und wie lange Sie zum Code brauchen. Wenn Sie dies noch nicht tun, gibt es keine Zeit wie die Gegenwart.

CSS-Schrifteigenschaft

Es gibt eine Vielzahl von Elementen, für die Sie die Kurzform verwenden können. Die häufigsten sind jedoch:

  • Spanne
  • Polsterung
  • Schriftart
  • Gliederung
  • Rand
  • Hintergrund
  • Listenstil

Kurzform KonfigurationswerteSie können Werte auch mit Kurzschrift kombinieren. Durch die Angabe unterschiedlicher Werte verwendet der Browser im Wesentlichen eine bestimmte Art und Weise, um die Regeln zu interpretieren.

Verwenden Sie eine beliebige Abkürzung Machen Sie Ihren Gesamtcode viel prägnanter. Sie speichern sowohl Zeichen als auch Zeilen.

Wenn Sie in jedem möglichen Bereich Kurzschrift verwenden, kann dies die Gesamtdateigröße drastisch reduzieren.

2. Befreien Sie sich von den Hacks

dh CSS-RegelUm IE-spezifische CSS-Regeln bereitzustellen, können Sie durch die Verwendung von bedingten CSS-Hacks eine kleinere und sauberere Standard-CSS-Datei bereitstellen.

Es hilft bei Browsern, die mehr Standards entsprechen. Das zusätzliche Seitengewicht wird jedoch nur von den Browsern heruntergeladen, die es benötigen.

Wenn Sie einen Hack verwenden müssen, muss der von Ihnen verwendete Code unbedingt für die Version von Internet Explorer spezifisch sein, auf die Sie sich konzentrieren.

Es gibt zahlreiche vorab geschriebene Codes, die als Hacks dienen, wenn Sie keine eigenen schreiben möchten. Nehmen Sie sich einfach die Zeit, um sich den vorab geschriebenen Code genau anzusehen und sicherzustellen, dass er korrekt ist Andernfalls könnte dies zu noch mehr Problemen führen.

Wenn Sie jetzt CSS verwenden können, um die gewünschten Ergebnisse zu erzielen, tun Sie dies ohne Hacks. Dies hängt natürlich davon ab, dass alle anderen Dinge gleich sind. Ihr Gesamtcode wird viel leichter und einfacher, wenn Sie weniger Hacks auf Ihrer Site verwenden.

3. Seien Sie schlau bei der Verwendung von Leerzeichen

Für Ihren CSS-Code, Leerzeichen sind unerlässlich zur besseren Lesbarkeit.

Leerzeichen enthalten Elemente wie Tabulatoren, Leerzeichen und zusätzliche Zeilenumbrüche. Jedes Leerzeichen, das Sie entfernen können, ähnelt dem Entfernen eines Zeichens.

Leerzeilen entfernenEs wird jedoch häufig nicht empfohlen, Leerzeichen zu verwenden, um eine kleinere Datei zu erhalten. Sie müssen weiterhin eine optimale Lesbarkeit auf Ihren Webseiten gewährleisten.

Leerzeichen sind wichtig für die Formatierung, daher möchten Sie ein Gleichgewicht finden. Wenn Sie in großen Blöcken in Text schreiben, um Leerzeichen zu entfernen, Die kurze Aufmerksamkeitsspanne der Leser im Internet lässt sie wegklicken.

Eine Möglichkeit, sowohl eine kleinere Dateigröße als auch eine bessere Lesbarkeit zu erzielen, besteht darin, Tabulatoren zu entfernen und nur eine einzige Zeile zwischen die Absätze zu setzen. Dies bietet unter dem Gesichtspunkt der Lesbarkeit ausreichend Leerzeichen, eliminiert jedoch auch einige der nicht erforderlichen Leerzeichen.

Für die Produktionsversion Ihrer CSS-Datei können Sie jetzt das Leerzeichen entfernen. Es wird weiterhin in Ihrer Arbeitsdatei vorhanden sein.

Dies ist eine weitere Möglichkeit, Kompromisse einzugehen, sodass Sie sowohl kleinere Dateien als auch lesbare Formatierungen haben.

4. Zurücksetzen und Frameworks beschneiden

Wenn Sie ein CSS-Framework verwenden, müssen Sie unbedingt die Dokumentation lesen.

Ebenso wichtig ist es, jede einzelne Zeile in Ihrer CSS-Datei zu betrachten. Es gibt Zeiten, in denen Sie feststellen werden, dass das Framework einige Regeln enthält, die Sie für Ihr aktuelles Projekt nicht benötigen. Diese können entfernt werden.

nicht verwendete CSS-Regeln entfernt

Sie werden vielleicht feststellen, dass Sie Präsentationsdetails präziser und eleganter gestalten können…

Dies ist möglicherweise nicht das, was Sie normalerweise verwenden, aber wenn es funktioniert, kann dies ein saubereres Framework ermöglichen. Wenn Sie über sie Bescheid wissen, können Sie so auch ein unbeabsichtigtes Duplizieren von Regelsätzen vermeiden.

Die gleichen Informationen gelten auch für das Zurücksetzen. Wenn Sie Resets verwenden, können Sie den Standardstil eines Browsers neutralisieren. Wenn Sie mit der von Ihnen erstellten Website vertraut sind, ist es nicht ungewöhnlich, bestimmte Erklärungen zu finden, von denen Sie wissen, dass Sie sie nicht benötigen.

In einem allgemeinen Blog werden Sie sie beispielsweise wahrscheinlich nicht verwenden. Entfernen Sie einfach alles, was Sie für die von Ihnen erstellte Site nicht benötigen. Du kannst Stellen Sie eine besser optimierte Arbeit sicher, wenn Sie eine Reihe von Regeln verwenden in Bezug auf einen Reset oder ein Framework.

In ihrem Standardzustand sollten sie jedoch nicht akzeptiert werden. Um Ihre CSS-Dateien lesbar und schlank zu halten, sehen Sie sich jede Deklaration einzeln an und reduzieren Sie die unnötigen.

5. Zukunftssicheres CSS

CSS-Syntax

Eine weitere nützliche Option zur CSS-Optimierung: Trennen Sie den Großteil Ihrer Regeln von Ihren layoutspezifischen Deklarationen.

Weisen Sie das Layout einer eigenen Datei zu, wenn dies möglich ist. Wenn nicht, kann es von Vorteil sein, ihm zumindest einen eigenen Abschnitt zu geben.

Letztendlich die Positionierung und Floats – das sind die aktuellen Methoden mit CSS – waren nicht als Layout-Tools gedacht.

Einige gehen sogar so weit zu sagen, dass diese tatsächlich Layout-Hacks ähneln. Derzeit gibt es keine praktikable Alternative, und es besteht die Hoffnung, dass die vereinbarten Layoutstandards von den Browsern unterstützt werden.

Sobald diese Unterstützung erfolgt ist, sollte es nicht sehr schwierig sein, die gehackten Box-Modelleigenschaften gegen die für Layouts vorgesehenen auszutauschen.

Im Moment ist die Am besten behandeln Sie Ihr Layout mit den richtigen Eigenschaften. Dadurch wird das Seitengewicht in der Regel effektiver reduziert, als wenn die derzeit verfügbaren begrenzten Eigenschaften verwendet werden, um Macken auszugleichen.

6. Halten Sie die Dokumentation zu Ihrer Arbeit immer auf dem neuesten Stand

Unabhängig davon, ob Sie als Team oder alleine an einer Website arbeiten, ist es unerlässlich, alles im Auge zu behalten, was Sie getan haben.

Zum Beispiel können Sie alleine etwas vergessen, was Sie getan haben. Als Team kann jemand etwas tun, und Sie sind sich möglicherweise erst bewusst, wenn Sie Änderungen vornehmen, die Probleme mit verschiedenen Elementen des Codes verursachen können.

CSS-Kommentar hinzufügenCode-Duplikationen sind sowohl für Teams als auch für einzelne Designer ein großes Problem, insbesondere bei der Verwendung beliebter Website-Builder. Wix, Squarespace und andere Software zum Erstellen von Websites sind bekannt dafür, Code zu duplizieren oder ihn vollständig in ihrer Datenbank zu vermissen.

Die Verwendung von Stylesheet-Anleitungen und Markup-Anleitungen ist eine praktikable Dokumentationsoption. Sie können auch CSS-Kommentare verwenden. Dies ist eine weitere Option. Dies kann hilfreich sein, um die Elemente langer CSS-Dateien zu trennen. Wenn Sie diese in die Stil- oder Markup-Anleitung einfügen, können sie die Dateigröße nicht hinzufügen.

Eine der schnellsten Möglichkeiten, Code aufzublähen, besteht darin, dieselbe Arbeit zweimal auszuführen. Die Codierung ist komplex, daher ist es unbedingt erforderlich, dass Sie alles, was Sie getan haben, genau dokumentieren.

Wenn Sie alleine arbeiten, ist es ideal, diese Dokumentation jedes Mal zu lesen, wenn Sie sich hinsetzen, um mit der Arbeit zu beginnen. Stellen Sie bei der Arbeit als Teil eines Teams sicher, dass alle Benutzer im selben Dokument codieren hält sich an einen Community-Stil oder einen Markup-Leitfaden Damit Codierungsänderungen für alle Mitglieder der Gruppe leicht verständlich sind.

7. Komprimieren Sie Ihre Dateien (CSS Optimization 101)

CSS-Komprimierung und -Optimierung gif

Komprimierung: Da steckt noch ein bisschen mehr dahinter…

Eine effektive Möglichkeit zur Optimierung von CSS ist die Verwendung der Komprimierung. Auf diese Weise können Sie sicherstellen, dass Ihre Dateien browserfreundlich sind, auch wenn diese für Menschen nicht lesbar sind.

Im Vergleich zu den Arbeitskopien sind diese nur ein Bruchteil der Größe. Es gibt verschiedene Anwendungen, die Sie nutzen können, um den Komprimierungsprozess zu vereinfachen.

Diese führen Aufgaben aus, z. B. das Auffinden und Korrigieren von CSS-Eigenschaften, die sich gegenseitig überschreiben, das Komprimieren von Leerzeichen und das Suchen nach Möglichkeiten zur Verwendung von CSS-Kurzschrift.

Neben dem Komfort dieser Anwendungen können Sie auch mehr über die Aufgaben erfahren, die Sie bei Bedarf von Hand ausführen können. Sie können auch verschiedene Texteditoren verwenden, um Ihre CSS-Dateien zu formatieren.

Sie können Zip-Versionen der verschiedenen CSS-Dateien bereitstellen, über die Sie verfügen. Dies erfolgt normalerweise mit PHP. Wenn Sie Optimierungs- und Komprimierungswerkzeuge verwenden möchten, überprüfen Sie mehrere Optionen, bevor Sie die richtige für Sie auswählen.

Diese Anwendungen sind im Allgemeinen gut darin, Fehler zu minimieren, aber sie sind nicht perfekt. Aus diesem Grund sollten Sie Ihr CSS nach der Verwendung einer Anwendung immer überprüfen, um die Richtigkeit sicherzustellen. Optimierter und sauberer Code ist entscheidend für die Dateigröße, aber auch für die Lesbarkeit und Wartung.

Du bist dran

Die hier diskutierten Prinzipien sind solide Überlegungen für CSS, aber auch für JavaScript, HTML und andere Programmiersprachen. Im Vergleich zum Rendern Ihrer Website sind CSS-Dateien für den Endbenutzer nicht so wichtig.

Die hier diskutierten Prinzipien helfen jedoch sowohl bei der Entwicklungserfahrung als auch bei der Benutzererfahrung.

Die meisten guten Webhosting-Unternehmen helfen Ihnen bei der CSS-Optimierung. Schnellere Websites machen Sie zu einem zufriedenen Kunden, aber kleinere Dateien belasten auch ihre Server weniger.

Wir haben jeden kanadischen Webhost getestet und empfehlen SiteGround. Sie helfen Ihnen nicht nur bei der Optimierung der CSS-Bereitstellung, sondern bieten auch beispiellosen technischen Support.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author