Simplicityの特徴 › フォーラム › Simplicityについての質問 › PageSpeed Insightsにて「修正が必要」の警告が出ている
- このトピックには6件の返信、1人の参加者があり、最後に
中二病FXにより9年、 3ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年11月23日 11:00 PM #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 -
2015年11月24日 7:33 AM #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は利用できません。利用できなくはないのですが、問題が発生する場合が多々あります。
-
2015年11月24日 7:36 AM #33878
Hidekichi
ゲストサイト自体がそこそこ速く、問題なく動作しているのであればPageSpeed Insightsは気にするほどではないかと思います。そうしたほうが良いですよってぐらいのものです。
-
2017年6月18日 7:16 AM #53226
中二病FX
ゲストいつもご利用させていただいてます。ありがとうございます。
今回、Simplicity1.9バージョンから2.0の最新子テーマに変更したため、
色々とスピードアップのためにググっていたのですが、
Simplicityを少し改造してみた 番外編 part5 スクリプトのレンダリングブロックを解消する
内の「スクリプトタグを修正する」のすぐ下にあるコードをSimplicityの子テーマのfunctions.phpに追記したのですが、途端にHTTPエラー500となり、まったく修正ができない状態になってしまいました。BackWPupでのZipファイルがあるものの、どうやって復活させればいいのかわからなくて困っております。
「blazechariot -Xdomain-」のブログにコメントをしようと思いましたが、
コメント欄が見当たらなかったので、こちらで質問しました。
ご教授よろしくお願いいたします。 -
2017年6月18日 7:21 AM #53227
中二病FX
ゲストちなみにXサーバーです。
-
2017年6月18日 12:01 PM #53228
かうたっく
ゲストこんにちは!
書いた記載を消せば元に戻りますよっエックスサーバーなら、webFTPでfunctions.phpにはいれます
パスは
public_html/wp-content/themes/該当子テーマ/functions.phpです
-
2017年6月18日 3:16 PM #53230
中二病FX
ゲストかうたっくさんご丁寧にどうもありがとうございます!
無事治りました(^^♪
また何かあればよろしくお願いいたします♪
-
-
投稿者投稿
- トピック「PageSpeed Insightsにて「修正が必要」の警告が出ている」には新しい返信をつけることはできません。