Die Optimierung der Ladegeschwindigkeit einer Website ist kein Kinderspiel, vor allem, wenn sie schön, glänzend, animiert und farbenfroh sein soll. Mit anderen Worten, wenn unsere Website mit Java Script und CSS-Sheets überladen ist.
Wenn Sie schon einmal mit Pagespeed Insights oder einem Tool wie GTMetrix gearbeitet haben, wissen Sie sicher schon, dass Sie unnötigen CSS- und JS-Code von Ihrer Website entfernen müssen, um sie zu beschleunigen.
Spis treści
Warum brauchen wir eigentlich CSS und JS
Zunächst eine kurze Einführung für diejenigen, die sich nicht mit dem Thema befassen:
Java Script (JS) – eine Scripting-Programmiersprache. Ohne ins Detail zu gehen: Java Script, das im Code der Website enthalten ist, oder als name.js-Dateien eingebunden ist, ist für die – hässlich ausgedrückt – visuellen und benutzerfreundlichen Bytes der Website verantwortlich. Scrolling, Logins, Animationen, Pop-ups, Analysen – all das kann durch JS-Skripte erledigt werden.
CSS – Cascading Style Sheets – ist eine Sprache, mit der man das Aussehen einzelner Seitenelemente steuern kann. Wie jede Sprache erlaubt sie es Ihnen, einen ziemlich ordentlichen, vernünftigen Code zu schreiben oder ein aufgeblähtes, bedeutungsloses Gewirr, das in 20 verschiedenen .css-Dateien enthalten ist
Ein moderater Umfang an CSS- und JS-Code ist natürlich nicht nur aus SEO-Sicht akzeptabel, sondern für 99 % der Websites sogar notwendig, um zu funktionieren. Das Problem entsteht, wenn der Code ohne Grund zu wachsen beginnt. Jede zusätzliche JS-Zeile oder eine weitere CSS-Regel bedeutet einen weiteren Daten-Download. Jede weitere Datei ist eine weitere Anfrage an den Server. Jede externe Datei ist ein weiterer Server, der abgefragt wird.
Lösung des Problems [zobacz memy]
Schritt 1: Entfernen Sie Plug-ins und alles, was nicht benötigt wird
Ein Standardszenario, das sich zu Beginn der Reise mit vielen meiner Kunden wiederholt:
- website auf wordpress
- 40 Dübel, ca. 4 benötigt, der Rest ist Quatsch
- 30-40 Blätter und .js-Dateien auf jeder Unterseite
Hier ist das Ergebnis einer Analyse der Website eines der führenden polnischen Elektronikvertriebsunternehmen:
This page has 42 external Javascript scripts. Try combining them into one. This page has 35 external stylesheets. Try combining them into one.
Agenturen, die Websites mit Buildern erstellen und jede Aufgabe mit vorgefertigten Plug-ins lösen, sind wirklich scheißegal, aber solche unermesslichen Mengen an Müll in den Code einer Website zu laden, ist in so vielerlei Hinsicht falsch, dass ich nicht weiß, wo ich anfangen soll.
Aus diesem Grund werde ich nicht starten. Lassen Sie es mich kurz machen: Entfernen Sie alles, was Sie nicht brauchen. Dies ist der erste und einfachste Schritt.
Schritt 2: Zusammenführen und Verkleinern des Codes
Wenn Ihr JS- oder CSS-Code über 15 verschiedene Dateien verteilt ist, sollten Sie alles, was Sie können, in weniger Dateien zusammenfassen. Theoretisch muss die gleiche Menge an Code heruntergeladen werden, aber es werden viel weniger Anfragen an den Server gestellt.
Es lohnt sich auch, den Code zu verkleinern, d. h. ihn durch Entfernen unnötiger Zeichen, Kommentare, Einrückungen usw. zu reduzieren.
Mach es mit deinem Kopf
Natürlich würde niemand, der bei Verstand ist, dies manuell tun (außer vielleicht in Ausnahmefällen). Die Sache ist einfach, wenn Sie ein gängiges CMS verwenden – für WordPress zum Beispiel ist ein richtig konfiguriertes Plug-in wie W3 Total Cache ideal für das Zusammenführen und Mining. Wenn Sie mit einem anderen (auch angepassten) System arbeiten, ist das kein Problem – es gibt unzählige Lösungen:
- Codeburst-Anleitung
- Minifizierung mit Grunt
- Sehen Sie sich auch an, was Onkel Google selbst empfiehlt
Sie können auch andere Dateien minifizieren, vor allem den HTML-Code selbst, was ich vor allem Clutterern wie mir empfehle. Geben Sie den Code mühelos ein.
Schritt 3: Erfassungsfunktion in Chrome DevTools
Wenn Sie SEO betreiben wollen, müssen Sie DevTools im Chrome-Browser kennen.
Wenn Sie gutes SEO betreiben wollen, müssen Sie die versteckten Funktionen in DevTools kennen.
Paulo Coelho
Eine der versteckten (oder zumindest nicht besonders sichtbaren) Funktionen der Chrome-Tools ist Coverage. Sie zeigt, wie viel Prozent der geladenen JS-Skripte und CSS-Sheets tatsächlich verwendet werden.
Während ich diese Zeilen schreibe, ist Coverage immer noch eine Funktion, die unter „More Tools“ versteckt ist. Ich habe jedoch keinen Zweifel daran, dass es in absehbarer Zeit in die Haupttoolbox einziehen wird, weil es von den Webmastern ganz einfach dringend benötigt wird.
Mit Coverage ist es sehr einfach zu erkennen, welche Codeschnipsel tatsächlich auf unserer Website verwendet werden, und Code zu verwerfen, der nicht sinnvoll zu laden ist.
Mit Coverage erhalten wir die Informationen:
- wie viel Prozent der erklärten Regeln, Funktionen oder Variablen tatsächlich aufgerufen werden, wenn die Website vollständig geladen ist
- Für jede Datei wird die rote Farbe verwendet, um die nicht verwendeten Teile zu kennzeichnen.
So lösen Sie die Funktion „Abdeckung“ aus
- Navigieren Sie in Chrome zu der Seite, die Sie untersuchen möchten
- DevTools aufrufen (F12 oder Strg+Umschalt+i oder mit der rechten Maustaste auf ein beliebiges Element klicken und „Untersuchen“ wählen)
- Strg + Umschalt + P rufen Sie die Befehlszeile auf und geben Coverage* ein.
- Starten Sie die Registrierung, indem Sie auf den schwarzen Punkt klicken:
- die Seite aktualisieren
*Anstelle der Befehlszeile können wir auch auf das 3-Punkte-Symbol klicken -> More tools -> Coverage
Wie Sie sehen, ist das Einsparungspotenzial groß, und diese Art von Ergebnissen ist die Norm:
Es ist jedoch zu bedenken, dass selbst wenn der betreffende Code auf den analysierten Seiten nicht verwendet wurde, dies nicht bedeutet, dass wir ihn sofort löschen können. Wer weiß, wann Sie plötzlich eine Vorliebe für die Verwendung von z. B. <blockquote> und Sie fangen an, dieses Element überall hinzuschieben, wo Sie können, ohne semantische Rechtfertigung (wie ich es in diesem Absatz getan habe).
Die größte Sünde der Berichterstattung
Es ist ein fatales Missverständnis, dass die Aufzeichnung von Coverage neu gestartet wird, wenn Sie zur nächsten Unterseite wechseln.
In den ersten Versionen (Canary) gab es dieses Problem nicht, und Coverage sammelte Daten, solange die Datenprotokollierungstaste gedrückt wurde(entsprechender Beitrag auf Stack Overflow).
Mir ist klar, dass sich das Tool noch im Anfangsstadium befindet, aber da es seinen Weg in die stabile Version von Chrome gefunden hat, wäre es schön, wenn es sein volles Potenzial entfalten könnte.
Wie auch immer, dieser Fehler wird wahrscheinlich in einer zukünftigen Version von Chrome behoben werden.
Alternativen zur Deckung
- Unbenutzte CSS – kostenpflichtiges Tool
- CSS bereinigen
- PurifyCSS Online
- für JS sind mir keine Alternativen bekannt
… und obendrein ist keiner von ihnen perfekt.
Immer noch nicht alles klar?
Wenn Sie trotz dieses brillanten Leitfadens Ihre Website immer noch nicht von unnötigem Code befreien können, laden wir Sie ein, mich zu kontaktieren. Mal sehen, was ich für Ihre Website tun kann.
