35 Performance-Optimierungen für Ihre WordPress-Website
Eine mit Canvas erstellte Seite lädt nur das CSS und JavaScript der Blöcke, die sie darstellt, und sonst nichts. Darauf aufbauend stehen 35 Optimierungen bereit, jede davon ein Schalter, den Sie selbst steuern, mit zurückhaltenden Standardwerten und einer verständlichen Erklärung, was sie bewirkt.
Zuletzt aktualisiert am
Laden von Assets pro Block
Die meisten Themes liefern ein großes Stylesheet und ein großes Script aus, und jede Seite zahlt für jede Funktion im Theme. Canvas ordnet jeden seiner 314 Blöcke dem CSS und JavaScript zu, das dieser Block benötigt, und lädt anschließend die Gesamtmenge dessen, was die Seite tatsächlich gerendert hat.
- Eine Preisseite lädt das Slider-Skript niemals
- Eine Seite ohne Formular lädt nie den Formular-Handler herunter
- Der Editor lädt die Blockstile auf dieselbe Weise.
- Keine Einstellungen nötig und keine Möglichkeit, es versehentlich auszuschalten
Angegeben, nicht geschätzt
Jeder Block deklariert seine eigenen Assets. Die Zuordnung liegt im Block, daher gibt es keine zentrale Liste, die jemand vergessen könnte zu aktualisieren.
Funktioniert mit den Core-Blöcken
Core-Blöcke und Blöcke von Drittanbietern behalten ihr eigenes Ladeverhalten bei. Canvas übernimmt ihre Assets nicht und streitet sich nicht mit WordPress darum.
Auch Templates zählen
Header, Footer, Seitentitel und Slider sind ebenfalls Blöcke, sodass eine Seite mit einem einfachen Header nicht den Code für das Mega-Menü lädt.
Nichts extra zu kaufen
Bedingtes Laden ist kein Premium-Feature und kein Add-on. So arbeitet die Bibliothek bei jedem Tarif und auch bei abgelaufener Lizenz.
35 Optimierungen, nach betroffenem Bereich gruppiert
Nichts hier ist Zauberei und nichts davon ist versteckt. Jede Maßnahme verändert auf konkrete, überprüfbare Weise die Seite, die WordPress ausliefert.
Laden 7
Verhindern Sie, dass CSS und JavaScript den ersten Seitenaufbau blockieren, und laden Sie die nächste Seite frühzeitig vor.
- Nicht kritische Stylesheets asynchron laden
- Nicht kritisches JavaScript verzögert laden
- JavaScript bis zur ersten Interaktion verzögern
- Das größte Bild im sichtbaren Bereich vorab laden
- Preconnect zu den Ursprüngen herstellen, die die Seite nutzt
- DNS-Prefetch für Drittanbieter-Hosts
- Spekulatives Laden, sodass die nächste Seite abgerufen wird, bevor sie angeklickt wird
Schriften 3
Text bleibt lesbar, während eine Webschrift noch geladen wird, und Google-Schriften müssen gar keine Anfrage an einen Drittanbieter stellen.
- Fügen Sie Ihren Webfonts font-display swap hinzu
- Schriftarten für den ersten Bildschirm vorladen
- Google-Schriften von Ihrem eigenen Server ausliefern
Medien 6
Bilder sind auf den meisten Seiten das Schwerste, und sie lassen sich am leichtesten falsch umsetzen.
- Bilder unterhalb des sichtbaren Bereichs verzögert laden
- Lazy Loading für iFrames und Einbettungen
- Legen Sie die JPEG-Qualität fest, die WordPress generiert
- Maximale Breite hochgeladener Bilder begrenzen
- Steuern Sie die responsiven Bildsets, die WordPress anlegt
- Festlegen, welche Bildgrößen überhaupt erzeugt werden
Bereinigung 8
WordPress liefert Funktionen mit, die jede Website mitbezahlt, obwohl nur wenige Websites sie nutzen.
- Query-Strings aus statischen Ressourcen entfernen
- Emoji-Skripte und -Stile deaktivieren
- oEmbed-Erkennung und Embed-Skript deaktivieren
- Dashicons im Frontend deaktivieren
- XML-RPC deaktivieren
- RSS-Feeds deaktivieren
- jQuery Migrate entfernen
- Selbst-Pingbacks deaktivieren
Datenbank 5
Der Admin-Bereich einer langsamen Website: Revisionen, automatische Speicherungen und ein Heartbeat, der nie aufhört.
- Anzahl der gespeicherten Revisionen pro Beitrag begrenzen
- Intervall für Autosave festlegen
- Admin-Heartbeat drosseln oder deaktivieren
- Revisionen, Transients und Spam aus der Datenbank bereinigen
- REST-API auf angemeldete Benutzer beschränken
WooCommerce 5
Ein Shop lädt seine Skripte auf jeder Seite der Website, auch auf denen, die nichts verkaufen.
- JavaScript von WooCommerce auf Seiten ohne Shop-Ausgabe entfernen
- Tracking der Bestellzuordnung deaktivieren
- Abfragen des Cart-Fragments-Skripts auf jeder Seite unterbinden
- Entfernen Sie die Bibliothek für die Passwortstärke außerhalb der Kontoseiten
- Mitgelieferte Select2-Bibliothek außerhalb des Checkouts entfernen
Umschreibung für Content-Delivery-Network 1
Leiten Sie Stylesheets, Skripte, Bilder und Schriften über ein Auslieferungsnetzwerk, für das Sie bereits bezahlen, indem Sie deren Adressen beim Rendern der Seite umschreiben. Canvas verkauft Ihnen kein Netzwerk und leitet Ihren Datenverkehr nicht über unsere Server.
Das sind insgesamt 35 Schalter, und die fünf WooCommerce-Schalter erscheinen nur, wenn WooCommerce aktiv ist. Mehr zur Shop-Integration.
Jede davon ist ein Schalter, und die Standardeinstellungen sind bewusst zurückhaltend
Canvas aktiviert, was für jede Website unbedenklich ist, und überlässt den Rest Ihnen, wobei der Grund neben der jeweiligen Option steht. Die eine Einstellung, die meist keine gute Idee ist, weist im Panel darauf hin, genau dort, wo Sie sich bei der Entscheidung befinden.
Grundlagen für SEO und Barrierefreiheit
Eine Seite, die schnell lädt, aber nicht gelesen, gecrawlt oder mit der Tastatur bedient werden kann, ist nicht fertig. All das ist im Theme selbst enthalten, in jedem Tarif, ohne dass etwas hinter einem Upgrade versteckt ist.
Metadaten aus Ihren Inhalten
Titel, Beschreibungen, Social Cards, kanonische URLs, Robots-Regeln und eine Sitemap, alle aus der Seite abgeleitet, so wie sie angezeigt wird. Es gibt keine zweite Kopie Ihrer eigenen Inhalte, die aktuell gehalten werden müsste.
16 Schema-Typen
Organization, WebSite, WebPage, Person, Breadcrumbs, Product, Brand, Offer, Review und Bewertung, Adresse, Geokoordinaten, Öffnungszeiten und Website-Suche, jeweils dort ausgegeben, wo sie zutreffen.
Semantische Landmarken
Header-, Navigations-, Hauptinhalts- und Fußbereich als Landmarken, ein Sprunglink zum Inhalt, Überschriften in logischer Reihenfolge und sichtbarer Fokus auf allem, was sich erreichen lässt.
Tastaturgesteuerte Menüs
Menüs, Mega-Menüs, Seitenpanels und Modals lassen sich per Tastatur öffnen, verschieben und schließen. Bewegungen berücksichtigen die Einstellung zur reduzierten Bewegung des Besuchers.
Barrierefreiheit, Sicherheit und Datenexport sind niemals Premium-Funktionen. Sie bleiben auch mit abgelaufener Lizenz verfügbar, denn eine Website, die nicht mehr nutzbar ist, ist ein Support-Problem und niemals eine lizenzbezogene Entscheidung.
So prüfen wir das
Aussagen über Geschwindigkeit und Barrierefreiheit lassen sich leicht treffen und leicht überprüfen. Wir überprüfen unsere, und hier zeigen wir Ihnen, wie.
Seiten werden in einem echten Browser mit ihren Designs verglichen
Jede Demo-Seite wird in einem Browser gerendert und mit dem Design abgeglichen, auf dem sie basiert: Dokumenthöhe, Abschnittsbreiten, berechnete Abstände sowie alles, was JavaScript steuert. Letzteres wird erst gemessen, nachdem es ausgeführt wurde, niemals beim ersten Paint.
Diese Website wird bei drei Bildschirmbreiten geprüft
Jede Seite hier wird mit axe-core gegen WCAG 2.1 A und AA bei 1440, 1024 und 390 Pixeln geprüft, zusätzlich zu den Prüfungen, die axe nicht durchführt: genau ein h1-Element, Überschriftenebenen, die nie übersprungen werden, die vier Landmarks, ein funktionierender Skip-Link, kein horizontaler Überlauf, kein Text unter 12 Pixeln, Links, die als Text lesbar sind, und Tap-Ziele von mindestens 24 Pixeln.
Was Canvas zum Betrieb benötigt
WordPress
Canvas basiert auf dem Blockeditor und setzt daher eine WordPress-Installation mit Website-Editor voraus. Version 7.1 oder neuer.
PHP
PHP 7.4 oder neuer. Eine aktuelle PHP-Version ist die einfachste Maßnahme zur Leistungssteigerung, die die meisten Websites umsetzen können.
Getestet bis zu
Canvas wird mit WordPress 7.1 getestet, und nach jeder neuen WordPress-Version folgt ein Update.
Zur Performance
Dazu gehört auch die Frage, die uns am häufigsten gestellt wird, weshalb es auf dieser Seite keine Punktzahlen gibt.
Benötige ich noch ein Caching-Plugin?
Wahrscheinlich schon, und das ist die ehrliche Antwort. Canvas übernimmt die Aufgaben, die auch ein Theme und WordPress steuern: welche Assets eine Seite lädt, wie sich Schriften und Bilder verhalten und wie viel Arbeit die Datenbank leistet. Seiten-Caching, Objekt-Caching und Edge-Auslieferung gehören zu Ihrem Hoster oder einem Caching-Plugin. Es sind unterschiedliche Aufgaben, daher ist die Kombination beider der übliche Aufbau.
Wird meine Website kaputtgehen, wenn ich diese Funktionen aktiviere?
Jeder Schalter lässt sich rückgängig machen, und die Schalter, die am ehesten mit einem anderen Plugin in Konflikt geraten, sind zunächst ausgeschaltet. Jeder Schalter erklärt, was er tut und wann Sie ihn besser unverändert lassen. Die Einstellung, die tatsächlich riskant ist, kennzeichnet dies im Panel. Aktivieren Sie die Schalter einzeln und laden Sie nach jeder Aktivierung das Frontend neu.
Muss ich das Laden der Assets pro Block konfigurieren?
Nein, es gibt nichts zu finden und zu aktivieren. So funktioniert die Blockbibliothek. Jeder Block deklariert das CSS und JavaScript, das er benötigt, und die Seite lädt nur die Vereinigungsmenge dessen, was sie tatsächlich gerendert hat.
Werden die Demos optimiert ausgeliefert?
Ein websiteweiter Demo-Import übernimmt die Theme-Optionen der Demo, und die Performance-Schalter sind Teil davon, sodass eine Demo mit den Einstellungen startet, mit denen sie erstellt und geprüft wurde. Sie können sie danach jederzeit ändern.
Warum veröffentlicht diese Seite keine Geschwindigkeitswerte?
Denn ein Wert aus einem synthetischen Test auf unserer Hardware sagt nichts über Ihren Hosting-Anbieter, Ihre Plugins, Ihre Bilder oder Ihre Besucher aus. Deshalb veröffentlichen wir genau, was jede Optimierung bewirkt, damit Sie sie aktivieren und Ihre eigene Website auf Ihrer eigenen Infrastruktur messen können.
Eine schnelle Website, die Sie weiterhin bearbeiten können
Jeder Tarif enthält dieselbe Block-Bibliothek, dieselben 35 Optimierungen und dasselbe bedingte Laden der Assets. Es gibt keine Leistungsstufe.