300 ms Verzögerung beim Antippen, entfernt

Archibald
Jake Archibald

Viele Jahre lang sorgten mobile Browser für eine Verzögerung von 300 bis 350 ms zwischen touchend und click, während sie darauf warteten, ob es sich um ein Doppeltippen handelte oder nicht, da doppeltes Tippen eine Geste zum Heranzoomen des Textes war.

Seit der ersten Version von Chrome für Android wurde diese Verzögerung entfernt, wenn auch die Funktion „Zoomen mit Falten und Falten“ deaktiviert war. Das Zoomen durch Auseinander- und Zusammenziehen der Finger ist jedoch eine wichtige Bedienungshilfe. Mit Chrome 32 (ab 2014) entfällt diese Verzögerung für für Mobilgeräte optimierte Websites, ohne das Zoomen durch Zusammen- und Auseinanderziehen der Finger zu entfernen! Firefox und IE/Edge haben kurz darauf dasselbe gemacht. Im März 2016 kam eine ähnliche Lösung in iOS 9.3 auf.

Der Leistungsunterschied ist enorm!

Eine Benutzeroberfläche, die sofort reagiert, bedeutet, dass der Nutzer schnell auf die einzelnen Schaltflächen drücken kann, ohne auf eine Antwort warten zu müssen. Weitere Informationen über die Auswirkungen menschlicher Reaktionszeiten und der Webleistung finden Sie in unserer Einführung in RAIL.

Um die 300–350 ms lange Tippverzögerung zu entfernen, benötigst du Folgendes im <head> deiner Seite:

<meta name="viewport" content="width=device-width">

Damit wird die Breite des Darstellungsbereichs an die des Geräts angepasst. Dies ist eine Best Practice für für Mobilgeräte optimierte Websites. Bei diesem Tag gehen Browser davon aus, dass du Text auf Mobilgeräten lesbar gemacht hast, und die Funktion zum Zoomen durch Doppeltippen wird zugunsten schnellerer Klicks entfernt.

Solltest du diese Änderung nicht vornehmen können, kannst du touch-action: manipulation verwenden, um denselben Effekt entweder auf der gesamten Seite oder auf bestimmte Elemente zu erzielen:

html {
    touch-action: manipulation;
}

Diese Methode wird in Safari nicht unterstützt, daher wird das Darstellungsbereich-Tag viel bevorzugt.

Ist es ein Problem für die Barrierefreiheit, dass man das Doppeltippen zum Zoomen nicht mehr nutzen kann?

Nein. Das Zoomen mit zwei Fingern funktioniert weiterhin und die Betriebssystemfunktionen sind für Nutzer geeignet, die diese Touch-Geste schwierig finden. Unter Android wird dies durch Vergrößerungsbewegungen übernommen. Solche Tools funktionieren sogar außerhalb des Browsers.

Was ist mit älteren Browsern?

FastClick von FT Labs nutzt Berührungsereignisse, um Klicks schneller auszulösen, und entfernt die Touch-Geste für das Doppeltippen. Dabei wird ermittelt, wie lange sich dein Finger zwischen touchstart und touchend bewegt hat, um Scroll- und Tippvorgänge zu unterscheiden.

Wenn Sie allen Elementen einen touchstart-Listener hinzufügen, wirkt sich dies auf die Leistung aus, da Interaktionen auf niedrigerer Ebene wie das Scrollen verzögert werden, indem der Listener aufgerufen wird, um zu prüfen, ob er event.preventDefault() ist. Glücklicherweise vermeidet FastClick die Festlegung von Listenern in Fällen, in denen der Browser die Verzögerung von 300 ms bereits beseitigt hat, sodass Sie von beidem profitieren können!