JS- und CSS-Site-Code online optimieren – eine ausführliche Anleitung

Hören Sie sich diesen Artikel an

Website-JS- und CSS-Codeoptimierungist einer der wichtigsten Aspekte der technischen Website-Optimierung. Der Grund dafür ist die Freigabe weiterer Site-Ressourcen aufgrund der Reduzierung von Datenbankaufrufen und einer verbesserten Lesbarkeit der Codestruktur selbst.

In der Regel erhöht die Optimierung des JavaScript- und CSS-Codes die Reaktionsgeschwindigkeit der Website erheblich. Dadurch arbeitet die Site schneller und belastet den Serverteil weniger stark.

Der Inhalt des Artikels:

• JS- und CSS-Code – was ist das?
• JS- und CSS-Code optimieren – warum müssen Sie Skripte und Stile optimieren?
• Gzip-Modul für Apache, Nginx und Node.js
• Optimieren Sie Javascript mit Minifizierung
• CSS-Optimierung für die Verwendung von Web-Schriftarten
• Verwenden Sie die entsprechende Option zum Herunterladen von Schriftarten
• Codeoptimierung online
• Minimieren Sie JS und CSS mit CMS-WordPress-Plugins

JS- und CSS-Site-Code – was ist das?

JavaScript und CSS sind gängige Programmiersprachen, von denen jede bestimmte Funktionen auf die Website bringt. Dank der Verwendung der wichtigsten Webprogrammiersprachen HTML, JS, CSS wird eine ideale Benutzerinteraktion mit der Website erreicht.

JavaScript ist eine gängige Programmiersprache. Ermöglicht die Erstellung verschiedener Skripte. Die meisten dieser Skripte werden im Browser des Benutzers ausgeführt. JavaScript verbessert die Interaktion des Benutzers mit der Website. Bereitstellung bestimmter Informationen mithilfe von Minianwendungen (Skripten) auf der Website. Die Visualisierung und Ausgabe von JS-Skripten erfolgt durch die Einbindung dieser in den HTML-Code der Seite. Fast alle Websites verwenden in ihrer Zusammensetzung JS (JavaScript).

CSS - bezieht sich auf eine der Hauptprogrammiersprachen der Website. CSS (Style-Datei) – enthält Informationen über das Erscheinungsbild fast aller Elemente der Website. Von Farbe und Position bis hin zur berüchtigten Animation eines bestimmten Seitenelements.

Optimierung von JS- und CSS-Code – warum wird sie benötigt?

JS und CSS – für sich genommen haben sie einen ziemlich großen, gewichtigen Code, der viel Überflüssiges enthält. Für einen Browser ist es schwierig, eine riesige Codefläche im Bruchteil einer Sekunde zu lesen. Dadurch verlangsamt sich das Laden der Seite und der gesamten Website. Die Optimierung dieser Dateien zielt darauf ab, die Größe des Codes zu reduzieren und alles Überflüssige abzuschneiden. Das betrifft:

• Unbenutzte und zusätzliche Zeichen;
• Leerzeichen;
• Unvollendete und nicht funktionsfähige Codezeilen.

Der Vorgang selbst ähnelt dem Komprimieren einer normalen Datei. Letztere werden in Gewicht und Größe deutlich kleiner. Dennoch wird der Code für den Menschen völlig unlesbar. Aber Suchroboter und Browser umgehen die gesamte Struktur der Datei perfekt und verstehen sie. Der Zeitaufwand für die Runde wird um ein Vielfaches reduziert. Dank dieser Komprimierung erhöht sich die Download-Geschwindigkeit und die Gesamtantwort verbessert sich.

Gzip-Modul für Apache, Nginx und Node.js

Gzip ist eine erstaunliche Technologie, die zu einer Zeit entwickelt wurde, als das Internet noch nicht so schnell war wie heute. Archiver waren eine beliebte Technologie (sie haben seitdem an Beliebtheit verloren, da USB-Flash-Laufwerke bis zu 1 TB Speicher bieten können).

Die Idee bestand darin, Archivierungsprogramme für den Webverkehr im Internet zu verwenden (ähnlich wie beim Erstellen von Website-Dateien). Daher wurde gzip entwickelt, um Dateien auf Webservern zu komprimieren, indem statische (Text-)Dateien auf 99% ihrer ursprünglichen Größe komprimiert werden. Da es sich bei JavaScript um eine Textdatei handelt, kann gzip zum Komprimieren von JavaScript-Dateien und zum Verkürzen der Seitenladezeit verwendet werden.

Optimieren Sie Javascript mit Minifizierung

