ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So entfernen Sie Rendering-blockierendes JS und CSS für die Geschwindigkeit der Website
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)
Wie man
MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?
Gegen
macOS: So verwenden Sie Schnellaktionen im Finder
Wie man
Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)
Wie man
iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe
Wie man
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > So entfernen Sie Rendering-blockierendes JS und CSS für die Geschwindigkeit der Website
Tutorials

So entfernen Sie Rendering-blockierendes JS und CSS für die Geschwindigkeit der Website

Zuletzt aktualisiert: November 12, 2021 12:56 am
ThemeLocal vor 1 Jahr 11 Minuten Mindestlesezeit
Aktie
11 Minuten Mindestlesezeit
Aktie

Während die Ästhetik einer Website wichtig ist, sorgen ihr Inhalt und ihre Ladegeschwindigkeit dafür, dass die Leute immer wiederkommen. WordPress bietet Benutzern eine ausgeklügelte Toolbox von Plugins und Themes, um schnell ihre eigenen benutzerdefinierten Websites zu erstellen.

Contents
Was sind Rendering-blockierende JS- und CSS-Skripte und warum sind sie schlecht?So optimieren Sie Ihre Website, indem Sie Render-Blocking-Skripte finden und beheben1. Optimieren Sie die Ladereihenfolge2. Code minimieren3. Verwenden Sie verzögertes und asynchrones Laden von JavaScript4. Ersetzen Sie visuelle JavaScript-Elemente durch CSS35. Beseitigen Sie alle unnötigen Skripte6. Verwenden von Plugins zur Optimierung Ihrer WordPress-Website

Diese Themes und Plugins benötigen jedoch JavaScript (JS) und Cascading Style Sheets (CSS), um zu funktionieren. WordPress erstellt sie automatisch in Form von Skriptdateien. Sie sind oft schlecht optimiert. Als solche können sie Ihre Website erheblich verlangsamen.

Dies kann für die Leser frustrierend sein. Daher werden wir in diesem Handbuch untersuchen, wie Sie diese Render-Blocking-Skripte finden und entfernen und Ihnen zeigen, wie Sie die Ladegeschwindigkeit Ihrer WordPress-Website erhöhen können.

Was sind Rendering-blockierende JS- und CSS-Skripte und warum sind sie schlecht?

WordPress-Skripte

Die meisten Webseiten im Internet bestehen aus drei Schlüsselkomponenten: JavaScript, CSS und Hypertext Markup Languages. HTML dient als Basis, während JavaScript und CSS darin eingebettet sind. Heutzutage ist es jedoch üblicher, Aufrufe externer Skripte in das HTML-Dokument einzubetten.

Diese Skripte werden in einer Warteschlange gehalten, die Ihr Webbrowser zum Rendern der Webseite verwendet. Der einfachste Weg, um zu sehen, welche Skripte eine Webseite verwendet, ohne sich den Quellcode anzusehen, besteht darin, sie von Ihrem (Strg + S) Webbrowser herunterzuladen. Der Webbrowser lädt das HTML-Dokument zusammen mit einem Ordner mit allen (oder den meisten) Skripten, Bildern und anderen Dateien herunter, die die Webseite verwendet.

Je komplexere Skripte Ihre Webseite aus der Warteschlange aufrufen muss, desto länger dauert das Rendern. Häufig laden Webbrowser Webseitenressourcen wie Skripte und Bilder in einen lokalen Cache herunter, um Webseiten schneller zu laden. Während Benutzer auf der Client-Seite die Renderzeiten von Webseiten um beschleunigen können JavaScript deaktivieren, die Cachegröße erhöhen und AdBlocker verwenden, ist dies keine ideale Lösung. Die Verantwortung sollte beim Webentwickler liegen.

Wenn Sie Beschwerden erhalten oder festgestellt haben, dass auf Ihrer Website Probleme beim Rendern des Inhalts auftreten, ist es noch nicht zu spät, das Problem zu beheben.

