Dfyjkt

My website (https://whatifhq.com) loads fine, and quite quickly. However, when I try to scroll down, it starts getting laggy and isn't smooth anymore. I've only encountered this problem in Chrome. (tested on chrome, edge, ie). I'm using Chrome V 70, WordPress for my website, and PHP 7.1

I read some other SO posts, most recommended removing some scripts, images, animations. So, I removed animate.css, Adsense, and some other images. However, it still isn't working.

This issue occurs only on the desktop. The mobile version of my site works fine on the same computer. (the mobile and desktop have basically the same content.)

One thing that may be causing the problem is my AJAX infinite scroll script. It checks what position the window is in and then decides whether to load the new content. however, this feature is also on my mobile site, which works fine. Also, the scrolling issue is also present on pages without AJAX, like this https://whatifhq.com/question/where-can-one-find-some-good-resume-cv-templates/

I've also done some speed testing and gotten really good scores. 85%+ Pagespeed, All 'A' WebPageTest.

Can someone please help?

Edit: Not Ajax. I removed the script and the page is still laggy.

Heres my My AJAX script

$(document).ready(function(){
 InfinitiScroll = Backbone.View.extend(
 el: 'body',
 initialize : function()
 var view = this;

 $(window).scroll(function()
 if($(window).scrollTop() >= ($(document).height() - $(window).height()) - 1000 && $("#post_loading").attr('data-fetch') == 1 )
 view.ajaxData(query_default); 
 

 );

 var loading = $('body').find('#post_loading'),
 fetch = $(loading).data('fetch'),
 type = $(loading).data('type'),
 term = $(loading).data('term'),
 taxonomy = $(loading).data('taxonomy'),
 posts_per_page = $(loading).data('current-page'),
 sort = $(loading).data('sort'),
 keyword = $(loading).data('keyword'),
 query_default = 
 action : 'et_post_sync',
 method : 'scroll',
 data : 
 posts_per_page : posts_per_page,
 type : type,
 term : term,
 taxonomy : taxonomy,
 sort : sort,
 page : 1,
 keyword : keyword
 
 ;
 setInterval(function()
 if($('ul#main_questions_list li.question-item').length < 6 && $("#post_loading").attr('data-fetch') == 1 )
 view.ajaxData(query_default);
 
 , 3000); 

 ,
 ajaxData : function(query_default)
 var loading = $('body').find('#post_loading');
 query_default['data']['page'] += 1;

 $.ajax(
 url : ae_globals.ajaxURL,
 type : 'post',
 data : query_default,
 beforeSend : function()
 $(loading).removeClass('hide');
 $(loading).attr('data-fetch',0);
 ,
 error : function()
 $(loading).addClass('hide');
 $(loading).attr('data-fetch',1);
 ,
 success : function (response)
 setTimeout(function()
 if(response.success)
 var container = $('body').find('#main_questions_list'),
 questions = response.data.questions;
 for (key in questions)
 $(container).append(questions[key]);
 
 $(loading).addClass('hide');
 $(loading).attr('data-fetch',1);
 else
 $(loading).addClass('hide');
 

 ,1500);
 
 ); 
 
 );

I did some performance profiling while scrolling your non-ajax page: https://prnt.sc/lh0s2d. Note how fps drops to ~10 while scrolling, and 95% of the time is consumed by requestAnimationFrame() calls. Looks like it all boils down to this function that gets called on each frame: https://prnt.sc/lh0s5f. I suspect that document.querySelectorAll() and setAttribute() are very expensive and calling them like that on each frame is what contributes to the lagginess.