Optimierung ist eine spezielle Art der JavaScript-Minimierung. Solche Minimierer entfernen nicht nur unnötige Leerzeichen, Kommas, Kommentare usw., sondern helfen auch, „toten Code“ zu vermeiden:

• Google-Closure-Compiler
• UglifyJS
• Microsoft AJAX-Minifier

CSS-Optimierung für die Verwendung von Web-Schriftarten

Google Fonts und ähnliche Schriftartenhersteller haben Web-Schriftarten revolutioniert, aber ein paar Zeilen Schriftartencode können Hunderte Kilobyte Bandbreite verbrauchen.

1. Laden Sie nur die Schriftarten herunter, die Sie benötigen: Entfernen Sie nicht verwendete Schriftarten und prüfen Sie, ob neue Schriftarten benötigt werden.
2. Laden Sie nur die Strichstärken und Stile herunter, die Sie benötigen: Die meisten Schriftartenhersteller beschränken den Download möglicherweise auf bestimmte Zeichensätze (z. B. nur Latein), Strichstärken (Dicke) und Kursivschrift (Schrägschrift). Browser rendern möglicherweise automatisch fehlende Stile, auch wenn die Ergebnisse möglicherweise schlecht sind.
3. Begrenzen Sie die Anzahl der benötigten Zeichen: Selten verwendete Schriftarten können auf bestimmte Zeichen beschränkt werden. Beispielsweise kann der Titel „CSS Tutorial“ in Open Sans definiert werden, indem der Parameter & text= zur Google Fonts-Abfragezeichenfolge hinzugefügt wird:fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Erwägen Sie variable Schriftarten: Variable Schriftarten definieren mithilfe der Vektorinterpolation eine Vielzahl von Stilen, Strichstärken und Kursivschrift. Die Schriftartendatei ist etwas größer, Sie benötigen jedoch nur eine, nicht mehrere. Die rekursive Schriftart demonstriert die Flexibilität variabler Schriftarten.
5. Laden Sie Schriftarten von Ihrem lokalen Server herunter. Das Selbsthosten von Schriftarten ist effizienter. Es sind weniger DNS-Suchvorgänge erforderlich und Sie können das Laden von WOFF2 begrenzen, das alle modernen Browser unterstützen. Ältere Browser (IE) greifen möglicherweise auf die Schriftart des Betriebssystems zurück.
6. Betrachten Sie Betriebssystem-Schriftarten: Diese 500K-Webschriftart sieht vielleicht großartig aus, aber wird es irgendjemandem auffallen, wenn Sie zu den gemeinfreien Schriftarten Helvetica, Arial, Georgia oder Verdana wechseln? Betriebssystemsichere oder websichere Schriftarten sind eine einfache Möglichkeit, die Produktivität zu steigern.

Verwenden Sie die entsprechende Option zum Herunterladen von Schriftarten

Das Laden und Verarbeiten von Webschriftarten kann einige Sekunden dauern. Du brauchst:

1. Einen Blitz von nicht formatiertem Text anzeigen (FOUT): Die erste verfügbare Fallback-Schriftart wird zuerst verwendet, aber ersetzt, wenn die Web-Schriftart bereit ist.
2. Unsichtbaren Text aufblitzen lassen (FOIT): Der Text wird erst angezeigt, wenn die Webschrift fertig ist. Dies ist der Standardprozess in modernen Browsern, die normalerweise drei Sekunden warten, bevor sie zu einer Ersatzschriftart zurückkehren.
   Keines von beiden ist perfekt.

Die CSS-Eigenschaft „font-display“ und die Einstellung „Google Font & display=“ können eine Alternative auswählen:

• auto: Standard-Browserverhalten (normalerweise FOIT).
• Block: Effektiv FOIT. Text ist bis zu drei Sekunden lang unsichtbar. Es erfolgt keine Schriftartenersetzung, aber der Text erscheint möglicherweise nach einer Weile.
• Swap: Effektiv FOUT. Der erste Fallback wird verwendet, bis die Webschrift verfügbar ist. Der Text ist sofort lesbar, der Schriftersetzungseffekt kann jedoch störend sein. Mit dem Font Style Matcher kann ein Fallback ähnlicher Größe definiert werden.
• Fallback: ein Kompromiss zwischen FOIT und FOUT. Der Text ist für einen kurzen Zeitraum (normalerweise 100 ms) unsichtbar. Anschließend wird der erste Fallback verwendet, bis der Webfont verfügbar ist.
• optional: Ähnlich dem Fallback, außer dass es keine Schriftartersetzung gibt. Der Webfont wird nur verwendet, wenn er im ersten Zeitraum verfügbar ist. Beim ersten Seitenaufruf wird höchstwahrscheinlich die Ersatzschriftart angezeigt, während bei nachfolgenden Seitenaufrufen die heruntergeladene und zwischengespeicherte Webschriftart verwendet wird.

