WordPress 页面滞后

Question

我目前正在为客户修复 wordpress 网站，不幸的是我在其中一个页面上滚动时遇到了很多问题。我一次又一次地尝试删除可能导致它的任何滚动辅助 js，但我似乎仍然无法让它工作。

这是给我带来麻烦的页面 URL：http://www.bombaygrilloh.com/home/menu/

非常感谢任何帮助！

Answer 1

你的问题是background-attachment

[...] 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.

罪魁祸首是您的 header background 图片。

它是 fixed 并且在页面内容后面的滚动条上不断重绘。

在你的 CSS 文件中你有这个

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

如果删除它，则可以毫无问题地平滑滚动，但会失去视差效果。

如果您必须要有视差效果，那么您需要使用更有效的方法来获得效果，或者用自己的方式来实现。

为了提高使用效率jQuery。找了一个pen by Marcel Schulz复制在下面供参考：

/* 
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>

在我上面引用的 same article 中，有一个关于如何解决 CSS 问题的教程。不要使用 background-attachment: fixed，而是将 background 添加到 pseudo-element 并像这样固定 postion

.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;
}

这将基本上限制对滚动的影响，因为 "background" 将拥有自己的独立元素。

注意：如果您运行遇到无法调试的问题，请打开开发工具并开始从页面中一个一个地删除元素，直到找到问题。

资源：

Answer 2

通过查看您的网站，其中有几个部分正在减慢其余部分的速度。这里有一些简单的方法可以加快速度。

使用 CDN

CDN（内容分发网络）确保所有内容加载速度更快，因为它不依赖于您自己的 Wordpress 服务器，并且允许全球访问时间保持一致。有一些不错的，比如 CloudFlare 和 Incapsula。 Here 是一篇列出更多内容的文章。

此外，您可以以稍快的速度托管您的图片（我看到一张来自维基百科）

压缩图片

这一步就像将照片转换为 .jpg 一样简单。 JPEG 通过去除照片中不必要的信息来自动压缩数据。您也可以使用压缩软件来减小文件大小。

利用缓存

使用 a caching plugin（适用于 Wordpress 的有很多）在您的服务器上缓存数据，并且可以真正加快您网站的运行速度。

搜索更多优化方法

使用 Pingdom and Google PageSpeed Insights 等工具识别并解决瓶颈。

希望对您有所帮助！

WordPress 页面滞后

Wordpress page lagging

javascript

wordpress

lag