Strona kasy to jedno z najważniejszych miejsc w sklepie WooCommerce — każde dodatkowe 100ms czasu ładowania obniża konwersję. ParcelSelector ładuje mapę z 80 000+ Paczkomatami w ~0,167 sekundy. Jak to osiągnęliśmy?
Trzy technologie, które robią różnicę
Leaflet.js 1.9.4 — lekka biblioteka map (148 KB), znacznie mniejsza niż Google Maps. Renderuje mapy szybko nawet na słabszych urządzeniach.
FlexSearch 0.7.43 — błyskawiczne wyszukiwanie pełnotekstowe po stronie klienta. Brak wywołań do serwera przy wpisywaniu — wyniki pojawiają się natychmiast podczas pisania.
MarkerCluster 1.5.3 — grupuje pobliskie Paczkomaty w klastry przy niskim zoom. Zamiast renderować 80 000 markerów (co zabiłoby przeglądarkę) — wyświetla ich kilkaset na aktualnym widoku.
Benchmark: 0,167 sekundy
Zmierzony czas od kliknięcia „Paczkomat InPost” jako metody dostawy do w pełni interaktywnej mapy z załadowanymi wszystkimi lokalizacjami: 167 ms na typowym połączeniu broadband. Na LTE: 220–280 ms. Na 3G: 350–500 ms.