Endless page scrolling: helps or harms? Pagination. lazy loading options for images
“What should I use for content – pagination or scrolling?” Some designers still struggle with choosing one method or another for their projects. Every decision has its own strengths and weak sides, and we will look at all of them in this article. It will be easier for you to do right choice for different projects.
Infinite scrolling is a technique that allows users to scroll through a massive stream of content without a visible finish line. This technique refreshes the page as you scroll down the content. As tempting as this may sound, it is clearly not a one-size-fits-all solution for every site or application.
Benefit #1: User Engagement and Content DeploymentWhen you use scrolling as the primary method of data navigation, the user stays on the web page longer, thereby increasing user engagement. Thanks to the popularity of social media, users are often exposed to massive streams of content; endless scrolling offers effective method browse this ocean of information without having to wait for pages to load.
Endless scrolling is almost a must-have for discovery interfaces. When the user is not looking for something special, but just needs to browse a large number of elements to find what you like.
A sea of pins on Pinterest You can see the benefits of infinite scrolling using the Facebook news feed as an example. By tacit agreement, users know that they will not be able to see everything in the feed, since the content is updated too often. With infinite scrolling, Facebook tries to show users as much information as possible as they view this stream of data.
Facebook news feed: user scrolls more and more to update content Benefit #2: Scrolling is better than clicking Users find it more convenient to scroll than to click. Using the mouse wheel or touch screen, scrolling is faster and easier than clicking. For a long section of continuous content, such as a lesson, scrolling is much more convenient than cutting the text into several separate screens or pages.
If you use clicks, then each portion of content update requires an additional click, as well as time to load the page. For scrolling: content is updated continuously; only one action is needed. Source: designbolts Benefit #3: Scrolling is good for mobile devices How smaller screen, the longer the scroll. The popularization of mobile browsing also favors scrolling. Gesture control on mobile devices makes scrolling very easy. The result is a truly responsive experience for users regardless of the device they're using.
The speed of page loading largely determines the user experience. Many studies have shown that slow loading leads to people simply leaving the site or deleting the application, and this leads to low conversion rates. And this is bad news for those who use infinite scrolling. The more the user scrolls down the page, the more content will load on one page. As a result, the performance of the page slows down greatly.
Another problem is limited device resources. On many endless scrolling sites, especially those with a lot of images, resource-constrained devices like the iPad can become sluggish due to the sheer volume of content loaded.
Disadvantage #2: Finding and locating dataAnother problem with infinite scrolling occurs when users reach a certain point in the thread, they can't bookmark their location and come back later. If they leave the site, they will lose their progress and will have to scroll down again to get to the same point. The inability to determine the user's position when scrolling not only causes inconvenience for users, but also spoils the entire experience of interacting with the product.
In 2012, Etsy spent a lot of time implementing a scrolling interface and discovered that new interface didn't work as well as old version with pagination. And although the number of sales remained almost unchanged, user engagement was reduced - people did not use search as actively as before.
Infinite scrolling search interface on Etsy. The current version is based on pagination. As Dmitry Fadeev notes: “People will want to return to the list of search results to check the positions they just saw, compare them with other products somewhere at the bottom of the list. Infinite scrolling not only breaks this dynamic, it makes it difficult to move up and down the list, especially when you need to return to the page at another time, and you are thrown back to the very top, having to scroll down again and wait for the content to load. Therefore, an infinite scrolling interface is actually slower than a paginated interface.”
Flaw #3: Irrelevant scrollbarScroll bars do not reflect the actual amount of data available. You'll happily scroll down thinking you're close to the end, which in itself forces you to scroll a little more, only to see that the results have simply doubled in number. From the point of view of accessibility and understandability of the interface, this is not very good.
The scrollbar should reflect the actual length of the page. Disadvantage #4: Lack of a footer. Footers exist for a reason: they contain content necessary for users– if users cannot find something, or they need Additional Information, they often go there. But since the data feed scrolls endlessly, when the user comes to the bottom, another piece of data is loaded, and the footer simply cannot be reached.
When infinite scroll was introduced on LinkedIn in 2012, users could scroll the screen before content had even loaded. Sites with infinite scrolling should be able to reach the footer, making it sticky, or move links to the header or sidebar.
Facebook has moved all the links from the footer (e.g. 'Legal', 'Careers') to the right panel. Alternatively, you can create a Load More button to load content upon request. New content will not automatically load until the user clicks the button. This way, users can reach the basement without any problem.
Instagram provides a ‘Load More’ button to ensure that the footer is always available to users. Pagination divides content into separate pages. If you scroll down the page and see a series of numbers, this series of numbers is the pagination of the site or application.
Benefit #1: Good conversion Pagination works well when the user is searching for something in a list of results rather than just browsing through a stream of data.
You can appreciate the benefits of pagination at Google example Search. Finding the best search results will take a second or an hour, depending on the subject of your research. But when you decide to stop searching Google in the current format, you know the exact number of search results. You can decide when to stop and how many results to look at.
Results data Google search Benefit #2: Feeling in control Endless scrolling is like an endless game - no matter how far you go, it feels like you'll never reach the end. When users know the number of available results, they can make more informed decisions instead of digging through an endlessly updated list. David Kieras, in his study “The Psychology of Human-Computer Interaction,” notes: “Reaching an end point provides a sense of control.” The study also explains that when a user has limited but relevant results, they can more easily determine whether what they are looking for is there or not.
In addition, when users see the total number of results (of course, when it is not infinite), it is easier for them to estimate how long the search will take the required material.
Benefit #3: Element PositionThe page-based interface makes it possible to constantly remember the location of an element. Users won't necessarily remember exact number pages, but they will roughly remember it, and the numbered links will help them get there faster.
With pagination, users control navigation because they know which page to select to get to where they were. Pagination is good for commercial sites and applications. When users shop online, they want to be able to return to where they left and continue shopping.
The MR Porter website uses pagination for products. Disadvantages: Additional actions To go to a new page using pagination, the user must find the target link (for example, “Next”), hover over it with the mouse, click and wait for it to load new page.
To get the content you need to click The main problem is that most websites show users a very limited amount of content on one page. By making pages longer without compromising loading speed, you will provide users with more content on the page and reduce the number of clicks required.
When should you use infinite scrolling/pagination?There are only a few cases where infinite scrolling is effective. It is best suited for sites and apps with user-generated content (Twitter, Facebook) or visual content (Pinterest, Instagram). Pagination, on the other hand, is robust and well suited for sites and applications that cater to targeted user actions.
Job Google search engine is a great example of such sites. Google Images uses infinite scrolling because users can process images much faster than text. Reading search results takes much longer. This is the reason why Google results Search is still displayed in a more traditional manner.
ConclusionDesigners must weigh the pros and cons of infinite scrolling and pagination before making a choice. The choice depends on the content design, and how that content is delivered. In general, infinite scrolling works great for projects like Twitter, where users consume an endless stream of data without looking for anything specific, and pagination works better for search results pages, where people are looking for something specific, and where the position of data elements is important.
If you've ever logged onto Twitter or searched for an image on Google, you've probably seen infinite scrolling in action. You could spend hours scrolling through a page with no end in sight.
IN last years marketers have been actively experimenting with different types of content. However, now the question of how best to display information on the screen so that the user feels as comfortable as possible is increasingly at the forefront. And infinite scrolling is one of the most popular solutions nowadays.
Want to understand how infinite scrolling affects SEO and whether it's even worth using it on your site? First you need to decide what this tool is.
Advantages and disadvantages of infinite scrolling
The same approach to work can lead one company to success and another to failure. Infinite scrolling is without a doubt one of the most promising ways to present content to readers. However, this does not mean that you should immediately switch to infinite scrolling: first, you should consider all the pros and cons.
The benefits of infinite scrolling
1. It is mobile friendly
When using your phone with touch screen It's much easier to scroll the page than to click on small links.
2. It helps keep the reader's attention
3. It makes it more convenient to display large amounts of information on the screen
Do you want to post an impressively sized article on your website, but don’t want to divide it into several parts? Endless scrolling will help you get out of this situation.
4. It is ideal for sites that update information in real time
Infinite scrolling is optimal solution for resources that provide real-time data. This is another reason why social networks like this tool.
5. Infinite scrolling does not cause any inconvenience to users related to loading speed
Resources that implement an infinite scrolling system offer, on average, 7 new messages to the user with each scroll, which is not much different from the indicators of sites with other types of navigation.
Disadvantages of Infinite Scroll
1. It makes it difficult to find the information you need.
If a reader needs to get to a specific piece of content on an infinite scrolling site, they will be forced to spend certain time to scroll the page. This is why Google does not offer users infinite scrolling to view search results.
2. It doesn't allow you to use a footer
The footer is a place where you can place a link to the company’s history or, for example, contact information. Many people are accustomed to looking for this information at the end of the page. If you use infinite scrolling, you'll need to find a different place to place your help information.
3. It does not allow the user to skip uninteresting content in one click
A visitor to a site with endless scrolling who comes across content that is not very interesting to him will be forced to scroll through it manually.
4. Infinite scrolling increases the load on servers
When introducing infinite scrolling, JavaScript is actively used, as a result of which the requirements for server performance are constantly growing.
How do you know if your site needs infinite scrolling?
The pros and cons of infinite scrolling listed above give you a general idea about this tool. If you're still not sure whether to use it, answer two questions:
1. Does your business require users to search for products or services on the site?
If so, opting for infinite scrolling could have extremely negative consequences for you.
Companies operating in the field ecommerce, for example, cannot know what their next client will need or what information they should provide. If you expect the user to get to the section he is looking for, your task comes down to making his path as easy as possible. And the endless scrolling in this case may create problems for the client.
Take, for example, Etsy, a large online trading platform. The company tried using infinite scrolling on its website, but was unable to gain any benefit from it. Etsy chief engineer Dan McKinley can't give a clear explanation this fact. Here's what he says about infinite scrolling:
“People are extremely sensitive to any interface changes. But if the search algorithm returns the 16 most relevant results in top part list, infinite scrolling allows the user, without expending additional effort, to obtain an “infinite” number of less relevant results (which, in the absence of an infinite scrolling system, he would have to click on the corresponding button).
I don't mean to say that endless scrolling is stupid. This tool can bring a lot of benefits, but before you decide to use it, try to determine how users will react to the innovation.”
If you're serious about using infinite scrolling on your site, it makes sense to do split testing. This will allow you to understand how much your customers like this type of navigation.
2. Does your site primarily offer content?
If so, infinite scrolling is probably what you need.
All content of sites designed to entertain visitors has the same usefulness for those. The owners of this kind of sites do not care which page a person ends up on. The main thing is that the content that he finds there is capable of attracting his attention.
As clear example You can cite the news site Inc. As you can see, a significant part of the page is occupied by . At the same time, the information is arranged in such a way as to make the process of its perception as easy as possible.
Resources like Inc. or Mashable, often do not have a footer, which quite successfully replaces the menu button at the top of the page. The user thus has a choice: he can instantly move to specific element website, or just scroll through the feed in search of interesting materials.
How does using infinite scrolling affect SEO?
If you are going to implement infinite scrolling, you should find out how they “treat” this idea search engines. Here's what Scott Langdon of HigherVisibility has to say about this:
"When scanning a website with an infinite scrolling system Google robots will “see” only that part of the information that the user sees before the first scroll. The remaining content will not be indexed and, accordingly, will not be able to appear on the search results page for a particular request.”
However, this problem can be dealt with. The advice of John Muller, representing Google, will help you do this:
The diagram below shows how to and how not to paginate (in the second case, some of the content elements will be indexed twice).
is a refusal to load all the content on a page when it is not necessary. This applies a marker indicating that the data has not been loaded, but if necessary, it will need to be loaded.Using lazy loading, images and other materials on the site are loaded asynchronously, and more specifically, after the visible fragment of the web page is completely loaded or exclusively when the visible part of the browser window is displayed. For example, if a visitor does not scroll to the end of the page, then the images located at the bottom will not load.
Lazy loading is relevant on many resources, especially those with an abundance of pictures. Visit any online photo service in high resolution and notice how the site only loads photos that are visible on your screen, and when you scroll down, new photos begin to load as soon as they appear on your screen. As you scroll, placeholders are replaced with high-resolution images.
There are often cases when a certain fragment of a page is not visible to everyone, but a huge amount of resources is spent on processing it or transmitting material. That's when it's time to think about lazy loading, which will eliminate generation and loading hidden elements until they need to be viewed or used.
On a note. Lazy loading is enabled by , and is generated by events monitored by . Therefore, before use asynchronous loading it is important to take into account that for users who do not have JS, the function will not be available, and search engine robots will not see it hidden by script content.
Now let's talk about two good reasons why you should choose lazy loading:
Based on the above, we can conclude that lazy loading significantly improves website performance.
Types of Lazy LoadingTo improve site performance, you need to create a lazy loading script for images and content. There are many options on how to do this.
5 Lazy Loading Options for ImagesLet's talk about the most common and ready-made solutions lazy loading for images.
In a simplified version, this lazy loading script is replacing the src attribute with data-src in the img tag:
img elements containing data-src attributes are hidden in . After the images are loaded, they are displayed smoothly using transitions:
Img (opacity: 1; transition: opacity 0.3s; ) img (opacity: 0; )
JavaScript then passes all img tags src attribute, which ultimately receive the value of the data-src attribute. After all images have loaded, data-src is removed from img :
ForEach.call(document.querySelectorAll("img"), function(img) ( img.setAttribute("src", img.getAttribute("data-src")); img.onload = function() ( img.removeAttribute( "data-src");
David Walsh also provided a fallback in case of JavaScript failure, which is efficient and simple to implement. However, its functionality does not allow for loading when the web page is scrolled. This means that the browser loads all images, regardless of whether the visitor “reached” them or not. Yes, the fallback allows you to display the page faster, because the images are loaded after the HTML, but there will be no traffic savings.
The technique involves lazy loading, which uses JS as an enhancement to standard CSS and HTML. Progressive enhancement ensures that images are shown to users even if the JavaScript that is responsible for displaying them is disabled or an error appears that blocks the script from working.
Progressive enhancement has several benefits:
You can find out detailed information about the Osborne solution.
No. 3. bLazy.js plugin using simple JSThis script is lightweight, performs asynchronous loading and works with multiple images in order to save traffic and server requests. Its use provides:
Standard implementation. Markup:
The img tag needs to be changed:
JavaScript: specify a standard bLazy call and configure the object using the options map:
Var bLazy = new Blazy(( //options ));
No. 4. Lazy Load XT jQuery pluginAn excellent plugin for conveniently writing your own lazy loading script. Note that there is full version jQuery plugin, where through asynchronous loading you can load videos, iframes and other tags containing the src attribute, and there is a simplified one, dedicated exclusively to simple lazy loading.
To use the plugin on the site, you need to add the jQuery library before the closing tag, specifying jquery.lazyloadxt.js (simplified version) or jquery.lazyloadxt.extra.js (extended):
There are also Alternative option, which allows you not to use the entire plugin - a lightweight script jqlight.lazyloadxt.min.js:
In images, replace src with the data-src attribute:
The plugin can be activated automatically, or you can do it yourself. To do this, simply enter:
$(elements).lazyLoadXT();
Lazy Load XT jQuetry adds a large number of addons. Eg:
Advantages of the technique:
You can view all addons and options using this link.
№5. Blurred image by Craig BucklerYou've probably noticed on some sites how the main image of an article is blurry at first, and then a clear image loads High Quality. There are several options for uploading photos using the blur effect method. One of the best is Craig Buckler.
The advantages of the technique are:
You can download the code from the GitHub site repository.
First you need to include the jQuery library:
The essence of the method is to load the necessary content using AJAX div element from the left file to the landing page.
Portfolio 
Show more...
Everything is quite simple and clear. But you need to pay attention to the div with id=”smartPortfolio”, because they are in the most important script responsible for loading content from third-party documents. The “container” of the portfolio is SmartPortfolio. MoreButton – a button that, when clicked, loads another portfolio fragment. LoadingDiv – part of the page where text will be displayed if full opening portfolio or any error occurs.
For example, many of those who read the article will then test the script via index file in the browser, rather than uploading it to the server. This will display an error notification. And if there is also a weak Internet connection, then the files will take longer to download. Therefore, it is important to write a message or insert a picture letting the user know that the download is in progress.
Here is the script itself, to connect it you need to insert the code before the closing one body tag :
Var lazyload = lazyload || (); (function($, lazyload) ( "use strict"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, success: function(response) ( if ( !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Portfolio fully loaded"); return; ) appendContests(response); : function(response) ( $(loadingId).text("Sorry, there was some error with the request. Please refresh the page."); ) )); $(buttonId); $(buttonId).show(); $(response).appendTo($(container)); ;
In the structure of the web resource, the pages from which the data will be taken to be loaded when clicked are located in the pages folder. It contains 3 files, the last one is empty. This is provided for by the script logic. The path in it looks like this:
Var url = "./pages/" + page + ".html";
But when using a different path, it is important to replace it in the script itself. The same needs to be done if you used other IDs:
ButtonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio";
Then, as mentioned earlier, before the body (closing) tag, we indicate the script:
Conclusion
Lazy loading allows you to speed up site performance and significantly save traffic due to the fact that objects located outside the visibility range of the browser window are loaded only after the user needs it. Due to the variety of asynchronous loading types and implementation options, it can be used for different types of websites and their target traffic.
We'll start with regular page gallery that contains a container for our images, and we will track the scroll position using the call JavaScript functions with a short interval. Each time the scroll bar is at the bottom of the page, we will do AJAX request to the outside PHP file which returns a list of image names. After that, all we need to do is add these images to our container, and modify the page height by moving the scroll position higher.
Step 2: HTML MarkupHere we only need to set the title and container for our images. The thumbnails will be grouped into sets of three lines. Each thumbnail contains a link to the full-size image. After each group we will add text that shows the total number of images displayed and a link to the top of the page.
Web gallery| Infinite scrolling 
Showing 9 images | Up
Step 3: CSS CSS is also quite simple.
Body( background:#222; color:#666; ) #header( font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; text-align:left; text-indent: 35px; margin: 0 auto; width:800px; margin-bottom:10px; ) p( color :#444; text-align:left; margin-left: 20px; margin-bottom: -10px; 
Now let's add some CSS3 to round the corners and draw shadows. Need to use -moz-box-shadow And -moz-border-radius for Firefox and -webkit-box-shadow And -webkit-border-radius for Chrome and Safari.
#container( margin: 0 auto; width:800px; border:1px solid #333; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-family:Verdana, Geneva, sans-serif; text -align:center; ) img( border:10px solid #444; -moz-border-radius: 5px; -webkit-border-radius: 10px; margin: 15px; ) img:hover( border-color:#555; - moz-box-shadow: 0px 0px 15px #111; -webkit-box-shadow: 0px 0px 15px #111; 
It will be very short. You need to call the PHP script with the index next image which we need as a parameter. The first thing we need to do is take all the image names from the folder and store them in an array. There are two folders for storing images: thumb And img, which contain thumbnails and full size images, accordingly. Thumbnails must have exactly the same names as full-size images.
As mentioned, images are grouped into sets of three rows, each containing three images. This way we only need to return nine image names for the group. We start from the index we received as a parameter, $n, and we finish $n+9. At each step of the loop we add the name of the image and ";" after it in the line of returned text. There's a little trick here. We don't need an infinite number of image numbers. To create the effect of an infinite gallery that never ends, each time the index of the next image must be greater than the total number of images and we must start from the beginning. This is done using the function % (modulo division) index and total number of images.
$i%count($files)
As a result, we get the remainder of the division. For example, if the index $i count($files) is 45, the result will be 5. And if if the index $i is 50 and the number of images count($files) is 65, then the result will be 50. Finally, we return the response text.
Step 7Here is full text PHP script. It needs to be placed in a new file .php.
Step 8: JavaScript
Let's define several variables that will be needed later:
Var contentHeight = 800; var pageHeight = document.documentElement.clientHeight; var scrollPosition; var n = 10; var xmlhttp; 
To determine when the scrollbar will be at the bottom of the page, we need to define three variables:
- contentHeight- height of the original gallery
- pageHeight- height visible page in the browser
- scrollPosition- scrollbar position measured from top
We will also need a variable to store the index of the next image (which we pass to the PHP script), and a variable for the Ajax request object.
Step 9We need to define a function that will add images to our HTML container.
Function putImages())( if (xmlhttp.readyState==4)( if(xmlhttp.responseText)(
The request object changes its states during the execution of the request. Each state is associated with numerical value. We are interested in the final state when the request is completed and the value is 4. First we check if the request is in in the right condition and then we check whether we received a response or not.
Step 10If both conditions are met, we must process the returned text. This means that we have to separate the file names and put them into an array. The PHP script returns a single string with names separated by semicolons, for example: "Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg; EndlessSlights.jpg;"
Var resp = xmlhttp.responseText.replace("\r\n", ""); var files = resp.split(";");
We need to solve a small problem. The response body may contain a newline character in the first position. And we don't need him. The problem can be easily solved using the function replace, which takes two parameters: "\r\n" - a newline character, and "" - an empty string that replaces all occurrences of the first parameter. Now all that remains is to split the line using the ";" symbol.
Step 11Now we add images to our container.
Var j = 0; for(i=0; i
