So optimieren Sie die CSS-Bereitstellung in WordPress mit wenig Aufwand
CSS kann das Gesamtbild Ihrer Website verbessern und ist einfach zu verwenden, zu bearbeiten und zu warten. Der einzige Nachteil ist die Möglichkeit, die Ladegeschwindigkeit Ihrer Seite zu verlangsamen. Daher zeigt Ihnen dieser Artikel, der von unserem Team bei WpDataTables erstellt wurde, wie Sie die CSS-Bereitstellung in WordPress optimieren können.
Wenn CSS nicht gut geliefert wird, muss der Browser Daten verarbeiten und herunterladen, bevor er Ihre Seite fertig gerendert hat. Dies bedeutet, dass Besucher Ihre Seite mit einer Verzögerung sehen und möglicherweise abklicken, da sie anscheinend nicht geladen wird. Daher ist es wichtig, die CSS-Bereitstellung zu optimieren. Lesen Sie also weiter, um zu erfahren, wie Sie die Fallstricke vermeiden können, die Ihre Webseite verlangsamen könnten.
Alles über die CSS-Bereitstellung
Grundsätzlich macht CSS, ein Cascading Style Sheet, Websites attraktiv, und ohne sie würden Websites immer noch in den 90er Jahren stecken bleiben.
Webseiten, einschließlich WordPress-Webseiten, werden durch CSS gestaltet. Jedes WordPress-Theme verwendet eine style.cc-Datei, um ein elegantes Aussehen zu erzeugen. Durch das Hinzufügen von Plugins werden weitere Stylesheets hinzugefügt. Wenn Sie beispielsweise ein Widget-Plugin herunterladen, wird eine zusätzliche CSS-Datei (Stylesheet) hinzugefügt, um das gewünschte Aussehen zu erzielen.
CSS-Skripte werden geladen, bevor Ihre Website sichtbar ist, was bedeutet, dass Ihr Browser keine Inhalte anzeigt, bis die angegebenen CSS-Informationen verarbeitet wurden.. Dies führt zu einer Renderblockierung, die auftritt, wenn ein Browser alle CSS-Skripte lädt, bevor er eine Website anzeigt.
CSS kann auf vielfältige Weise für die Bereitstellung in WordPress verwendet werden, mit vielen verschiedenen Setups.
Unabhängig davon, wie Sie Ihre Webseite eingerichtet haben, kann CSS tatsächlich dazu beitragen, Ihre Website schneller zu rendern.
Rendering-blockierendes JavaScript und CSS – was ist das?
Schnell ladende Seiten werden in unserer High-Tech-Gesellschaft erwartet und sind für hochrangige SEO von entscheidender Bedeutung. Die PageSpeed Insights von Google können Ihnen helfen, die Ladegeschwindigkeit Ihrer Website zu verstehen. Manchmal erscheint eine Warnung, wenn Sie das Tool verwenden – „Beseitigen Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten „above the fold”, aber hier ist eine Lösung für dieses Problem.
Das Rendern des HTML-Codes ist erforderlich, bevor ein Browser eine Webseite anzeigen kann. Dabei stößt es auf Skripte und Stylesheets und muss anhalten, um diese Datei anzufordern und herunterzuladen. Dann führt es es aus und geht weiter durch den HTML-Code. Die meisten Themes und Plugins für WordPress verwenden viele JavaScript- und/oder CSS-Dateien, was dazu führen kann, dass es lange dauert, auch nur eine Seite Ihrer Website zu rendern.
Dies verhindert, dass Ihre Website-Besucher die Informationen der Webseiten schnell sehen, und zu allem Übel müssen diese Skripte nicht sofort geladen werden.
Diese unnötigen Dateien sind als renderblockierendes CSS und JavaScript bekannt. Lesen Sie weiter, um herauszufinden, was sie sind und wie Sie sie von Ihrer WordPress-Site entfernen können.
Verwenden Sie Google Pagespeed Insights, um Render-blockierendes CSS und JavaScript zu entdecken
Langsam ladende Browser versuchen normalerweise, eine erhebliche Menge an CSS-Code zu verarbeiten und können daher die Seite nicht rendern, aber nicht jede CSS-Ressource blockiert das Rendering.
Websites erscheinen leer oder nur teilweise sichtbar, wenn das CSS falsch geladen wurde oder wenn das CSS nicht optimiert ist, was zu falschen Schriftarten oder Layouts führen kann.
Es ist wichtig zu verstehen, welche Elemente notwendig sind und welche nicht, um die Bereitstellung von CSS zu optimieren.
Um den Rendering-Blocking-Prozess zu starten, testen Sie zunächst die Geschwindigkeit Ihrer Website mit Google PageSpeed Insights.
Hier ist wie:
- Rufen Sie die Google PageSpeed Insights-Seite auf
- Kopieren Sie die URL unserer Website und fügen Sie sie in das entsprechende Feld ein
- Klicken Sie auf „Analysieren”.
- Dies führt zu einem Bericht. Beachten Sie die Skripte, die als „Renderblockierendes JavaScript und CSS beseitigen” angezeigt werden.
Normalerweise sind diese CSS für Ihre Website von entscheidender Bedeutung:
- Seitenstile über dem Falz
- Themen
- Farbe des Hintergrunds
- Andere, je nach Art der Website
Diese CSS sind normalerweise weniger wichtig:
- Below the fold CSS
- CSS für andere Geräte
Reduzieren Sie Render-Blocking-Skripts
Es ist möglich, die Anzahl der Render-Blocking-Skripte auf Ihrer Website zu minimieren, indem Sie:
- Reduzierung der Menge an CSS und JavaScript. Sie können unnötige Leerzeichen und Kommentare entfernen
- Kombinieren Sie Ihr CSS und JavaScript. Nehmen Sie verschiedene .css- und .js-Dateien und fügen Sie sie zusammen, was zu weniger Dateien führt.
- JavaScript-Laden verzögern. Sie könnten dafür sorgen, dass sie zuletzt geladen werden, nachdem alles andere geladen wurde, indem Sie asynchrones Laden verwenden.
WordPress verwendet einen kombinierten Filter zum Registrieren von Front-End-Skripten, sodass Sie die eingehenden CSS- oder JavaScript-Dateien sehen können. Möglicherweise wissen Sie nicht, wonach Sie suchen sollen, daher ist die Verwendung eines Plugins hilfreich.
lDas CSS wird nicht immer auf allen Seiten benötigt. Es hat jedoch einen Grund, und Sie werden es irgendwann vollständig verwenden, wo ein kritischer Rendering-Pfad erforderlich ist.
Auf einer Kontaktseite und einer Seite mit von uns angebotenen Dienstleistungen können verschiedene Teile des CSS erforderlich sein. Wenn jemand die Seite „Dienste, die wir anbieten” lädt, sind die CSS-Teile, die nur für die Seite „Kontakt” bestimmt sind, zu diesem Zeitpunkt nicht erforderlich, CSS muss jedoch noch geladen werden, da der Webmaster alle geladenen CSS-Dateien zum Rendern der Webseite benötigt.
Daher benötigt die Website zwar das gesamte CSS, aber nicht das gesamte CSS für jede einzelne Seite. Daher ist kritisches CSS auf jeder Seite und für jeden Benutzer Ihrer Website unterschiedlich.
CSS und JavaScript, die "above the fold" gerendert werden, sind ein ernstes Problem und müssen so schnell wie möglich behoben werden.
Es ist unrealistisch zu erwarten, dass Ihre Website 100/100 Punkte erzielt, also streben Sie eine gute Punktzahl an, die Ihren Besuchern eine schnell ladende Seite bietet.
Entfernen Sie nicht die Skripte, die für eine gute UX erforderlich sind; diese sind wichtiger als der Versuch, eine höhere Punktzahl zu erreichen.
Optimierung des Critical Rendering Path in WordPress
Der kritische Rendering-Pfad bezeichnet die Reihenfolge, in der der Browser Aufgaben zum Rendern Ihrer Seite ausführt, dh die Reihenfolge, in der er CSS, HTML und JavaScript herunterlädt und verarbeitet und im Browser anzeigt.
Der Inhalt "above the fold" ist wichtig, da dies der erste Teil ist, den der Benutzer sieht. Es bleibt mehr Zeit, den Inhalt unterhalb der Falte zu laden, da der Benutzer scrollen muss, um ihn zu sehen.
Um den Above-the-Fold-Abschnitt so schnell wie möglich zu laden, müssen Sie:
- Erstellen Sie den HTML-Code so, dass das Laden von Abschnitten "above the fold" priorisiert wird
- Minimieren Sie die von CSS, JS und HTML verwendeten Daten
Weitere Erklärungen finden Sie in Googles PageSpeed Guide. Manchmal sind die Daten, die Sie zum Laden des ATF benötigen, größer als das Staufenster (in Höhe von 14,6 KB). In diesem Fall müssen mehr Netzwerkfahrten vom Server zum Browser und wieder zurück erfolgen. Mobilfunknetze mit hoher Latenz werden feststellen, dass dies das Laden der Seite verhindert.
Das DOM wird vom Browser Stück für Stück erstellt, was die zum Rendern des ATF benötigte Zeit reduzieren kann. Strukturieren Sie den HTML-Code so, dass der Inhalt „above the fold” zuerst geladen wird und der Rest der Seite danach.
Der Optimierungsprozess erfordert kontinuierliche Verbesserung, Überwachung und Messung.
Während CSS auf vielfältige Weise verwendet werden kann, um elegante Webseiten zu erstellen, ist das Wichtigste, dass es schnell geladen wird. Bereinigen Sie den Code und befolgen Sie die obigen Schritte, damit Ihre Seiten schneller geladen werden.
Wenn Ihnen dieser Artikel über die Optimierung der CSS-Bereitstellung in WordPress gefallen hat, sollten Sie sich diesen Artikel über das Hinzufügen von Meta-Tags in WordPress ohne ein Plugin ansehen.
Wir haben auch über ein paar verwandte Themen geschrieben, z. B. wie man ein PDF in WordPress einbettet, wie man Excel in HTML einbettet, wie man ein ausgewähltes Bild in einem WordPress-Beitrag verbirgt, wie man erkennt, ob es sich bei einer Website um WordPress handelt, wie man WordPress von cPanel deinstalliert und wie man eine Website wie Amazon erstellt.