Wordpress page lagging

Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.

Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/

Any help is greatly appreciated!

Solution

You issue is background-attachment

Chris Ruppel writes:

[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.

The culprit is your header background image.

it is fixed and is consistently getting repainted on scroll behind your page content.

In you CSS file you have this

.section-parallax {
    background-attachment: fixed;
}

If you remove that then you smooth scrolling without trouble but you loose the parallax effect.

If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.

for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:

/* 
See https://codepen.io/MarcelSchulz/full/lCvwq

The effect doens't appear as nice when viewing in split view :-)

Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).

*/

jQuery(document).ready(function() {
  $(window).scroll(function(e) {
    parallaxScroll();
  });

  function parallaxScroll() {
    var scrolled = $(window).scrollTop();
    $('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
    $('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
    $('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
  }

});

body {
  background: rgba(230, 231, 232, 1);
  height: 4600px;
}


/* foreground (balloons/landscape)*/

div#parallax-bg-1 {
  position: fixed;
  width: 1200px;
  top: 0;
  left: 50%;
  margin-left: -600px;
  z-index: 1;
}


/* background middle layer*/

div#parallax-bg-2 {
  position: fixed;
  width: 1200px;
  top: 0;
  left: 50%;
  margin-left: -600px;
  z-index: 2;
}


/* background layer */

div#parallax-bg-3 {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -470px;
  z-index: 3;
}


/* foreground */

div#parallax-bg-3 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  overflow: hidden;
}

div#bg-3-1 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
  width: 529px;
  height: 757px;
  top: -100px;
  right: 100px;
}

div#bg-3-2 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
  width: 603px;
  height: 583px;
  top: 1050px;
  right: 70px;
}

div#bg-3-3 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
  width: 446px;
  height: 713px;
  top: 1800px;
  right: 140px;
}

div#bg-3-4 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
  width: 1104px;
  height: 684px;
  top: 2800px;
  right: 0px;
}


/* middle layer clouds */

div#parallax-bg-2 div {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  width: 488px;
  height: 138px;
  overflow: hidden;
}

div#bg-2-1 {
  top: 100px;
  left: -310px;
}

div#bg-2-2 {
  top: 270px;
  right: -70px;
}

div#bg-2-3 {
  top: 870px;
  left: -300px;
}

div#bg-2-4 {
  top: 1120px;
  right: -130px;
}

div#bg-2-5 {
  top: 1620px;
  left: 140px;
}

div#bg-2-6 {
  top: 720px;
  left: 340px;
}


/*background layer clouds */

div#parallax-bg-1 div {
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  width: 488px;
  height: 138px;
  overflow: hidden;
}

div#bg-1-1 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 200px;
  right: 450px;
}

div#bg-1-2 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
  top: 420px;
  left: 0px;
}

div#bg-1-3 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 850px;
  right: -290px;
}

div#bg-1-4 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
  top: 1350px;
  left: 200px;
}

div#bg-1-5 {
  background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
  top: 1200px;
  left: -200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <div id="parallax-bg-3" class="parallax-bg">
    <div id="bg-3-1"></div>
    <div id="bg-3-2"></div>
    <div id="bg-3-3"></div>
    <div id="bg-3-4"></div>
  </div>
  <div id="parallax-bg-2" class="parallax-bg">
    <div id="bg-2-1"></div>
    <div id="bg-2-2"></div>
    <div id="bg-2-3"></div>
    <div id="bg-2-4"></div>
    <div id="bg-2-5"></div>
    <div id="bg-2-6"></div>
  </div>
  <div id="parallax-bg-1" class="parallax-bg">
    <div id="bg-1-1"></div>
    <div id="bg-1-2"></div>
    <div id="bg-1-3"></div>
    <div id="bg-1-4"></div>
    <div id="bg-1-5"></div>
  </div>

</body>

</html>

In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so

.element {
    position: relative;
}
.elemnt:before {
    content: ' ';
    position: fixed; /* instead of background-attachment */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/front/strategy.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; /* creates a new paint layer */
    z-index: -1;
}

And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.

Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.

Resources: