G-ジェット

スマホ・PC・デジタル家電からwebサービス・アプリのニュースやレビューをお伝えする総合ガジェットサイト

PageSpeed Insightsスコアがダウン!原因はJetpackプラグインだった

time 2015/02/27

jetpack

今回はサイト運営者向け、特にCMSにWordPressを使用している方向けの記事です。

WordPressはプラグインというのものを入れて機能を拡張、自由にカスタマイズ出来るのが特徴の一つです。
今回そのWordPressプラグインの中でも屈指の人気を誇る多機能プラグイン「Jetpack」がGoogle PageSpeed Insightsのモバイルスコアに悪影響を及ぼしていることが分かりました。
そこで、その原因と解決方法、それまでの経緯を説明します。

sponsored link

Google Page Insights ――その事の発端

Google Page Speed Insightsはサイトの表示速度を計測できるWeb上のサービスです。計測するとモバイル・PCの両方で表示した場合のスコアを算出してくれます。
モバイル向けのスコアを独立させていることから、Googleがモバイル向けWebサイトを重視していることが分かります。

測定はネットワーク品質以外のサーバー設定、ページの HTML 構成、画像やJavaScript、CSS などについて行われます。
Webページの表示速度に最も大きな影響があるのはネットワーク品質ですが、個々の環境に左右されバラつきがあるので除外されています。

スコアは100段階で高い方がより高速であることを意味します。

無料でこのようなサービスが提供されていることはサイト運営者にとってはありがたいですね。
早速、当サイトG-ジェットでも測定を行ってみることにします。

モバイルフレンドリーテスト

pagespeedinsight

ページにアクセスするとモバイルがどうこうといった表示がされています。
どうやらこれはWebサイトがモバイル向けの端末での表示に適しているか、Googleはこれをモバイルフレンドリーと呼んでおり、このテストはそれに該当するかどうか分かるようです。
モバイルに対してGoogleが注力していることがここでも表れています。

せっかくなのでまずこちらのテストからやってみることに。

mobile-friendly

どうやらG-ジェットはモバイルフレンドリーのようです。

PageSpeed Insights

Googleのお墨付きを頂いたところで、本題のPageSpeed Insights です。ボックスにサイトのURLを入力します。

pagespeedinsight_01

結果は……!

mobile-score-alert

72点でした。良くもなく、悪くもなくといったスコアです。モバイルフレンドリーテストで喜んでいたのも束の間、Googleでは85点以上を十分な速度だと判断しているようですので、得点の改善を図ります。

赤いエクスクラメーションマークが表示されています。これは修正が必要なようで、「修正方法を表示」の所をクリックすると、その詳細が表示されます。

movile-alert-factor

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
このページには、レンダリングをブロックするスクリプト リソースが 1 個あります。これが原因で、ページのレンダリングに遅延が発生しています。

これが減点となっている大きな理由のようです。
レンダリング、Webサイトの場合、平たくいうとブラウザがページを描画・表示することです。レンダリングブロックとはこれをブロック――妨害しているということでしょう。

ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。

Rendering_flow
by Ilya Grigorik

Googleではこう説明しています。それと共に解決方法も提示されていました。

推奨される解決方法

スクロールせずに見える範囲の表示に必要な JavaScript はインライン化し、ページに機能を追加するのに必要な JavaScript は、スクロールせずに見える範囲のコンテンツが配信されるまで遅延させてください。なお、この方法で読み込み時間を改善するためには、CSS の配信を最適化する必要もあります。

  • スクリプトのインライン化
  • 読み込みの遅延

主な解決方法はこの2つのようです。
これを実現するお手軽な方法が無いものかと問題の提示をされたGoogleで方法を検索します。
すると、いくつかのWordPressプラグインで解消できるとの情報がよく引っかかりましたので試してみることに。

プラグインによる解決を試みる

Asynchronous Javascript

asynch_javascript

このAsynchronous Javascriptは非同期でスクリプトを読み込むプラグインです。
レンダリングブロックをしているスクリプトを排除できるようなので導入。
インストールして有効化します。再び、PageSpeed Insightsで計測をします。結果は……

mobile-score

最初の結果と変わりません。

いくつかWordPressプラグインが見つかったので2つ目のプラグインを試してみます。

Async JS and CSS

asyncjsandcss

Async JS and CSSはヘッダーに出力されていたJavascriptとCSSをフッターに持っていく機能とインライン化を行うようです。
Googleが提示した解決方法に則しているので、これは期待できそうです。先ほどと同じくインストールして有効化、PageSpeed Insightsで計測します。
果たして……!

pagespeed_02

スコアに変動はありませんでした。
懲りずに3つ目のプラグインを導入してみます。

WP Deferred Javascripts

deferred-js

このWP Deferred JavascriptsはJavascriptの解決方法で提示された「読み込みの遅延」を行ってくれるようです。
これなら解決しそうですね。同じくインストールしてスピードテストをしてみます。
三度目の正直、なるか……!

pagespeed_03

