Wordpress 一页网站使用 wp_is_mobile() 加载缓慢

Question

我正在更新使用 wordpress 的网站的外观。对于前端，我使用的是 bootstrap 4，并且正在尝试优化网站的加载时间。我注意到当用户尝试滚动并且在用户滚动页面后渲染显示一些空白部分一段时间时，它真的很慢。这是一个单页网站，所以我没有页面 suddivision 并且所有内容都是在index.php 文件中加载的帖子。我对 wp_is_mobile() 用于检测用户是否从桌面或移动设备查看网站的功能有疑问，我有一个仅在移动设备上加载的滑动滑块和另一个具有相同图像的布局结构仅加载在桌面上。网站的所有部分都会发生这种情况，我认为这是元素渲染缓慢的原因。我想尝试使用 bootstrap 4 的可见性实用程序来隐藏我只想在移动设备上显示的元素，例如：

<?php if( wp_is_mobile() ): ?>
<div class="jumbotron jumbotron-fluid" id="carousel-wrapper">
  <div id="progetti-carousel" class="swiper-container">
    <div class="swiper-wrapper">
      <?php $slider = get_posts(array('post_type' => 'slider_progetti', 'posts_per_page' => 12)); ?>
        <?php foreach($slider as $slide): ?>
          <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="swiper-slide img-fluid"/>
      <?php endforeach; ?>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
<?php endif; ?>

// or for desktop on the same template part:

<?php if( !wp_is_mobile() ): ?>
    <div class="col-lg-6">
      <div class="card-columns">
<?php $slider = get_posts(array('post_type' => 'slider_progetti', 'posts_per_page' => 12)); ?>
<?php foreach($slider as $slide): ?>
        <div class="card">
          <a class="open-modal" data-toggle="modal" href="#zoom-image"><img class="card-img-top" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" /></a>
        </div>
<?php endforeach; ?>
      </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="zoom-image">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <img class="img-fluid w-100 img-zoomed" />
          </div>
        </div>
      </div>
    </div>
<?php endif; ?>

我不知道这样能不能加快加载速度，我也很担心，因为我不知道加倍查询会不会有问题，对于加倍查询我的意思是在是移动 wordpress 功能，我正在使用与桌面相同的代码来处理我想要的元素，这些元素以布局形式出现在移动设备上，并与另一个元素一起出现在桌面上。这将打破 dìthe DRY 原则，我知道这是一种不好的做法。任何有关如何改善加载的建议将不胜感激。

Answer 1

我建议您使用wp_is_mobile() 函数并将结果存储在一个变量中，然后在您使用wp_is_mobile() 的任何地方重复使用该变量。

$is_mobile = wp_is_mobile();

此外，您应该使用 Bootstrap 提供的 CSS 类在布局上显示/隐藏元素：

https://getbootstrap.com/docs/4.0/utilities/display/

作为参考，wp_is_mobile() 的工作方式如下：

/**
 * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
 *
 * @since 3.4.0
 *
 * @return bool
 */
function wp_is_mobile() {
    if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
        $is_mobile = false;
    } elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    /**
     * Filters whether the request should be treated as coming from a mobile device or not.
     *
     * @since 4.9.0
     *
     * @param bool $is_mobile Whether the request is from a mobile device or not.
     */
    return apply_filters( 'wp_is_mobile', $is_mobile );
}