PageSpeed Insightsにて「修正が必要」の警告が出ている

Simplicityの特徴 フォーラム Simplicityについての質問 PageSpeed Insightsにて「修正が必要」の警告が出ている

  • このトピックには6件の返信、1人の参加者があり、最後に中二病FXにより9年、 3ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #33868
      やっきー
      ゲスト

      初めまして。やっきーと申します。

      PageSpeed Insightsにて分析をした際に、以下の様な警告が出てきました。
      CSSなどのファイルは何もいじっておらず、デフォルトのまま使っているのですが、どうやったら改善されますでしょうか?

      もしテンプレートの仕様上の問題でしたら、改善いただけると助かります><

      ————————-

      【モバイル】

      修正が必要:
      スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

      このページには、レンダリングをブロックするスクリプト リソース が 2 個、CSS リソースが 14 個あります。これが原因で、ページのレンダリングに遅延が発生しています。

      以下のリソースの読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを何もレンダリングできませんでした。レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。

      レンダリングをブロックする JavaScript を除去してください:
      /wp-includes/js/jquery/jquery.js
      /…includes/js/jquery/jquery-migrate.min.js

      次のCSS 配信を最適化してください:
      /wp-content/themes/simplicity/style.css
      /…licity/webfonts/css/font-awesome.min.css
      /…es/simplicity/webfonts/icomoon/style.css
      /…tent/themes/simplicity/css/extension.css
      /…/themes/simplicity/css/responsive-pc.css
      /…arge-picture-header-strawberry/style.css
      /wp-content/themes/simplicity/mobile.css
      /…-content/themes/simplicity/css/media.css
      /…content/themes/simplicity/css/narrow.css
      /…rge-picture-header-strawberry/mobile.css
      /…s/contact-form-7/includes/css/styles.css
      /…ns/table-of-contents-plus/screen.min.css
      /…or-videos/css/min/style-lazyload.min.css
      /…-content/plugins/jetpack/css/jetpack.css

      ————————–

      使用テーマ:Simplicity1.9.2
      wordpressバージョン:4.3.1

    • #33874
      Hidekichi
      ゲスト

      jQueryはdeferあるいはasyncを付与することでレンダリングブロックを防げます。
      jQuery-migrateは、jQueryのバージョンアップ等で利用できなくなったものを利用するためのプラグインですが、jQueryの書き方さえ気をつけていれば必要ないものなので、わからない場合は入れておいたほうが良いですが、基本必要ありません。レンダリングブロックの防ぎ方自体はjQueryと同様です。

      CSSについては、それぞれを圧縮する事で最適化できますが、圧縮によって不具合が生じる場合があります。
      圧縮には色々と方法があるのですが、Wordpressの場合、例えばstyle.cssに、

      /*!
      Theme Name: Simplicity1.8.9
      Description: Simplicityの意味は、単純、簡単、簡素、質素です。飾り気のないカスタマイズの土台となれるようなテーマを目指して作りました。
      Theme URI: http://wp-simplicity.com/
      Author: yhira
      Author URI: http://nelog.jp/
      Version: 1.8.9 20150928
      Tags: white, two-columns, left-sidebar, right-sidebar, flexible-width
      License: GNU General Public License
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      */

      こういうのが書いています。これらはこれがテーマの情報になるのですが、圧縮は基本こういったコメント部分を削除したりしますので、スタイルの部分だけを圧縮する必要があります。

      今もあるかどうかわかりませんが、PageSpeed Insightsの結果部分の真ん中あたりぐらいに、cssと画像・jsの圧縮されたファイルをダウンロードできるリンクがあります。それらをダウンロードして適用すれば良いのですが、上記のテーマの情報はもちろん無くなっているはずですので、別途各々に追記する必要があります。
      またプラグインのアップデートでは丸ごとアップデートされるので、圧縮されたものが無くなりまた同じような結果になります。

      jQueryやjavascriptについては、うちのサイトですがSimplicityを少し改造してみた 番外編 part5 スクリプトのレンダリングブロックを解消するの真ん中あたり、「スクリプトタグを修正する」の所を参考までに。

      script_loader_tagというのを利用して、deferなり、asyncなりを追記することで何とかなります。ただし、asyncを利用する場合はちょっと注意が必要です。document.writeを利用している様なスクリプトではasyncは利用できません。利用できなくはないのですが、問題が発生する場合が多々あります。

    • #33878
      Hidekichi
      ゲスト

      サイト自体がそこそこ速く、問題なく動作しているのであればPageSpeed Insightsは気にするほどではないかと思います。そうしたほうが良いですよってぐらいのものです。

    • #53226
      中二病FX
      ゲスト

      いつもご利用させていただいてます。ありがとうございます。
      今回、Simplicity1.9バージョンから2.0の最新子テーマに変更したため、
      色々とスピードアップのためにググっていたのですが、
      Simplicityを少し改造してみた 番外編 part5 スクリプトのレンダリングブロックを解消する
      内の「スクリプトタグを修正する」のすぐ下にあるコードをSimplicityの子テーマのfunctions.phpに追記したのですが、途端にHTTPエラー500となり、まったく修正ができない状態になってしまいました。

      BackWPupでのZipファイルがあるものの、どうやって復活させればいいのかわからなくて困っております。
      「blazechariot -Xdomain-」のブログにコメントをしようと思いましたが、
      コメント欄が見当たらなかったので、こちらで質問しました。
      ご教授よろしくお願いいたします。

    • #53227
      中二病FX
      ゲスト

      ちなみにXサーバーです。

    • #53228
      かうたっく
      ゲスト

      こんにちは!
      書いた記載を消せば元に戻りますよっ

      エックスサーバーなら、webFTPでfunctions.phpにはいれます

      パスは
      public_html/wp-content/themes/該当子テーマ/functions.php

      です

    • #53230
      中二病FX
      ゲスト

      かうたっくさんご丁寧にどうもありがとうございます!
      無事治りました(^^♪
      また何かあればよろしくお願いいたします♪

6件の返信スレッドを表示中
  • トピック「PageSpeed Insightsにて「修正が必要」の警告が出ている」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)