Dear Alex,
First of all, without speaking of Travelers’ map, I never saw a shortcode loaded via Ajax in WordPress, I don’t know if it’s possible.
Then, I’m surprised by your request, as I designed this plugin with speed in mind. I’m not sure what exactly you are trying to speed up? Do you have slow loading time only on page with my plugin? How many markers do you have?
Because the shortcode is processed during the page request (while the page is still blank). I only used WordPress default queries, so that it is fast.
Then when the page load (event “DOMContentLoaded”), the plugin is initialized and create the map container with the information received during the loading time (so no more loading when the page is shown), and initiate leaflet. After that, the map tiles are beginning to load. And the popovers images are loading on click only.
So the only thing you could do to speed up the initial loading of the page is having a caching plugin, so the query is saved between users and the plugin loads instantly.
If you still want to delay the initialization of Travelers’ Map, you can comment out a part of code in wp-content/plugin/travelers-map/includes/public/js/travelersmap.js line 340 :
//document.addEventListener("DOMContentLoaded", function () {
//if (document.getElementsByClassName("travelersmap-container")) {
// initTravelersMap();
//}
//});
Then, to init travelers map, you have to use this code wherever you want :
`if (document.getElementsByClassName(“travelersmap-container”)) {
initTravelersMap();
}`
Thanks, Camille for your really quick reply.
And yes, your plugin is quite fast, but still, I would like to make my page load faster. Without including a map I have a google PageSpeed Insight for mobile of 99. With a map, it falls to around 80. My goal is to make it as high as possible in preparation for the google may changes.
You are correct with the ajax shortcode load. I can make it work for some, but not in this case. I also tried using an iframe (you can defer an iframe without any problems). This gives the best “speed” result. But it needs some code to make the centering work well. And the problem is clicking on the items.
The solution that you gave works well. I start the map with a 5-sec delay. The page speed score is not as high as with an Iframe, but a lot better than when the map loads immediately.
For others that like to do something similar:
jQuery(document).ready(function($) {
setTimeout(function() {
console.log("Start map auto...");
if (document.getElementsByClassName("travelersmap-container")) {
initTravelersMap();
}
}, 5000);
});
Thanks again for your help! 🙂
