Mapa Paczkomatów ładuje się w 0,167 sekundy — jak ParcelSelector osiąga tę prędkość

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.