So optimieren Sie Ihre Website, indem Sie Render-Blocking-Skripte finden und beheben

Bevor Sie entscheiden, welche Skripte Sie beenden oder optimieren möchten, müssen Sie die Geschwindigkeit Ihrer Website oder Webseite bewerten. Sie können eine Online-Plattform wie GTmetrix oder Googles PageSpeed ​​Insights verwenden. Sie müssen lediglich die URL der Website oder Webseite eingeben, die Sie testen möchten, und das Tool bewertet sie und liefert weitere Erkenntnisse.

Sie werden auch Audits vorschlagen, mit denen Sie Ihre Website schneller machen können. Sie schlagen beispielsweise vor, weniger Elemente auf Ihrer Webseite zu verwenden oder ungenutztes CSS und JavaScript zu reduzieren. GTmetrix geht so weit, Ihnen zu zeigen, welche Skripte optimiert werden müssen.

Registerkarte „Abdeckung“ in Chrome DevTools

Alternativ können Sie Registerkarte „Abdeckung“ in Chrome DevTools um Ihnen die Nutzungsdaten Ihrer Skripte anzuzeigen. Sobald Sie erkannt haben, welche Skripte nicht optimal sind, können Sie einige Dinge tun, um sie zu beheben. Diese Schritte erfordern jedoch einiges an Programmierkenntnissen, um sie erfolgreich zu implementieren. Sie benötigen zumindest ein grundlegendes Verständnis der funktionalen JavaScript-Programmierung.

Die Teilnahme an einem Coding-Tutorial-Kurs (oder Bootcamp) ist auch eine gute Idee, um Ihre Fähigkeiten weiterzuentwickeln. Im Durchschnitt kann ein Coding Bootcamp bis zu 15 Wochen bis zum Abschluss, und dies mag sich nach einer langen Zeit anhören, aber es lohnt sich, wenn man bedenkt, wie wichtig grundlegende Codekompetenz in der modernen Welt ist. Dennoch finden Sie hier fünf Möglichkeiten, Render-Blocking-Skripte zu beheben und die Geschwindigkeit Ihrer Webseite zu erhöhen.

1. Optimieren Sie die Ladereihenfolge

Der Kopfbereich () der Webseite wird zum Vorladen von Elementen verwendet. Die Grundlage Ihrer Webseite sollte hier liegen, damit der Benutzer beim Laden Ihrer Webseite nicht mit einem weißen Bildschirm begrüßt wird. Obwohl eingebettetes CSS in Ordnung ist, sollten Sie es vermeiden, JavaScript hier einzufügen.

Nachdem Sie das Kopfteil optimiert haben, müssen Sie den Körper optimieren. Die meisten Webbrowser rendern Webseiten von oben nach unten. Sie müssen Aufrufe von Skripten nach ihrer Wichtigkeit und Komplexität ordnen. Sie sollten Skripte, die für das Rendering der Webseite nicht entscheidend sind, zuletzt zusammen mit komplexen Skripten platzieren, die Zeit in Anspruch nehmen.

2. Code minimieren

Das Minimieren von Code beinhaltet das Umschreiben und das Löschen unnötiger Zeichen wie Leerzeichen, Kommentare, Kommas, Zeilenumbrüche usw. Dadurch wird der Code prägnanter und kompakter, was letztendlich die Größe des Skripts reduziert und die Ladezeiten für Ihre Webseite erhöht.

Plugins und Tools wie W3TC verfügen über Module, die JavaScript und CSS in Ihren Themes verkleinern. Alternativ können Sie Ihren Skriptcode auch manuell mit einem kostenlosen Online-Tool wie JavaScript Minifier verkleinern.

3. Verwenden Sie verzögertes und asynchrones Laden von JavaScript