Die Verwendung von Swap, Backup oder optional kann zu einer spürbaren Leistungssteigerung führen.

JS- und CSS-Codeoptimierung online

Im Internet gibt es eine relativ große Anzahl von Online-Diensten. Die in ein paar Minuten die gesamte Routinearbeit der Komprimierung von JavaScript- und Style-Dateien erledigen können. Alle verfügen über eigene Algorithmen für die Arbeit mit Code. Vor dem Hintergrund dieser Vielfalt lassen sich zwei bedeutsamste Dienste unterscheiden. Ihr effektiver Komprimierungsschwellenwert ist viel höher als bei vergleichbaren konkurrierenden Online-Tools. Schauen wir uns diese beiden Web-Tools genauer an:

cssresizer.com
Komprimierungseffizienz des 84% im Vergleich zu engen Konkurrenten. Die Gültigkeit des Codes bleibt auch bei starker Komprimierung erhalten. Auf diese Weise können Sie großartigen optimierten Code erhalten. Die Arbeit mit diesem Tool ist intuitiv und es gibt mehrere Komprimierungsmethoden:

• Maximal;
• schnell;
• Dekompression;

Sie können Folgendes komprimieren:

• URL – Adresse;
• Datei-Upload;
• Direkte Codeeingabe;

Refresh-sf.com

Eine weitere, aber ebenso leistungsstarke Weboberfläche zur Minimierung von JavaScript, CSS und HTML. Das Tool verwendet UglifyJS 2, Clean-CSS und HTML Minifier, um zu funktionieren. Die Komprimierungseffizienz erreicht in diesem Fall 85%, ohne sichtbare Verletzungen der Codegültigkeit. Die Komprimierung kann durch direkte Eingabe des Codes im Toolfenster erfolgen.

Minimieren Sie JS und CSS mit CMS-WordPress-Plugins

Wie wir alle wissen, hat es eine bedeutende Verbreitung auf der ganzen Welt. Laut den Daten für 2018 nimmt dieses CMS eine Spitzenposition ein. Betrachten Sie einige beliebte Optimierungs-Plugins speziell für WordPress:

Autoptimize-Plugin

HTML-, JS- und CSS-Optimierungs-Plugin. Es ist eines der beliebtesten Plugins zur Beschleunigung von Websites auf CMS Wordpress. Es verfügt über eine einfache und funktionale Konfigurationsoberfläche. Der Komprimierungsprozess erfolgt im laufenden Betrieb.

• Optimierung (HTML, JS, CSS) und CDN-Einrichtung.
• Entfernen von Emojis, Google-Schriftarten und Abfragezeichenfolgen aus statischen Ressourcen.
• Möglichkeit zur Bildoptimierung.

Webcraftic Clearfy Plugin

Nicht so alt wie das vorherige Plugin. Aber auch bei ähnlichen Wettbewerbern ist es gefragt und beliebt. Webcraftic Clearfy – verfügt über eine ziemlich komplizierte Konfigurationsoberfläche. Besteht aus einer kombinierten Kombination von Plugins für das beste Ergebnis.

Die Einstellungsseiten sind in Menüabschnitte unterteilt. Dadurch ist es möglich, bestimmte Teile der Website zu optimieren, beispielsweise HTML. Was kann dieses Plugin?

• Optimierung (Bilder, JS, CSS, HTML und Skripte);
• Kyrillische Transliteration und Entfernung von Duplikaten. Arbeiten mit Alt-Attributen und Erstellen der richtigen robots.txt. Arbeiten mit Server-Headern und deren Antworten.
• Entfernen nicht beanspruchter WordPress-Widgets.
• Ausblenden der WordPress-Version und Entfernen von Abfragevariablen aus statischen Abfragen. Verstecken des Anmeldenamens des Autors und der Anmeldeseite des Administrators.
• Globale Entfernung oder Bereinigung von Kommentaren. Speichern Sie die Kontrolle in den Kommentaren.
• Einrichten des WordPress-Pulses und des Top-Admin-Panels.
• Kontrolle über Plugin-Komponenten.

Abschließend lässt sich eine gewisse Schlussfolgerung ziehen. Basierend auf dem oben Gesagten ist das Komprimieren von JS und CSS keine so schwierige Sache. Dank dieser Maßnahmen wird die Reaktionsgeschwindigkeit Ihres Projekts deutlich erhöht.

Lesen dieses Artikels:

• Optimierung der Webseitenleistung
• CSS für Website-Geschwindigkeit optimieren – 9 Möglichkeiten

Danke fürs Lesen: SEO HELPER | NICOLA.TOP