目に見えるコンテンツの優先順位付けWordpress

Question

私はWordpressサイトを実行しており、カスタムテーマを作成しました。 今、私はGoogle PageSpeedのためにそれを最適化するつもりです。モバイルページのために、以下のことを示しています

修正考えてみましょう：最終上記-倍のコンテンツの約63％は、これは私が「ので、表示された完全なHTML応答

でレンダリングすることができ

<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の上で私の投稿上記Featured Imageを含まveは？私は、サイトのロゴとは別に、注目画像の前にサイドバーのようなものを読み込んでいるとは思われません。より深い理解のために、ここに私の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ページスピードのスコアを持っている人は、スピードが過度に最適化されていると、問題を解決するための不満があるとは思わないでしょう。場合に応じて、Wikipediaまたは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 0.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を表示します。例：だから、その原料が最高のヘッダ内のインライン<style>要素に含まれている

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

、など、ブラウザはそれがユーザーにページを表示することができます前にロードするためにstyle.cssを待つ必要はありません。

スクリプトを細かくする、スクリプトを非同期にする、deferを使用する、絵文字を無効にするなど、特定の作業を高速化するためにWordpressテーマをハッキングする必要がある場合は、コメントを尋ねるか、私たちは喜んで助けてくれるでしょう。

私は何が起こっているのより良いアイデアを得るために他のサイトでのテストをお勧めします。私はお勧めWebpagetest.orgと滝のチャートを使用すると、リソースが最も長く服用していることを教えてくれます：

また、これを支援するためのツールを使用することができます。
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools