Ihr Chat-Widget ist live und es funktioniert. Dann öffnen Sie den Shop auf einem Handy, scrollen zu einem Produkt, und der Launcher sitzt auf der "In den Warenkorb"-Leiste. Sie tippen auf "Kaufen", und das Chatfenster öffnet sich.
Der übliche Rat ist, das Widget zu verkleinern, es standardmäßig geschlossen einzustellen und das Skript zu verzögern. Das alles dreht sich um das Gewicht, und das Gewicht ist es wert, überprüft zu werden, also habe ich es getestet. Gleiche Website, Widget ein- und ausgeschaltet, und die Geschwindigkeitswerte waren beide Male gleich.
Manche Widgets sind wirklich schwer und es lohnt sich, sie zu optimieren. Aber ein Widget, das auf Ihrem "In den Warenkorb"-Button sitzt, kostet Sie den Verkauf direkt, und das ist kein Gewichtsproblem.
Es ist ein Positions problem, und der untere Streifen eines Handybildschirms ist der Ort, an dem Ihr Warenkorb, Ihr Cookie-Banner und Ihr Launcher alle um die Vorherrschaft kämpfen.
Unten habe ich die Testergebnisse, wie Sie die Warenkorbleiste Ihres eigenen Themas messen und was Sie für das Widget einstellen müssen, damit es darüber hinwegkommt, durchgesehen.
In diesem Artikel:
- Ihr Chat-Widget ist nicht zu schwer, es ist am falschen Ort
- Was passierte, als wir ein Widget ein- und ausgeschaltet maßen
- So finden Sie heraus, wie hoch Ihre Sticky-Warenkorbleiste tatsächlich ist
- Die Pixel-Schleife und die Einstellungen, die sie beenden
- Häufig gestellte Fragen zu Chat-Widgets auf Mobilgeräten
- Chat-Widget-Optimierung für Mobilgeräte: Worauf es ankommt
Ihr Chat-Widget ist nicht zu schwer, es ist am falschen Ort
Auf einem Handy ist der untere Bildschirmrand umkämpfter Raum. Ihre "In den Warenkorb"-Leiste lebt dort. Ihr Cookie-Banner auch. Und Ihr Chat-Launcher, normalerweise standardmäßig in der unteren rechten Ecke.
Wenn der Launcher auf dem Kauf-Button landet, tippt der Käufer stattdessen auf Chat, anstatt zu kaufen. Das kostet Sie den Verkauf auf eine Weise, wie es ein paar Kilobytes niemals tun werden.
Ich habe einen Lighthouse-Audit auf derselben Website mit und ohne Widget durchgeführt. Die Kurzfassung: Das Widget fügte etwa 148 KiB an Assets hinzu und bewegte kein Core Web Vital.
Die Lösung ist also kein Dateigrößenprojekt. Es sind drei Schritte, in dieser Reihenfolge:
- Wählen Sie die Ecke, die nicht umkämpft ist. Wenn Ihre Warenkorbleiste oder Ihr Banner eine Seite verstopft, verschieben Sie den Launcher auf die andere.
- Messen Sie die Höhe Ihrer Sticky-Leiste. Sie brauchen die echte Zahl von Ihrem eigenen Thema, nicht eine geratene.
- Stellen Sie einen Pixel-Offset vom unteren Rand ein. Dies hebt den Launcher von der Leiste ab, anstatt ihn zu verstecken.
Arbeiten Sie sie in dieser Reihenfolge durch, und die Kollision ist verschwunden, bevor Sie jemals einen Leistungsbericht öffnen.
Was passierte, als wir ein Widget ein- und ausgeschaltet maßen
Ich habe vier identische Seiten auf derselben WordPress-Website eingerichtet. Zwei liefen mit WPChat, zwei hatten überhaupt kein Chat-Widget.
Dann habe ich jede einzelne in PageSpeed Insights auf einem simulierten Mittelklasse-Android über eine langsame Verbindung getestet, zweimal pro Seite, und die Ergebnisse gemittelt.
Hier ist, was zurückkam.
| Metrik | Ohne Widget | Mit Widget |
|---|---|---|
| Leistung | 96.5 | 96.5 |
| First Contentful Paint | 2,0s | 2,0s |
| Largest Contentful Paint | 2,30s | 2,35s |
| Total Blocking Time | 0ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 2,05s | 2,20s |
- Largest Contentful Paint, der Moment, in dem das größte Element auf dem Bildschirm geladen ist, hat sich um 0,05 Sekunden verschoben.
- Speed Index, ungefähr wie schnell die Seite visuell gefüllt wird, hat sich um 0,15 Sekunden verschoben.
Beide liegen innerhalb der normalen Lauf-zu-Lauf-Varianz bei identischen Konfigurationen, daher ist keiner von beiden ein wirklicher Unterschied.
Total Blocking Time und Cumulative Layout Shift blieben bei Null. Das bedeutet, dass das Widget nichts auf dem Hauptthread blockiert und nichts auf der Seite verschoben hat, während es geladen wurde.
Die Kosten zeigen sich stattdessen in den Diagnosedaten. Die Seite ging von 33 KiB an cachefähigen Dateien zu 181 KiB über, was ungefähr 148 KiB an Widget-Assets entspricht, oder etwa der Größe eines mittelgroßen Fotos.
Die einfache Version lautet also: Das Widget kostete etwa 148 KiB und hat keine Core Web Vitals verschoben, was bedeutet, dass keine der drei Lade- und Stabilitätswerte, die Google tatsächlich für das Ranking verwendet.
Solange Sie ein gut codiertes Plugin wie WPChat für Ihr Chat-Widget verwenden, wird die Website-Geschwindigkeit kein Problem für Ihre mobilen Besucher sein.
So finden Sie heraus, wie hoch Ihre Sticky-Warenkorbleiste tatsächlich ist
Jedes Theme erstellt seine Sticky Add to Cart-Leiste anders, daher gibt es keine Zahl, die ich Ihnen nennen kann. Sie müssen Ihre eigene ermitteln. Das dauert etwa zwei Minuten in Ihrem Desktop-Browser.
Hier erfahren Sie, wie Sie sie erhalten.
- Öffnen Sie eine Ihrer Produktseiten in Chrome auf Ihrem Computer. Wählen Sie ein Produkt, das Sie tatsächlich verkaufen, kein Beispielprodukt, da der Inhalt der Leiste das Aussehen verändert.
- Öffnen Sie die Entwicklertools. Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie „Untersuchen“. Ein Fenster öffnet sich an der Seite oder unten auf Ihrem Bildschirm.
- Wechseln Sie zur Telefonansicht. Klicken Sie auf das kleine Telefon- und Tablet-Symbol oben links im Entwicklertools-Fenster mit der Bezeichnung „Geräte-Symbolleiste umschalten“. Die Seite wird in Telefonbreite neu gezeichnet.
- Stellen Sie sie auf eine Telefonbreite ein, 390 ist eine gängige Größe. Oben auf der Seite sehen Sie ein Größenfeld mit einem Dropdown-Menü daneben, das normalerweise „Responsiv“ anzeigt. Geben Sie 390 in das Breitenfeld ein. Ihre Leiste stapelt und formatiert sich bei Telefonbreiten anders als auf einem Desktop-Bildschirm.
- Scrollen Sie nach unten, bis die Sticky-Leiste erscheint. Bei den meisten Themes gleitet sie herein, sobald Sie am Haupt-„In den Warenkorb“-Button vorbeiscrollen.
- Klicken Sie mit der rechten Maustaste auf die Leiste selbst und wählen Sie erneut „Untersuchen“. Chrome springt zu diesem Element im „Elemente“-Panel und hebt es auf der Seite hervor.
- Fahren Sie mit der Maus über die hervorgehobene Zeile im Elemente-Panel. Ein kleiner Tooltip erscheint über der Seite und zeigt zwei Zahlen an, etwa 390 × 64. Die erste ist die Breite, die zweite ist die Höhe. Diese zweite Zahl ist das, wonach Sie gesucht haben.
Schreiben Sie sie auf. Das ist Ihre Leistenhöhe in Pixeln.
Hier sind ein paar Dinge, die Sie von hier aus beachten sollten:
- Wenn die Zahl zu klein aussieht, hast du den Button statt des Balkens ausgewählt. Klicke im Elementefenster auf die Zeile direkt über der aktuellen und achte auf die Hervorhebung. Gehe weiter nach oben, bis sie den gesamten Streifen abdeckt, von Rand zu Rand, und lies dann die Höhe erneut ab.
- Überprüfe ein zweites Produkt. Ein einfaches Produkt mit einem Button ergibt normalerweise einen kürzeren Balken als ein variables Produkt, bei dem eine Mengenauswahl oder ein Varianten-Dropdown ihn höher schiebt.
- Behalte die größere Zahl. Das Widget kann nur eine Höhe haben.
Du hast jetzt eine Zahl. Die nächste Frage ist, wo du sie eingibst, denn viele Widgets bieten dir keinen Platz dafür und geben dir stattdessen CSS.
WPChat hat Felder für genau das: eine Positionseinstellung und separate Pixelabstände vom unteren und rechten Rand.
Diese Zahl in einen Versatz umwandeln
Dein Abstand ist die Balkenhöhe plus ein Spielraum. Wenn dein Balken 64 Pixel misst, stelle den Abstand nicht auf 64 Pixel ein.
Stelle ihn stattdessen auf etwas wie 80 Pixel ein. Der Spielraum ist wichtig, da Tippziele Probleme verursachen können, auch wenn sie sich nicht überschneiden.
Eine Fingerspitze bedeckt weit mehr Bildschirm als ein Mauszeiger, daher führen zwei Steuerelemente, die bündig nebeneinander liegen, zu Fehlklicks, selbst wenn das Layout sauber aussieht. Ein Abstand von 16 Pixel über dem Balken reicht aus, um sie zu trennen.
Die Arbeitsformel lautet also: Balkenhöhe + 16 Pixel = dein unterer Abstand.
Eine Vorsichtsmaßnahme, bevor Sie dieser Zahl vertrauen
DevTools zeichnet dein Layout, aber nicht das Telefon. Die eigene Benutzeroberfläche des Browsers liegt auf einem echten Gerät über der Seite, und das kostet dich Höhe, die der Emulator dir nie zeigt.
Drei Dinge fressen davon:
- Die Browseroberfläche. Die Adressleiste und die Symbolleiste unten in Safari und Chrome auf iOS nehmen echten Platz ein.
- Die einklappbare Adressleiste. Sie schrumpft beim Scrollen und erweitert sich beim Zurückscrollen, sodass sich der verfügbare Platz verschiebt, während der Käufer die Seite nutzt.
- iOS-Sicherheitsbereiche. Der Home-Indicator-Streifen unten bei neueren iPhones ist reservierter Platz, über dem dein Layout liegen muss.
Vergiss nicht, dass die Balkenhöhen bei Themes wie Astra, Botiga, Woostify und anderen unterschiedlich sind, und ich habe sie nicht alle getestet.
Deshalb würde ich einen Abstand mit Spielraum einem pixelgenauen Abstand vorziehen.
Stelle deine Zahl ein und öffne dann die Produktseite auf einem echten Handy. Tippe einmal auf den Kaufen-Button. Wenn es sauber ist, bist du fertig. Wenn es knapp ist, füge weitere 10 Pixel hinzu und überprüfe es erneut.
Die Pixel-Schleife und die Einstellungen, die sie beenden
Zwei öffentliche Support-Threads auf WordPress.org zeigen, was passiert, wenn ein Widget keine Einstellung dafür bietet.
Im ersten Thread berichtet ein Store-Besitzer, dass das Chat-Widget den WooCommerce-Button „In den Warenkorb“ auf Mobilgeräten überdeckt. Die Lösung ist kurz: Verschiebe die Position des Widgets in den Plugin-Einstellungen. Das ist die gesamte Lösung.
Der zweite Thread geht in die andere Richtung. Eine Cookie-Leiste landet auf den Buttons eines Chat-Widgets auf Mobilgeräten, und es gibt keine Einstellung dafür.
Daher liefert der Support benutzerdefiniertes CSS, das den Balken bei Bildschirmen unter 479 Pixel Breite um 100 Pixel anhebt.
Das ist nicht genug, also steigt die Zahl auf 160px. Der Nutzer kommt zurück und berichtet, dass das Banner jetzt irgendwo in der Mitte hängt.
Niemand in diesem Thread hat etwas falsch gemacht. Die Schleife entsteht, weil ein geschätzter Pixelwert gegen eine Balkenhöhe getestet wird, die nie gemessen wurde, innerhalb einer Media Query. Der Shopbesitzer hat keine Möglichkeit, dies auf seinem eigenen Telefon zu debuggen.
Sie ändern die Zahl, laden neu, kneifen die Augen zusammen, ändern sie wieder. Es gibt keine Messung in diesem Prozess, weshalb er nicht konvergiert.
Die Einstellungen, die das Rätsel ersetzen
Wo dieser Balken sitzt, hängt von Ihrem Theme ab, genau deshalb gibt Ihnen WPChat Positionssteuerungen, anstatt anzunehmen, dass eine Ecke überall funktioniert.
Die Steuerungen entsprechen der Korrekturschleife vom Anfang dieses Artikels.
- Position: Der Launcher sitzt standardmäßig unten rechts, unten links ist verfügbar. Dies ist die horizontale Verschiebung, für den Fall, dass Ihr „In den Warenkorb“-Button eine Seite des Balkens einnimmt.
- Offset: Separate Pixelfelder für den Abstand nach rechts und den Abstand nach unten. Die Zahl, die Sie zuvor gemessen haben, kommt in das untere Feld: Ihre Balkenhöhe plus der 16px-Abstand.
- Seiten-Targeting: Damit können Sie das Widget auf bestimmten Seiten ausschalten, so halten Sie es von Seiten fern, auf denen Sie es nicht benötigen.
Wissenswert über Seiten-Targeting: Wenn das Widget auf einer Seite ausgeschaltet ist, lädt WPChat es nicht und versteckt es dann. Es prüft zuerst, sodass die Dateien gar nicht erst heruntergeladen werden.
Bereit loszulegen? Sehen Sie sich unsere Schritt-für-Schritt-Anleitung zum Hinzufügen eines Online-Chat-Widgets zu Ihrer Website an.
Häufig gestellte Fragen zu Chat-Widgets auf Mobilgeräten
Wie messe ich die Höhe des Sticky-Add-to-Cart-Balkens meines Themes?
Messen Sie es in Chrome DevTools mit aktivierter Geräte-Toolbar. Drücken Sie F12, klicken Sie auf „Geräte-Toolbar umschalten“, stellen Sie die Breite auf eine Telefon-Größe wie 390 ein und scrollen Sie, bis der Sticky-Balken erscheint. Klicken Sie mit der rechten Maustaste auf den Balken, wählen Sie „Untersuchen“ und fahren Sie mit der Maus über die hervorgehobene Zeile im „Elemente“-Panel. Der Tooltip zeigt zwei Zahlen an, und die zweite ist Ihre Höhe in Pixeln.
Unten links oder unten rechts, wenn ich einen Sticky-Warenkorb-Balken habe?
Wählen Sie die Ecke gegenüber dem Hauptbutton des Balkens, damit ein Fehlklick Sie nichts kostet. Wenn Ihr „In den Warenkorb“-Button rechts sitzt, platzieren Sie den Launcher unten links. Wenn der Balken die gesamte Bildschirmbreite einnimmt, gibt es sowieso keine freie Ecke, also lassen Sie die Position unverändert und heben Sie den Launcher stattdessen mit einem unteren Offset an.
Schadet ein Chat-Widget meinem PageSpeed-Score?
In meinem Test nicht. Wenn ich dieselbe Website mit und ohne Widget laufen lasse, fügte es etwa 148 KiB an Assets hinzu und verschob keine Core Web Vitals. TBT und CLS blieben beide bei Null. Eine Einschränkung: Das war eine saubere Testseite, was ein Best-Case-Szenario ist. Eine bildlastige Produktseite wird sich also nicht identisch verhalten.
Warum funktioniert ein empfohlener Pixel-Offset nicht über Themes hinweg?
Weil der Sticky-Add-to-Cart-Balken keine WooCommerce-Funktion ist. Er stammt von Ihrem Theme oder einem separaten Plugin, und jedes erstellt diesen Balken in einer anderen Höhe. Jede Zahl, die Sie aus einem Support-Thread kopieren, wurde auf dem Theme eines anderen gemessen, deshalb müssen Sie Ihr eigenes messen.
Chat-Widget-Optimierung für Mobilgeräte: Worauf es ankommt
Ein gut konstruiertes Widget muss Ihre Website nicht belasten. WPChat fügte in meinem Test etwa 148 KiB hinzu und beeinträchtigte keine Core Web Vitals, sodass das Gewicht nie der Grund für den Verkauf war. Die Position war: Der Launcher saß auf dem einen Button, den Ihr Kunde antippen wollte.
Hier ist, was Sie tun können:
- Messen Sie Ihre Sticky Bar in Chrome DevTools bei einer Telefonbreite und entnehmen Sie die Höhe dem Tooltip.
- Addieren Sie einen 16px Abstand zu dieser Zahl. Das ist Ihr unterer Offset.
- Legen Sie die Position und den Offset in den Einstellungen Ihres Widgets fest, nicht in einer Media Query.
- Schalten Sie das Widget aus für Warenkorb und Kasse, wenn Sie den vollständigen Fokus auf den Verkauf legen möchten.
- Überprüfen Sie es einmal auf einem echten Telefon, da die eigenen Leisten des Browsers und der reservierte Streifen am unteren Rand neuerer iPhones Höhe verbrauchen, die der Emulator Ihnen nie zeigt.
Die Zahl, die Sie am Ende erhalten, gehört zu Ihrem Theme, nicht zu Chat-Widgets im Allgemeinen. Verschiedene Themes bauen diese Leiste unterschiedlich auf, weshalb ein Feld, in das Sie Ihre eigene Messung eingeben können, jede Zahl schlägt, die ich hier drucken könnte.
Sie haben jetzt eine Messung. WPChat gibt Ihnen eine Stelle, an der Sie sie eingeben können: Position, separate Pixel-Offsets und Seiten-Targeting.
Holen Sie sich WPChat und beginnen Sie, mit Besuchern auf allen Geräten in Kontakt zu treten und Ihr Geschäft auszubauen.
