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

drucken · Время на чтение: 8мин · von · Veröffentlicht · Aktualisiert

reproduzierenArtikel anhören

JS- und CSS-Code-Optimierung.

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

Allgemein, Optimierung von JavaScript- und CSS-Code erhöht die Antwortgeschwindigkeit der Website erheblich. Dadurch arbeitet die Seite schneller und belastet den Serverteil weniger stark.

JS- und CSS-Sitecode – was ist das?

So optimieren Sie JS und CSS.

JavaScript und CSS sind gängige Programmiersprachen, die jeweils bestimmte Funktionalitäten auf die Seite bringen. Dank der Verwendung der wichtigsten Web-Programmiersprachen HTML, JS, CSS wird eine ideale Benutzerinteraktion mit der Website erreicht.

JavaScript ist eine verbreitete Programmiersprache. Ermöglicht Ihnen, verschiedene Skripte zu erstellen. Die meisten dieser Skripte werden im Browser des Benutzers ausgeführt. JavaScript verbessert die Interaktion des Benutzers mit der Website. Hervorbringen bestimmter Informationen mithilfe von Minianwendungen (Skripts) auf der Website. Die Visualisierung und Ausgabe von JS-Skripten erfolgt durch Einbinden dieser in den HTML-Code der Seite. Fast alle Websites verwenden JS (JavaScript) in ihrer Zusammensetzung.

css - bezieht sich auf eine der wichtigsten Programmiersprachen der Website. CSS (Stildatei) - 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 das 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 Leinwand von Codes in Sekundenbruchteilen zu lesen. Dadurch verlangsamt sich das Laden der Seite und der gesamten Website insgesamt. 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;
  • Unfertige und nicht funktionierende Codezeilen.
Der Prozess selbst ähnelt dem Komprimieren einer normalen Datei. Das Gewicht und die Größe des letzteren werden viel kleiner. Aber trotzdem wird der Code für Menschen völlig unlesbar. Aber Suchroboter und Browser umgehen und verstehen die gesamte Struktur der Datei perfekt. Die Rundenzeit wird mehrfach reduziert. Dank dieser Komprimierung erhöht sich die Download-Geschwindigkeit und die Gesamtreaktion 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 Popularität verloren, da USB-Flash-Laufwerke bis zu 1 TB Speicherplatz bieten können).

Die Idee war, Archivierer 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 JavaScript eine Textdatei ist, kann gzip verwendet werden, um JavaScript-Dateien zu komprimieren und die Ladezeiten von Seiten zu verkürzen.

Optimieren Sie Javascript mit Minimierung

Die Optimierung ist eine spezielle Art der JavaScript-Minifizierung. 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 Webfonts

Google Fonts und ähnliche Font-Hersteller haben Web-Fonts revolutioniert, aber ein paar Zeilen Font-Code können Hunderte von 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 benötigten Strichstärken und Stile herunter: Die meisten Schrifthersteller können Downloads auf bestimmte Zeichensätze (z. B. nur Latein), Strichstärken (Dicke) und Kursivschrift (Schrägschrift) beschränken. Browser können fehlende Stile automatisch rendern, obwohl die Ergebnisse schlecht sein können.
  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 Abfragezeichenfolge von Google Fonts der Parameter & text= hinzugefügt wird: fonts.googleapis.com/css? family=Open+Sans&text=CTuorial
  4. Berücksichtigen Sie variable Schriftarten: Variable Schriftarten definieren eine Vielzahl von Stilen, Strichstärken und Kursivschrift mithilfe von Vektorinterpolation. Die Schriftartdatei ist etwas größer, aber Sie benötigen nur eine, nicht mehrere. Die rekursive Schriftart demonstriert die Flexibilität variabler Schriftarten.
  5. Laden Sie Schriftarten von Ihrem lokalen Server herunter. Selbst gehostete Schriftarten sind effizienter. Es sind weniger DNS-Lookups 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 OS-Schriftarten: Diese 500.000 große Webschriftart sieht vielleicht toll aus, aber wird es irgendjemand bemerken, wenn Sie zu den gemeinfreien 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 Webfonts kann einige Sekunden dauern. Du brauchst:

  1. Zeigen Sie einen Blitz von nicht formatiertem Text (FOUT): Die erste verfügbare Fallback-Schriftart wird zuerst verwendet, aber sie wird ersetzt, wenn die Webschriftart fertig ist.
  2. Flash von unsichtbarem Text anzeigen (FOIT): Der Text wird erst angezeigt, wenn die Webschrift bereit ist. Dies ist der Standardprozess in modernen Browsern, die normalerweise drei Sekunden warten, bevor sie zu einer Fallback-Schriftart zurückkehren.
    Beides ist nicht perfekt.
