[Resolved] Speeding Up Map Load Time – Map with 550+ Pins

[Author]

Posts

[aaronS-5]

I have a view with over 550+ map pins that includes a thumbnail image and information that leads to the listing in the map tooltip for each pin. The images (the size is set to thumbnails in html) in each tooltip definitely increase the amount of time for the map to load, going from around 5.5 seconds (without images) to 14.5 seconds (with images). Is there any way to load the map initially with pins so that the page loads faster and then load the images within the tooltips? Pagination initially is not an option as the initial loading of the page needs to show all pins.

I know lazy loading images in the tooltips isn't an option as that causes the images not to load. The images that are being loaded are a custom field image upload and not a featured image field, is this part of the issue as that image doesn't have thumbnails created automatically upon upload and it's needing to generate that size on each load?

Any help would be greatly appreciated to try and speed up the loading of the map, thanks!

[Luo Yang]

Hello,

I assume we are talking about map pins which are using image URLs, you can try to preload those images when page is loading, for example:
hidden link

[aaronS-5]

Thanks Luo, yes I am talking about a custom types image field that is loading within each tooltip which then links to the post. When I remove the custom image field from the loop, it loads 9 seconds faster. Once it's included, it takes upwards of 15 seconds to load because of the sheer amount of pins/tooltips with images included.

The page takes a long time to load initially, and then the map takes time to load as well. How would I go about implementing the preload within the view for a custom types image field? Would this be done in the JS editor and Loop editor? I read through the link but just looking to see where to implement.

Thanks!

[Luo Yang]

In your case, you can try lazy loading, so each image loads only when user click on the specific marker.

1) you can to load lazyload JS files in your website:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

2) Follow lazyload document to display your images
hidden link

for example:

<img alt="A lazy image" data-src="[types field='my-image'  size='thumbnail" url='true']">

More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

[aaronS-5]

Thanks Luo, I'll try and implement lazyload js. I was using a plugin for Lazyloading but it was causing issues with the images in the tooltips displaying, so I had to disable it on the maps view. I'll circle back once once I implement and let you know if I have any trouble. Thanks again!

[Luo Yang]

Please let me know if you need more assistance for it, thanks

[aaronS-5]

Luo, after reading through the links / documentation, I understand the use of using data-src for lazyloading and where to implement the html in the view. But in terms of getting the images to lazyload in the map tooltips, do I need to create a script in the functions first? On the github link you sent, it shows the script

<script src="<em><u>hidden link</u></em>"></script>

Can this be included in the body tag of the site and then

I've only implemented lazyloading via plugin before, so just trying to get a handle on getting the images to lazyload. Where to set it up and where to run the javascript code. Appreciate the help!

[Luo Yang]

For the new question:
do I need to create a script in the functions first?
Yes, you need to make sure the Lazyload script is loaded in your website pages, see the document I mentioned above:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

It can be done via aother lazyload plugin or manually(php function).

[aaronS-5]

Thanks Luo, I'm able to lazyload images on the WordPress Archive view and on other views, but I'm struggling to get the images within the google maps tooltip to lazyload. The images are coming up blank. I'm loading the script via A3 Lazyload plugin. I'm assuming this has something to do with the javascript and google maps?

[Luo Yang]

I have tried it in my localhost with just latest version of Toolset plugins, without other plugins, here are detail steps:
1) Enqueue Lazyload JS files in WordPress, add below codes in your theme file "functions.php":

function enqueue_lazyload() {
    wp_register_script ( 'lazyload', '<em><u>hidden link</u></em>' );
	wp_enqueue_script ( 'lazyload' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lazyload' );

2) Create a page, display the map + maker shortcode like this:

[wpv-map-render map_id="map-1"][/wpv-map-render]
[wpv-map-marker map_id='map-1' marker_id='marker-1' address='New York, NY, USA']
<img class="lazy" data-src="<em><u>hidden link</u></em>" />
[/wpv-map-marker]

3) Setup the JS codes to trigger lazyload on popup window loaded:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_completed',function(event_settings) {
	var infowindows = WPViews.view_addon_maps.infowindows;
	var map='map-1';
	var infowindow = infowindows[ map ];
	google.maps.event.addListener(infowindow, 'domready', function(){
		var lazyLoadInstance = new LazyLoad({
			elements_selector: ".lazy"
			// ... more custom settings?
			});
		lazyLoadInstance.update();
    }); 
});

It works fine in my localhost, for your reference.

[aaronS-5]

Luo, much appreciated, I was now able to get the lazyload to work in the map pin. I did have to add a low quality placeholder in order for the images to load in Chrome, but they seem to be working well now.

One last question...I've added the same lazyloading for the WordPress Archive images in a grid. The images aren't loading until an event happens (pagination triggered to next page, filters reset, etc. How can I get the images to lazyload as the page loads? I know the JS code you provided is triggered by the popup window...how would I use the JS to simply load as the page loads?

Thanks a lot for your help!

[Luo Yang]

For the new questions:
The images aren't loading until an event happens (pagination triggered to next page, filters reset, etc.

I suggest you try to setup the JS codes with lagacy Views WordPress archive:
In section "Search and Pagination", click "JS Editor", click "Frontend events" button, you will find those JS event options, see screenshot JS-events.JPG

[aaronS-5]

Thanks Luo, the frontend events are actually when the images are loading. Basically, in order to get the images to load I need to do a frontend event (initiate the filters, reset the filter, initiate the 2nd page on pagination, etc.). My issue is getting lazyload to initiate on the initial load of the page. In the example you gave me it works with google maps as the initiator is when clicking on the map pin tooltip to initiate the image load.

Is there a simple way to initiate the lazyload simply on the loading of the page, and not on any frontend events?

Thanks!

[Luo Yang]

As I mentioned above, you will need to setup JS codes to trigger the lazyload:
https://toolset.com/forums/topic/speeding-up-map-load-time-map-with-550-pins/#post-1512275

I don't think there is other easy way.

If you still need assistance for it, please provide a test site with the same problem, I can setup a demo for you.

[Luo Yang]

Thanks for the details, the problem is in plugin "a3 Lazy Load", it is changing the image CSS class name, and conducts the problem.

I have done below modifications in your website:
1) Deactivate plugin "a3 Lazy Load"
2) Edit the WordPress archvie "Property Listings":
hidden link
in section "Search and Pagination", click JS Editor, add below JS codes:

// page loaded
jQuery(document).ready(function(){
  var lazyLoadInstance = new LazyLoad({
      elements_selector: ".lazy"
      // ... more custom settings?
  });
  lazyLoadInstance.update();
});

// custom search loaded
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  var lazyLoadInstance = new LazyLoad({
      elements_selector: ".lazy"
      // ... more custom settings?
  });
  lazyLoadInstance.update();
	
});

// pagination loaded
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  var lazyLoadInstance = new LazyLoad({
      elements_selector: ".lazy"
      // ... more custom settings?
  });
  lazyLoadInstance.update();
	
});

Test it in front-end:
hidden link

It works fine.

For your reference.