PR

初心者がもう一度、サイト高速化に挑戦してみました。少しスコアが上がりました。

ブログ作成
記事内に広告が含まれています。

過去にこのような記事内容で高速化に挑戦して、一度、ページスピードのスコアを上げました。

初心者がサイト高速化に挑戦してみた(テーマcocoonの場合)
はじめに 以前、Googleの提供する表示スピードを判定するサイトにて、当サイトを計測したところ、下記のような悲惨なスコアを叩き出してしまいました(モバイル版でのスコアです。PCはもう少しマシでした)。 しかし、最終的に簡単な処理を施しただ

ただし、このときのサーバはロリポップのスタンダードプランを使っていたので、サーバのソフトはApacheで動いていました。
現在はロリポップのハイスピードプランに乗り換えたので、今のサーバソフトはLitespeedです。

ちなみにGoogle PageSpeed Insightsで姉妹サイトを計測したところ、これくらいのスコアでした。
モバイルのスコアですが、物足りない数字です。

スコア1

とはいえ、ハイスピードプラン(Litespeed)に変えたので、前と同じ手は使えません。

そこで、Litespeedのサーバでも高速化できる手段をあちこちで探し、初心者でもできそうな手段をいくつか試してみました。
最終的にはこれくらいまで上昇させることができました。

スコア02

以下に試したことを記しますので、参考にしてみてください。

その1.プラグイン「Autoptimize」を使う

スコアを計測したことがある方は、以下のような画面を見たことがあると思います。

リソースの除外

スコアを下げる原因の大きなものとして、上記の「レンダリングを妨げるリソースの除外」と「使用していないCSSの削減」という項目があります。
さらには画面下に「第三者コードの影響を抑えてください」という記述があり、2,200ミリ秒間もブロックされていることがわかります。
これらを最適化するプラグインが「Autoptimize」です。

autoptimize画面

WordPressの公式サイトから、このプラグインを検索し、インストールして実行してください。

autoptimize設定

設定画面を開くと上記のような画面が出るかと思います。
以下のチェックボックス3つに印を入れてください。

java最適化

CSSオプション

この3つにチェックを入れたら、先程の画面の「追加」タブを開けてください。

autoptimize設定追加

下のほうに「サードパーティのドメインに事前接続(上級者向け)という欄があります。
ここに遅延する原因を作っていた第三者コードをカンマ区切りで入力します。

第三者コードコピー

第三者コードは上記のようにコピーできます。
それぞれをコピーし、先程の欄に貼り付けてください。

ひとつコピーをしたら「,」(カンマ)を入れて区切るのをお忘れなく。
ここまでできたら、「変更を保存」してください。

一度、測定してみると、スコアが少し上がりました。

スコア03

まだ物足りませんが、10以上上がっています。

第三者コード02

第三者コードについても、2,200ミリ秒のブロックだったのが、870ミリ秒に減少しています。
とはいえ、これくらいのスコアでは満足できなかったので、もうひとつのプラグインを導入しました。

その2.プラグイン「Flying Scripts by WP Speed Matters」を使う

次に導入したプラグインが「Flying Script By WP Speed Matters」です。
これは以下の「使用していないJavaScriptの削減」に役立つプラグインです。

削除まではしないのですが、この使用していない部分を読み飛ばしてくれるのです。

javaScriptの削減

FlyingScript

このプラグインを公式サイトから検索してインストールしてください。
開くと「Setting」というところがあるので、そこをクリック。

すると、このような画面が開くので、一番上の「include Keyword」というボックスの中に、先程あった削減すべきと指摘のあったjavaScript名をクリックして貼り付けていきます。

こちらはカンマを必要としていません。
すべてコピペできたら、「Save Changes」をクリックして保存してください。

ここまでやってみて、もう一度、スコアを測ってみました。

スコア04

あれ? 落ちてる? 効果なし?
一部サイトではこれだけで劇的に数字が上がったという記事もあったのですが、残念ながら、私のサイトには合わなかったようです。
そこで、あきらめかけていたのですが、少し気になるところを見つけました。

その3.Google AdSense広告をファーストビューからはずす

私のサイトでは、以下のように最初の画面に大きなアドセンス広告が掲載されていました。

サイトトップ画面

タイトル下とサイドバーのトップに掲載されている形となっています。
ファーストビューに大きく表示されるので、収益につながるかと思ってそのまま放置していたのですが……

しかし、ここまで作業をしてみて気づいたのですが、速度を下げる要因として出てくるファイル名はほとんどが、Google に関するものでした。
私はブログテーマに「cocoon」という無料テーマを使用しているのですが、公式サイトにも第三者コードによるスコアダウンはどうしようもないと書かれていました。

この大きなアドセンス広告をはずしたらどうなるだろう?
そんなことを思いつきました。
一度試してみようと思い、「cocoon設定」から「広告」タブを開き、以下の画面から「タイトル上」と「サイドバートップ」のチェックをはずしました。

これによって、ブログを開いた際、ファーストビューから広告が消えます。

これが大当たりでした。
結果は以下のとおりです(上がモバイル、下がPCのスコアです)。

一応、満足が行くレベルまで高速化ができたと思います。

仮説・アドセンス広告だけをはずした場合はどうか?

アドセンス広告を消したことで大幅に数字が上がったことから、特にプラグインなどを使わず、アドセンス広告をファーストビューから消しただけで、どの程度効果があるのか試してみました。
別の姉妹サイトで試した結果は以下のとおりです。

<実験前のスコア>

スコア05

<実験後のスコア>

実験結果を見る限り、ファーストビューからアドセンス広告をはずすだけで、かなり効果があるようです。
この方法が一番簡単なので、スコアが伸びずに悩んでおられる方は、まず最初に試されてはいかがでしょうか?
私の場合、アドセンス広告をファーストビューから広告をはずしたからといって、その後、特に収益は落ちていません。

結論・アドセンス広告の影響が一番大きかった。

いろいろ試してみましたが、最終的にはアドセンス広告による影響が一番大きかったようです。

しかし、他の手法も間違っているとか、意味がないわけではないと思います。
もしかしたら、前提の処置があったから、さらに効果が上がっただけかもしれません。

サイトによっては有効かと思いますので、同じように悩んでおられる方はいろいろ組み合わせて試されてはいかがでしょうか?
この実験結果が、どなたかのお役に立てれば幸いです。

コメント