Die CSS-Eigenschaft font-display und die Einstellung Google Font & display= können eine Alternative wählen:
  • auto: Standardverhalten des Browsers (normalerweise FOIT).
  • block: Effektiv BIT. Text ist bis zu drei Sekunden lang unsichtbar. Es gibt keine Schriftartersetzung, aber der Text kann nach einer Weile erscheinen.
  • Swap: Effektiv FOUT. Der erste Fallback wird verwendet, bis die Webschriftart verfügbar ist. Der Text ist sofort lesbar, aber der Font-Replacement-Effekt kann störend sein. Mit dem Font Style Matcher kann ein Fallback ähnlicher Größe definiert werden.
  • Fallback: ein Kompromiss zwischen BIT und FOUT. Der Text ist für kurze Zeit unsichtbar (normalerweise 100 ms), dann wird der erste Fallback verwendet, bis der Webfont verfügbar ist.
  • optional: Ähnlich wie beim Fallback, außer dass es keine Schriftersetzung gibt. Der Webfont wird nur verwendet, wenn er in der Anfangsphase verfügbar ist. Beim ersten Seitenaufruf wird höchstwahrscheinlich die Fallback-Schriftart angezeigt, während nachfolgende Seitenaufrufe die heruntergeladene und zwischengespeicherte Webschriftart verwenden.

Die Verwendung von Swap, Backup oder Optional kann eine spürbare Leistungssteigerung bewirken.

JS- und CSS-Code-Optimierung online

Im Internet gibt es eine ziemlich große Anzahl von Online-Diensten. Welche in ein paar Minuten in der Lage sind, die gesamte Routinearbeit zum Komprimieren von JavaScript- und Style-Dateien zu erledigen. Alle haben ihre eigenen Algorithmen für die Arbeit mit Code. Vor dem Hintergrund dieser Vielfalt lassen sich zwei wesentliche Dienste unterscheiden. Ihre effektive Komprimierungsschwelle ist viel höher als bei ähnlichen konkurrierenden Online-Tools. Schauen wir uns diese beiden Web-Tools genauer an:

cssresizer.com
Kompressionseffizienz 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ßartig optimierten Code erhalten. Die Arbeit mit diesem Tool ist intuitiv und es gibt mehrere Komprimierungsmethoden:

  • Maximal;
  • schnell;
  • Dekompression;

Sie können komprimieren durch:

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

CSSResizer - Professionelle CSS-Komprimierung.

Refresh-sf.com

Ein weiteres, aber ebenso leistungsstarkes Webinterface zum Minimieren von JavaScript, CSS und HTML. Das Tool arbeitet mit UglifyJS 2, Clean-CSS und HTML Minifier. Die Kompressionseffizienz erreicht in diesem Fall 85%, ohne sichtbare Verletzungen der Codegültigkeit. Die Komprimierung kann durch direkte Eingabe des Codes im Toolfenster erfolgen.

Refresh-SF ist ein Online-JavaScript- und CSS-Komprimierer.

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 führende Position ein. Betrachten Sie einige beliebte Optimierungs-Plugins speziell für WordPress:

Plugin automatisch optimieren

HTML-, JS- und CSS-Optimierungs-Plugin. Es ist eines der beliebtesten Plugins zur Beschleunigung von Websites auf CMS Wordpress. Es hat eine einfache und funktionale Konfigurationsschnittstelle. Der Komprimierungsprozess erfolgt im laufenden Betrieb.

  • Optimierung (HTML, JS, CSS) und CDN-Setup.
  • Entfernen von Emojis, Google-Schriftarten und Abfragezeichenfolgen aus statischen Ressourcen.
  • Möglichkeit, Bilder zu optimieren.

Autoptimize - Plugin komprimiert Stile/Skripte/HTML.

Webcraftic Clearfy-Plugin

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

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

  • Optimierung (Bilder, JS, CSS, HTML und Skripte);
  • Kyrillische Transliteration und Entfernung von Duplikaten. Mit Alt-Attributen arbeiten und die richtige robots.txt erstellen. Arbeiten mit Server-Headern und ihren Antworten.
  • Nicht beanspruchte WordPress-Widgets entfernen.
  • Ausblenden der WordPress-Version und Entfernen von Abfragevariablen aus statischen Abfragen. Ausblenden des Autoren-Logins und der Admin-Login-Seite.
  • Globale Entfernung oder Bereinigung von Kommentaren. Speichern Sie die Kontrolle in den Kommentaren.
  • Einrichten von WordPress Pulse und Top-Admin-Panel.
  • Kontrolle über Plugin-Komponenten.

Webcraftic Clearfy ist ein kostenloses Optimierungs-Plugin.

Abschließend lässt sich ein gewisses Fazit ziehen. Basierend auf dem oben Gesagten ist das Komprimieren von js und css nicht so schwierig. Dank dieser Maßnahmen wird die Reaktionsgeschwindigkeit Ihres Projekts deutlich erhöht.

Vielen Dank für das Lesen von Nicola Top

Wie nützlich ist der Beitrag?

Zum Bewerten auf den Smiley klicken!

durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 14

Es liegen noch keine Bewertungen vor. Bewerten Sie zuerst.

Das könnte dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

fünf × 3 =