Hi,
We have a map view with hundreds of markers, and we'd like to improve the loading time, as it takes too long to fully load.
All markers need to be shown at first, that's why we didn't use any pagination. And in addition, we need a search box that looks through all the results.
hidden link
What would you suggest ? I'm not sure if two views as I read in other threads is something that would work for us.
Kind regards
Hello, any time you have over 1500 results in a View you're going to experience some slowness initial load time, and if your HTML is not designed in a way that handles that much content, you'll also experience some browser performance issues. This is why the list on the left side is slow to scroll even after the results are fully loaded.
To address the initial load time, you can try the following steps:
- Minimize the number of nested queries by simplifying the View results. If the main View contains nested Views or shortcodes that query taxonomy terms, custom fields, or related posts, for example, that complicates the database queries necessary to produce all the results seen here and slows down load time. To improve performance, simplification may be necessary in the results list.
- Implement a caching plugin that creates a static HTML version of this page and serves that to your site visitors instead of hitting the server/database each time the page loads. This is probably your best opportunity to make improvements in initial server response time, but the overall page size is still quite large because of the number of results displayed at first (1500+). It's over 4Mb of HTML that the browser must download to display the page. The only way to limit that is to add some kind of pagination to the results on the left, to limit the amount of content displayed when the page is first loaded. If you need to display all markers on the map at first, but also paginate results on the left using infinite scroll, that means you must have two separate Views - one for the unpaginated map markers and another for the paginated results on the left.
- Separate Views for the map markers and results may or may not improve the initial load time, it's hard to say for sure. If you use infinite scrolling to paginate the results list on the left, and no pagination for the map markers, you may see some performance gains depending on the other content shown in the results on the left. It depends on how complex the queries are to display the other information, as well as the connection speed for downloading that initial HTML page, and I can't tell just by looking at the output here. It's worth investigating on various devices with different internet connection speeds.
To address the browser performance issues with scrolling the results, you can investigate performance optimization with CSS and HTML fundamentals: https://developers.google.com/web/fundamentals/performance/rendering
https://developers.google.com/web/fundamentals/codelabs/web-perf
Usually applying exact height measurements to each result element and the scrolling container will help speed up rendering of long lists of content.
