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.

Asynchronous Download

An Infinite Scroll has to acquire the JavaScript elements needed for asynchronous operation for a “progressively improving” implementation. Below is an explanation on how the Infinite Scroll in asynchronous mode functions:

  1. When a user requests a page, he gets the content of this page (eg:
  2. When he scrolls and reaches the limits of content, a JavaScript function will run to require new content from the server.
  3. After the server has responded with a new content, another JavaScript function injects the interpreted data into the HTML page.
  4. 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.

Browsing States

  1. 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.

  1. History.pushState

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.

Visit Us
Follow Me