Webbrowser lesen Code von oben nach unten. Wenn sie auf ein Skript-Tag stoßen, stoppen sie das Laden der Webseite und lesen die Skriptdatei. Dies verlangsamt das Rendern.

Du kannst den … benutzen asynchron -Attribut, um das Skript parallel zur Webseite zu laden und auszuführen, sobald es verfügbar ist. Alternativ können Sie die verschieben -Attribut, um das Parsen von Skripten zu verzögern. Dies bedeutet, dass es das Skript auch parallel zur Webseite lädt, es jedoch nur ausführt, wenn der Browser die Webseite parst.

Wir raten davon ab, die asynchron oder verschieben Attribute für Skripte, die zum Rendern und Anzeigen von visuellen Elementen verwendet werden. Die JavaScript-Schlüsselwortäquivalente zu diesen Attributen sind die asynchron und erwarten Schlüsselwörter. Sie können sie verwenden, um Laden Sie Ihre Javascripts asynchroner ohne die HTML-Tags auf Ihrer Webseite zu bearbeiten.

4. Ersetzen Sie visuelle JavaScript-Elemente durch CSS3

In der Vergangenheit war CSS nicht so vielseitig wie heute. CSS 1.0 und 2.0 enthielten beispielsweise keine UI-Tools wie grundlegende Steuerelemente und Schieberegler.

Dann kam CSS 3. Es präsentierte neue Farben, Boxschatten, Deckkraft usw. JavaScript eignet sich hervorragend zum Hinzufügen komplexer Steuerelemente für die Benutzeroberfläche. Javascript ist jedoch ressourcenintensiver als CSS.

Daher verlangsamt die Verwendung übermäßiger JavaScript-Mengen Ihre Website erheblich. Wenn Sie feststellen, dass Ihre Webseite JavaScript verwendet, um die Lücke zu schließen, wo frühere CSS-Versionen versagt haben, sollten Sie es ändern und alles unnötige JavaScript durch CSS ersetzen – wo Sie können. Dadurch können Webseiten schneller geladen werden.

5. Beseitigen Sie alle unnötigen Skripte

Der Zweck von JS und CSS besteht darin, die Funktionalität auf Webseiten zu erweitern und Logik hinzuzufügen, wo HTML dies nicht kann. HTML 5.3 kam jedoch mit neuen Tags, die einige CSS- und JS-Operationen überflüssig machen würden. Durch die Verwendung von HTML anstelle von Skripten werden Ihre Webseiten natürlich schneller geladen.

Daher ist der beste Weg, um die Geschwindigkeit Ihrer Website zu optimieren, alle ungenutzten Skripte zu eliminieren. Sie müssen analysieren, welche Skripte völlig unnötig sind, und sie entfernen. Auch hier können Sie die Registerkarte Coverage von Chrome DevTools oder GTmetrix verwenden, um die am wenigsten genutzten Skripte auf Ihrer Webseite zu finden und sie dann zu entfernen.

Nachdem Sie alle unnötigen Funktionen oder Tags entfernt haben, können Sie Skripte kombinieren, deren Funktionen ähnlich sind. Wenn Sie bereits wissen, wie Sie sich im Quellcode Ihrer Webseite zurechtfinden, sollte dies keine schwierige Aufgabe für Sie sein. Benutzer, die im Webdesign nicht so erfahren oder versiert sind, sollten sich jedoch keine Sorgen machen. WordPress erleichtert es Ihnen, Skripte auf Ihrer Website zu erkennen und mit verschiedenen Optimierungs-Plugins zu bearbeiten. Wir werden diese als nächstes behandeln.

6. Verwenden von Plugins zur Optimierung Ihrer WordPress-Website

Auch hier benötigen Sie keine Programmierkenntnisse, um Ihre WP-Website zu optimieren. Obwohl etwas Erfahrung hilfreich wäre. Dennoch gibt es eine Reihe von Plugins, die auf die Skriptoptimierung ausgerichtet sind. Einige von ihnen verwenden KI, um Code zu minimieren, die Ladereihenfolge zu ändern und nicht ausgelastete Skripte durch effizienteren Code und effizientere Skripte zu ersetzen.

