How to make my 50+ popover map more efficient?

General
1

So I’ve created this market map where you can hover over units to discover the traders renting it.

www.bybishop.co.uk/traders

What I’ve done is create 50+ absolutely placed divs of 40x40, make them transparent, and then attach 50+ popovers to them…

However, as you can guess, this has created quite a sloggish page because of the enormous code listing 50+ divs and popovers I reckon.

Would someone know how to recreate this but make it more efficient?

One way I thought could work is create a filter where all 50+ absolutely placed transparent divs act as options that return a URL parameter that is then input in 1 query, showing the correct unit (because I’ve got all units loaded in as CPT). But I don’t actually know how to do this

2

@StrangeTech could i perhaps ask for your always excellent advice?

3

I will help in any way I can.

How are you measuring this? What metric are you using to determine the page is sluggish?

Also where is the data for the popovers coming from? Is it dynamic or statically added?

1 Like
4

Hi,

The page runs fine when going through a 6x CPU slowdown in my tests.

Is it the page load that is worrying you?
I see you are making 50+ queries to accomodate every popover.

I suggest installing a plugin like Query Monitor – WordPress plugin | WordPress.org to measure the server performance.
Don’t hesitate to share the monitor details so we can see where the hiccup might be.

Best regards,
Johnny

1 Like
5

Thank you for your reply Strangetech

So basically I’m just measuring by noticing the load time. It is more than double the load time for other pages I’ve created on this website.

the data for the popovers is dynamical, i’ve located a specific CPT (‘unit’) to a query so that when units are changed in the backend they automatically update in this map

6

thank you John for your reply.

basically im noticing that its slower than other pages on this website,
and in general i do think this could be more efficient. as in; 1 popover that has a query that automatically uses the correct CPT as input by for example the hover creating a class or something for each unit?

7

I have a related but slightly different solution that I will be sharing with the community soon.

It allows to use only 2 Queries that displays data dynamically in a modal. It automatically connects the clickable elements to the modal content.

I will see if it can also work with the Popover and will let you know.

1 Like
8

just checked with the plugin you suggested;
the other pages come in under 0.5 seconds, this one loads between 2.5 and 3 seconds

9

this does sound like something that could be the solution! exciting indeed

10

Hi,

Thanks for the info.
I would suggest the issue is coming from the amount of queries. Would you be able to send me a screenshot of the overview by pm?

Is there a particular reason you went with CPTs instead of custom fields?

I’ll set up a few tests when I have a gap to see if I can reproduce this slowdown.

Best regards,
Johnny

1 Like
11

i’ve sent you the overview via pm!

And what do you mean custom fields instead of CPTs?

my main aim is creating a market map with units that on hover show more info.

I thought so far the best way to do this is by creating a popover on an absolutely placed transparent div with a query inside linked manually to the corresponding unit. Then i can show this particular unit’s info through the query that provides the info. i didn’t think i could link a custom field to a particular CPT right?