This is in continuation to the best usability and SEO practices that you must take into account before implementation Infinite Scroll on your website.
Implement Infinite Scroll as a Progressive Improvement
When Infinite Scroll is implemented as a “progressive improvement,” it should function as an extra feature to users that support it. This functions without altering the site’s technical structure or penalizing others.
- When a user requests a page, he gets the content of this page (eg: site.com/page/3).
- With more content to download, the server gives a 404 error message that is not visible to the user. Instead, there will be a notice posted on the website suggesting that the content is exhausted.
Caching and Preloading
Depending on the server’s response time, the asynchronous download may delay the display of the content. Therefore, caching and preloading must be used. The role of preloading is to cut short the loading time of new contents by downloading the adjacent content preventatively. On the other hand, the purpose of caching is to save the asynchronously downloaded content.
- History API
The Infinite Scroll is undeniably a great thing for continuous navigation, but it’s a different thing when it comes to the “segmented” navigation.
As a business website owner or just a user, you might have experienced going back to a certain website to look for a certain piece of content and you failed because of the Infinite Scroll feature. So, how will you know where you need to go to? The History.pushState has the answer.
History.pushState allows URL in the address bar to be changed dynamically. When the user scrolls down reaching a new section, there will be a change in the address bar and a new state in the browser navigation history will be created. Once the user presses the back button, it will be up to the former URL populated via pushState.