Instant MapInstant Map / Speed
Fast, because the first view is a picture.
A map does not need a program to be seen. Instant Map sends the view as one cached image, and loads the interactive part only when someone reaches for it. The numbers below are measured on this page, on your connection.
This visit
- Map image arrived
- …
- Counted from the start of this page load.
- JavaScript needed to see it
- 0KB
- The image is a plain
<img>in the HTML. - Loader, after the image
- 7.5KB
- Gzipped. Waits for a touch and does nothing else.
- Engine, on first touch
- 11.4KB
- Not loaded yet. Point at the map above.
Time a fresh load
The test loads a map from nothing, twice. The first is a view that is asked for often, so it is normally already cached. The second is a view nobody has asked for, so the server fetches the map data and draws it while you wait. Each clock stops when the image is on screen.
A popular view
–Asked for often, so it is normally already drawn and cached.
A brand-new view
–Drawn for you now, then cached for a week.
Press run
Times depend on your connection and on how close you are to a Cloudflare data centre. A second run of the first test may come straight from your browser's cache; the result says so when it does.
What is loaded, and when
| When | What | Size, gzipped |
|---|---|---|
| With the HTML | One map image | 0 KB of JavaScript |
| After the image shows | Loader: the element, the camera and the wake-up logic | 7.5 KB |
| First point, touch or focus | Engine: tiles, gestures, markers, clusters, keyboard, cards | 11.4 KB |
| While the map is moved | 256 px map tiles, only for the zoom level you stop on | images |
| When a card may open | Card pictures for the markers nearest the centre, in idle time | images |
These sizes are read from the build that made this page. Every change to the project is checked against a size limit of 8 KB for the loader and 13 KB for the engine.
How it stays fast
Images are drawn once
The server draws each view and tile once and caches it for a week. Addresses that mean the same picture share one cached copy.
Nothing runs until it is wanted
The engine is fetched on the first sign of intent. A press that lands while it loads is replayed, so the first drag is not lost.
Markers are stamped, not redrawn
Each distinct marker is painted once and copied to the canvas on every frame, so a thousand markers move as easily as ten.
No wasted tile requests
A zoom animation does not request tiles for the levels it passes through, and requests for tiles that left the screen are cancelled.
Lighter pictures on sharp screens
Double-density images are compressed harder, which the extra pixels hide. They download about a third smaller.
Card pictures are ready first
Pictures for nearby markers are fetched while the browser is idle, and on hover, so a card opens with its photo in place.
Measure it yourself
Every rendered image says whether it came from cache and how long the map data took to fetch, so you can check the numbers in your own tools.
HTTP API referenceFull benchmark results and method
Timing
// In the browser: when did the first map image arrive?
const image = performance
.getEntriesByType("resource")
.find((entry) => entry.name.includes("/static?"));
console.log(Math.round(image.responseEnd), "ms");
// From a terminal: was it drawn now or served from cache?
// curl -sI "https://instantmap.org/static?center=-122.42,37.77&zoom=12" \
// | grep -i -e cf-cache-status -e server-timing