php - 优先显示可见内容 Wordpress

Question

我正在运行一个 Wordpress 网站并创建了一个自定义主题。 现在我一直在为 Google PageSpeed 优化它。它显示移动页面的以下内容:

Consider Fixing: Only about 63% of the final above-the-fold content could be rendered with the full HTML response

这是因为我在 index.php 上的帖子上方包含了 Featured Image 代码:

<p>
  <?php if ( has_post_thumbnail() ) : ?>    
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
      <?php the_post_thumbnail(); ?>
    </a>
  <?php endif; ?>
</p>

我该如何解决这个问题？在我看来，除了网站 Logo 之外，我没有在特色图片之前加载类似侧边栏的内容。为了更深入的理解，这里是我的 index.php 的完整代码

<?php get_header(); ?>
  <div id="main">
    <div id="content">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <p>
          <?php if ( has_post_thumbnail() ) : ?>    
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
              <?php the_post_thumbnail(); ?>
            </a>
          <?php endif; ?>
        </p>
        <h1>
          <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
            <?php the_title(); ?>
          </a>
        </h1>
        <p>
          <?php the_content(__(' <br /> <br /> Weiterlesen →')); ?>
        </p>
        <hr> 

      <?php endwhile; else: ?>
        <p>
          <?php _e('Sorry, no posts matched your criteria.'); ?>
        </p>
      <?php endif; ?>
      <?php if (show_posts_nav()) : ?>
        <div class="pagination">
          <?php echo paginate_links(); ?>
        </div>
      <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
  <div id="delimiter">
  </div>
<?php get_footer(); ?>

有人可以帮我解决这个问题吗？我做错了什么？

Answer 1

作为拥有 100/100 pagespeed 分数的人，我可以告诉您，过度优化速度可能不值得您在解决问题时遇到挫折。例如，在维基百科或 YouTube 上运行 Pagespeed 测试。这些是热门网站，例如，YouTube 的得分仅为 50。您想要改进这些数字的真正原因是为用户提供更好的体验，因为他们不必等待页面加载。

您的首屏内容只是在等待加载其他资源时允许显示的内容:

Your page has 4 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:
/…-includes/js/jquery/jquery.js?ver=1.11.3
/…s/jquery/jquery-migrate.min.js?ver=1.2.1
/…ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/…ightbox/jquery.lightbox.min.js?ver=1.4.6

Optimize CSS Delivery of the following:
/wp-content/themes/1000PB/style.css
/…ghtbox/styles/lightbox.min.css?ver=1.4.6

您最好将精力用于优化这些内容的交付(使用 async 或 defer 用于脚本和样式表)，因为这些会降低您的整体页面速度得分并损害您的搜索引擎排名。

不过，要回答您的问题，您可以检查页面顶部的元素，通常是无需向下滚动即可看到的所有元素，以查看它们的 css。示例:

img.attachment-post-thumbnail {
    border: 1px solid #e6e6e6;
    padding: 3px;
}

所以这些东西最好包含在内联中 <style> header 中的元素，这样浏览器就不必等待 style.css在它可以向用户显示页面之前加载。

如果你需要帮助破解你的 Wordpress 主题来做某些事情来让它更快，比如缩小脚本，使脚本异步，使用 defer 、禁用表情符号等，只需在评论中提问或提交其他问题，我们将很乐意提供帮助。

我建议在其他网站上进行测试，以更好地了解发生了什么。我推荐 Webpagetest.org，使用瀑布图会告诉您哪些资源花费的时间最长:

You can also use tools to help with this:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools