The page is too heavy when loaded

Deykun / maps

Heraldic maps of selected countries. 🇩🇪 🇪🇪 🇫🇮 🇵🇱

https://deykun.github.io/maps/

MIT License

5 stars 0 forks source link

The page is too heavy when loaded #16

Closed Deykun closed 2 months ago

Deykun commented 2 months ago

Over 2,000 uncompressed coats of arms are fetched when a user enters the site to render the map.

The performance is so poor that it takes a very long time to get results and sometimes crashes. 😄

obraz

Expected result

We want to load all the coats of arms, but they can be resized.

Deykun commented 2 months ago

This PR, which includes WebP compression and srcset, has been merged

https://github.com/Deykun/maps/pull/17

obraz

The next step could be moving from images to old-school sprites. This approach would bypass fetching those 2,000 images individually and instead allow the user to fetch ex. 40 sprites with 50 coats each. This is actually a good case for sprites.

We still render 2,000 HTML nodes for those markers, but this is unavoidable, and I don't want to use canvas for it.

Deykun commented 2 months ago

https://www.npmjs.com/package/join-images

It could potentially be used for sprites, but it requires creating all coats of arms at a specific ratio. Additionally, there will be extra padding, which creates an issue with mapping the actual size to the sprite, potentially triggering hover effects too early on a transparent background. It sounds like a nightmare.

Deykun commented 2 months ago

I didn't want to use a canvas, but considering how unusable the Polish map is with 2.5k coats of arms and my ambition to create a one map for Europe, I'm forced to. The problem mentioned above can be solved with proper sprinting, and using a canvas will allow me to detect when someone clicks on a transparent part of a coat of arms. Additionally, we can detect all clicked coats of arms, not just the one on top.

Here are some advantages:

Sprites: Combining multiple coats of arms into one image will reduce the number of requests.
Canvas Efficiency: The canvas doesn't need to be updated every frame, which avoids the need for 2.5k HTML nodes.
Continental Maps: One map can be used for the entire continent.

PoC has been merged already. https://github.com/Deykun/maps/pull/36

Deykun commented 2 months ago

Above were the results for Poland, when it had approximately 2,100 coats of arms.

Here are the results for approximately 3,500 coats of arms from Poland, Estonia, and Finland with canvas used.

Sprites haven’t been added yet.

obraz