Any ways to speed up load time of Terratype with Google Maps in frontend
Hi,
We use the Terratype package with Google Maps a lot, but with the default setup it takes forever loading the map with markers in the frontend. It seems like there is a callback that delays the rendering of the map and the markers.
In one of our projects we use Umbraco 7.10.4 and Terratype 1.0.18.2.
If anybody has found a way to speed up loading time I'd appreciate some guidance and/or hints. The first thing I can come up with would be a way to include async and defer to the script call, but before messing up anything I'd wanted to ask in the forum first.
A few months ago I had a private convo with @nik who wanted to speed up Rendering of Terratype too, and I'll try and give an abridge version here.
1) Reduce Master Poll timer. This is only something that can be changed by editing an actual js file that is in your /app_plugins/terratype/scripts/terratype.renderer.js file. If You Have release mode on, it will be minified into terratype.renderer.min.js
Previously it was 250ms, it is now 100ms, reducing that to 10ms will make everything faster but will increase workload on browsers - it might crash slow IE for real customers though. The only thing I can say, is have a play, and see what you like.
2) When @nik switched to using defer and async, it only gave him a very small speed increase.
3) Preloading the Google Map js. This will help if your map is initially on a hidden tab or panel that is later switched into view, but will decrease the page load time even if the map is never shown.
<body>
<div style="display:none">
@Html.Terratype(map) // This doesn't need to be the same map that you render later, just any google map
</div>
// ...and render the 'real' Terratype map wherever you like
</body>
4) You can switch DOM monitoring off, this will slightly speed up loading, but will mean that the map can never be 'brought into view' at a later date on a tab or hidden panel. Resizing the browser will muck up the map too.
5) Consider this the 'last option' and 'scrapping the bottom of the barrel'. If your map is failing to load for whatever reason, there is a failsafe mode that after 5000ms it will try again. This failsafe is more for the Umbraco backend, but the same code exists in the frontend renderer just incase you have a browser with rendering issues (Maybe its got React or Angular code running). Again you will need to edit the actual js file within your Umbraco solution; /app_plugins/terratype.googlemapsv3/scripts/Terratype.GoogleMapsV3.Renderer.js
Reduce the 5000 to something smaller to restart the failsafe, beware that too low and the failsafe will kick off before the map ever gets a chance to load.
I hope these help.
btw: If you do do something, I would love to hear what you do, so that I can consider adding it into the core code.
Just stumpled upon this as we had the same issue in our new solution, maps loaded seconds later than everything else. Changing the polling rate to 25 worked wonders and the maps are now available almost instant. If it punishes a few old browsers or PC's, then be it, the performance is more important!
Thanks for your awesome package and the maintenance of it Jonathan!
Any ways to speed up load time of Terratype with Google Maps in frontend
Hi,
We use the Terratype package with Google Maps a lot, but with the default setup it takes forever loading the map with markers in the frontend. It seems like there is a callback that delays the rendering of the map and the markers.
In one of our projects we use Umbraco 7.10.4 and Terratype 1.0.18.2.
If anybody has found a way to speed up loading time I'd appreciate some guidance and/or hints. The first thing I can come up with would be a way to include async and defer to the script call, but before messing up anything I'd wanted to ask in the forum first.
Thanks for any input.
/Søren
Hi Soren
A few months ago I had a private convo with @nik who wanted to speed up Rendering of Terratype too, and I'll try and give an abridge version here.
1) Reduce Master Poll timer. This is only something that can be changed by editing an actual js file that is in your /app_plugins/terratype/scripts/terratype.renderer.js file. If You Have release mode on, it will be minified into terratype.renderer.min.js
https://github.com/Joniff/Terratype/blob/master/src/Terratype/App_Plugins/Terratype/Scripts/terratype.renderer.js#L4
Previously it was 250ms, it is now 100ms, reducing that to 10ms will make everything faster but will increase workload on browsers - it might crash slow IE for real customers though. The only thing I can say, is have a play, and see what you like.
2) When @nik switched to using defer and async, it only gave him a very small speed increase.
3) Preloading the Google Map js. This will help if your map is initially on a hidden tab or panel that is later switched into view, but will decrease the page load time even if the map is never shown.
4) You can switch DOM monitoring off, this will slightly speed up loading, but will mean that the map can never be 'brought into view' at a later date on a tab or hidden panel. Resizing the browser will muck up the map too.
5) Consider this the 'last option' and 'scrapping the bottom of the barrel'. If your map is failing to load for whatever reason, there is a failsafe mode that after 5000ms it will try again. This failsafe is more for the Umbraco backend, but the same code exists in the frontend renderer just incase you have a browser with rendering issues (Maybe its got React or Angular code running). Again you will need to edit the actual js file within your Umbraco solution; /app_plugins/terratype.googlemapsv3/scripts/Terratype.GoogleMapsV3.Renderer.js
https://github.com/Joniff/Terratype/blob/master/src/Terratype.GoogleMapsV3/App_Plugins/Terratype.GoogleMapsV3/Scripts/Terratype.GoogleMapsV3.Renderer.js#L272
Reduce the 5000 to something smaller to restart the failsafe, beware that too low and the failsafe will kick off before the map ever gets a chance to load.
I hope these help. btw: If you do do something, I would love to hear what you do, so that I can consider adding it into the core code.
Cheers
Jonathan
Note: Terratype 1.0.19 has been released that has a fix to an error that now renders GMaps faster
Just stumpled upon this as we had the same issue in our new solution, maps loaded seconds later than everything else. Changing the polling rate to 25 worked wonders and the maps are now available almost instant. If it punishes a few old browsers or PC's, then be it, the performance is more important!
Thanks for your awesome package and the maintenance of it Jonathan!
is working on a reply...