Einige der besten Plugins für die Skriptoptimierung sind:

  • WP-Rakete: Dies ist eines der beliebtesten Plugins für die Weboptimierung. Es kann automatisch erkennen, welche Skripte problematisch sind, und sie für Sie beheben. Sie können es für schnelles Caching, Deferenz, Komprimierung und Minimierung verwenden.
  • Autooptimieren: Dies kann nicht notwendige Skripte zurückstellen und eliminieren, Inline-CSS integrieren und Skripte, HTML und Bilder minimieren. Autoptimize ist durch eine offene API und erweiterte Optionen hochgradig anpassbar.
  • W3 Gesamtcache: Dieses Plugin erfordert ein wenig Arbeit, um es zu verwenden. Sie müssen Skripts manuell nachverfolgen und identifizieren, bevor Sie sie entfernen oder bearbeiten. In den meisten Fällen ist dieses Plugin bereits mit Ihrem WordPress-Paket verfügbar.
  • Asynchrones Javascript: Ein Open-Source-Plugin von WordPress. Es ermöglicht Ihnen, JavaScript zu erkennen, das das Rendern blockiert, und es dann zu verschieben oder asynchron zu laden.

Warum haben wir also nicht gleich Plugins empfohlen? Leider werden Sie einige dieser Plugins kosten. Autoptimize kostet beispielsweise 49 US-Dollar pro Jahr. Obwohl es sich um eine angemessene Gebühr handelt, kann sie für Leute, die bereits einen großen Teil des Geldes für das Hosting und andere Anwendungen und Plugins bezahlen, ungeeignet sein.

Unabhängig davon, ob Sie Plugins verwenden oder manuell nach Skripten suchen, müssen Sie jedoch Konzepte wie Minimierung, asynchrones Laden und Ladereihenfolge verstehen. Es erleichtert Ihnen die Behebung von Ladeproblemen, falls eines Ihrer Skripte fehlschlägt.

Verwandter Beitrag

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?

macOS: So verwenden Sie Schnellaktionen im Finder

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

MARKIERTE: CSS, der, die, entfernen, für, Geschwindigkeit, Renderingblockierendes, Sie, und, Website
ThemeLocal November 12, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel So verwenden Sie Google Lighthouse Audits zur Verbesserung der Geschwindigkeit
Nächster Artikel So senden Sie Abonnenten automatisch neue Beiträge per E-Mail
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

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

Berühmter Post

https://blog.hootsuite.com/experiment-instagram-alt-text/
Strategie
So fügen Sie Live-Fotos Looping- und Bouncing-Effekte hinzu
Wie man
So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)
Wie man
Philips Serie 7000 im Test
Technische Bewertungen
So ersetzen Sie die Joystick-Kappen am DualSense Edge
Wie man
Nokia G22 vs. Nokia G21: Was ist der Unterschied?
Gegen

También podría gustarte

Wie man

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

vor 22 Minuten 4 Minuten Mindestlesezeit
Gegen

MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?

vor 4 Stunden 11 Minuten Mindestlesezeit
Wie man

macOS: So verwenden Sie Schnellaktionen im Finder

vor 4 Stunden 3 Minuten Mindestlesezeit
Wie man

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

vor 5 Stunden 4 Minuten Mindestlesezeit
Wie man

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

vor 9 Stunden 3 Minuten Mindestlesezeit
Wie man

So erstellen Sie ein GIF in Photoshop

vor 12 Stunden 3 Minuten Mindestlesezeit
Gegen

Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?

vor 13 Stunden 3 Minuten Mindestlesezeit
Wie man

SharePlay: So trainieren Sie mit Freunden mit Apple Fitness Plus

vor 13 Stunden 3 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?