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

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

このトピックには6件の返信が含まれ、1人の参加者がいます。1 週、 2 日前 中二病FX さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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

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

トピック「PageSpeed Insightsにて「修正が必要」の警告が出ている」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)