二度ある事は三度あるの方でした。「分かってた」「いい加減くどい」などの声もちらほら聞こえてきそうです。仏の顔も三度までという言葉もあるので読者の方がブラウザを閉じる前に、プラグインでなんとかする方法は一旦やめます。
楽をしようとしたのがいけなかったのかもしれません。ここでアプローチの仕方を変えて、解決方法を試みる前に原因の根本を探ります。

Jetpack Plugin ――真の原因、そして解決

Jetpackについて

jetpack-by-wordpress

Jetpackはプラグインでも多機能プラグインと呼ばれるもので、統計情報からサイトのカスタマイズ、SNS関連の設定まで30以上の機能が1つのプラグインにパッケージ化されています。
これらの機能は1つずつ設定ができ、好きなものだけ使用することができます。

改めてPageSpeedInsightsの警告を見てみる

movile-alert-factor

除去すべきJavascriptとして表示されているのはdevicepx-jetpack.jsというものでした。
我々はこのスクリプトを知っています、いや、この名前とプラグインを知っています。
どうやら多機能プラグインのJetpackに関連するスクリプトの様です。
これがレンダリングをブロックしているみたいですが、先ほど試したようにプラグインでは何一つ効果がありません。恐るべしJetpack。

考えてみれば、プラグインで起きてる問題をプラグインで解決しようというのもおかしな話です。

Jetpackはプラグインなので無効化すれば良いのですが、それでは今までやってきたこととこの記事の意味が無いので、それは最終手段とします。

Jetpackで同じことが起きている人がいないかGoogleで探してみます。するとJetpackはこういうプラグインで便利ですといったページばかりが引っかかり、レンダリングブロックの元となっているという話は出てきません。
そこで思いました、もしかして”おま環”じゃないか……?

おま環とは……

お前だけの環境もしくはお前の環境だけの略で、他の人には起きてない不具合・問題がその人の場合(環境)でのみ起こっていることです。
実際、これはよくあることで技術的な問題が発生した場合は起きた環境も明記することが不具合報告(クラッシュレポート)では普通です。

――閑話休題

おま環だとこの記事はここで終了してしまうので、もう少し探してみます。WordPressは世界的に利用されているのでもしかしたらJetpackの同じ問題が起きている人が世界のどこかにいるかもしれません。

devicepx-jetpackを完全一致で検索してみました。するとWordPressのフォーラムで「Jetpack by WordPress.com[resolved] Unnecessary Java Script Call 」というスレッドがヒット。

そこではスレッド主が自分と似たようなことを発言していました。同様にスピードテストをしていて見つけたようです。

device-px-question

その後、スレッドになんと作者が降臨。そのスクリプトがある理由と解決するためのコードを教えてくれました。

plugin-author

・なぜdevicepx-jetpack.jsがあるのか――

それは高解像度用端末の為のオプションで、高解像度に対応していることが知られているGravatar(ブログやコメントを投稿する際に表示されるアバター画像サービス。Jetpackからも利用可能)などの機能で使用されるようです。

WordPress › Support » [Plugin: Jetpack by WordPress.com] Unnecessary Java Script Call

謎が解決しました。Gravatorは利用していないので、Jetpackプラグイン作者が添えてくれたコードを記述してみます。以下のコードをWordPressテーマ内のfunction.phpに追記します。

function dequeue_devicepx() {
wp_dequeue_script( 'devicepx' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_devicepx', 20 );

何度目かのPageSpeed Insights

pagespeed_clear

長い戦いが終わったのです。警告は表示されなくなり、とりあえず目標とされている85点も越えました。
おま環では無かったのです。そして、同じような問題が起きた人のために、その歴史をここに記します。

大変、長くなりました。ここまで読んで頂きありがとうございます。
JetPackを利用している人は一度、Google PageSpeed Insightsで自分のサイトを測定してみるといいかもしれません。

PageSpeed Insights

sponsored link

コメント

  • devicepx-jetpack.js
    はページの表示速度に悪影響をあたえるだけでなくgoogleから『ブロックされたリソース』を含むページとして判断されます。
    それはなぜか?

    devicepx-jetpack.jsの設置場所がページのローカルではなく外部のhttp://stats.wp.comに設置されており、そのディレクトリに配置されたrobots.txtが配置場所のクロールを禁止しているからgoogleのクローラはそのページを『崩れた不完全なページ』として判断してしまうのです。

    つまり、wordpress開発側はこういったgoogleのアルゴリズムを理解しておらず、robots.txtで検索エンジンからのクロールをブロックすべきではないディレクトリをブロックしています。
    ついでにいえば、ほとんどのweb屋もこれを理解していません。(こちらからこの話を切り出すとバカにしてくるくらい何も知らない)

    最近になってgoogleウェブマスターツールでそれを確認できるようになったのでこれからはどんどん周知されていく可能性はありますね。

    by おまえら €2015-06-27 03:28

down

コメントする




カテゴリー

2016年12月
« 11月    
 123
45678910
11121314151617
18192021222324
25262728293031


sponsored link