Question

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

考虑修复：只有大约63％的最终首屏内容可以使用完整的HTML响应进行呈现

这是因为我在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>

我该如何解决这个问题？在我看来，除了网站的标志之外，我还在特色图片之前加载侧边栏。为了更深入的理解，这里是我的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页速度分数的人，我可以告诉你，过度优化速度可能不值得你解决问题的挫折。例如，在维基百科或YouTube上运行Pagespeed测试。例如，这些是热门网站，YouTube只有50分。您希望改善这些数字的真正原因是为用户提供更好的体验，因为他们不必等待页面加载。

您的折叠内容就是在等待加载其他资源时允许显示的内容：

您的页面有4个阻止脚本资源和2个阻止CSS资源。这会导致呈现页面的延迟   在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻塞资源，或直接在HTML中内联这些资源的关键部分。

  删除渲染阻止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

  优化以下内容的CSS传递：
  /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>元素中，因为浏览器不必等待style.css加载才能向用户显示该页面

如果您需要帮助破解Wordpress主题以执行某些操作以加快速度，例如缩小脚本，使脚本异步，使用defer，禁用表情符号等，只需在评论中提问或提交另一个问题，我们很乐意提供帮助。

我建议在其他网站上进行测试，以便更好地了解正在发生的事情。我推荐使用Webpagetest.org，并使用瀑布图表告诉您哪些资源耗时最长：

您也可以使用工具来解决此问题：
  的 CSS Tricks: Authoring Critical Above-the-Fold CSS
  的 Critical-path (Above-the-fold) CSS Tools

优先考虑可见内容Wordpress

1 个答案: