Kindle本ポイント還元キャンペーン5月31日まで!
最大で25%、3000ポイントまで還元!

ワードプレス初心者が、最低限の作業でサイトのPageSpeed Insightsのスコアを大きく改善する方法

サイトのPageSpeed Insightsのスコアが低い

PageSpeed Insightsとは、名前から想像が付く通り、ページの応答速度を測定するツールだ。

参考 PageSpeed InsightsPageSpeed Insights

簡単に言えば、PageSpeed Insightsでチェックして点数が低いサイトは、表示に時間が掛かっている。そして、PageSpeed InsightsはGoogleが提供するツールなので、詳細は公開されていないが、余りにそのスコアが低い場合には、検索結果に対する掲載順位に何らかの悪影響を及ぼすことが推測される。

筆者はワードプレスの初心者ということもあり、取りあえず有料テーマの“SANGO”を使っているから問題ないだろうと、表示速度について深く考えたことが無かった。(少なくとも自分で見る分には遅いと感じなかったため)

しかし、気まぐれでPageSpeed Insightsで当サイトをチェックしてみたところ、モバイルが15点、デスクトップが30点という、余りにも酷い結果が表示されて愕然とした。

そこから延々と設定をこねくり回した結果、モバイルが75~80点、デスクトップが90~95点にまで改善した。(時間帯や配信されている広告によって点数は上下する)

ただし、WordPressの知識など何一つ持っていない状態だったので、効果のありそうなプラグインを入れたり、function.phpに効果のありそうな記述を書きこみまくったので、どれが効いているのか分からない状態に陥った。

そこで、追加した内容を一旦整理した結果、重複した機能を最小限まで削ったうえで、上記の点数を維持できるようにしたので、備忘録を兼ねてこの記事を作成した。

従って、記事のタイトルは“初心者が最低限の作業”としている。

サーバーを再契約

このサイトのサーバーは、さくらインターネットを利用している。

利用している理由は大したことでは無く、かなりの放置期間があったものの、10数年以上前からレンタルし続けている。このサイトを作る際に再利用しただけだ。

さくらインターネット, wordpress

にて検索すると、サジェストに“遅い”と表示されることから察するに、さくらインターネットのサーバーそこまで性能が良くない。正確には、以下の公式サイト情報によると、2018年3月までの契約者が使っているサーバーは遅い。

参考 遅いからって引っ越しする前にちょっと待って!さくらのレンタルサーバで快適にWordPressを動かす方法 | さくらのホームページ教室さくらのホームページ教室

>PHPを高速に実行できるモジュールモードの提供を2018年4月より行っています

そして、2018年4月以降に契約した人は早いが、新旧のサーバー間の移動サービスは提供されておらず、旧サーバーを使っている人はどうやっても、高速実行モードの恩恵を得ることが出来ないと公式サイトに書いてある。

恩恵を得るには再度契約し直すように書かれているが、そんな面倒なことをするなら、いっそ別会社のサーバーに移動しようと考えた。しかし、運用済みのワードプレスの引っ越しは、初心者には非常に難易度が高い。幸いにも、さくらインターネットから、さくらインターネットへの引っ越しはツールが用意されており、数ステップで簡単にできるので、致し方なく再契約してモジュールモードを使えるようにした。

これにて、モバイルが30点、デスクトップが45点ぐらいまで改善した。元の点数と比べれば大きな改善だが、サーバーの移転だけではどちらも点数が低い。

3つのプラグインを設定

サーバーの次は、以下のプラグインを設定することで、モバイルが70点、デスクトップが80点ぐらいまで改善した。

EWWW Image Optimizer

画像を圧縮して自動でリサイズをしてくれるうえに、 画像が表示領域に入った時にだけに読み込む設定(LazyLoad)が出来る。また、Googleが開発した画像フォーマットWebPへ変換し、対応しているブラウザで見た際に自動で差し替えてくれる。

筆者の場合は、有名な画像圧縮サイト“TinyPNG”で圧縮後に、メディアライブラリに放り込んで、“EWWW Image Optimizer”でリサイズしている。

参考 TinyPNG – Compress WebP, PNG and JPEG images intelligentlyTinyPNG

このプラグインがというよりも、無駄に大きい画像を張り付けていると、それらの読み込みに時間が掛かっている。

従って、画像の圧縮&リサイズが点数の改善に一番効果があった。

なお、このサイトで利用している画像は、殆どゲーム機からTwitterにアップロードしたものである。Twitterにアップロードした時点で画像は圧縮されているので、そこから保存した画像なら大丈夫だろうと考えていた、どうやら違ったようだ。

筆者が使っているテーマ“SANGO”には、カスタマイズの高速化という項目に、画像の遅延読み込みの設定項目がある。ただし、EWWW Image Optimizerには、遅延読み込みの除外設定を出来る機能があり、その機能を使いたいのでこちらで設定している。

Flying Scripts by WP Speed Matters

JavaScriptの実行を、サイト閲覧者が操作するまで、又は指定の時間だけ遅延読み込みさせるプラグイン。こちらも効果が大きかった。

当サイトであれば、閲覧時に何らかの操作を開始すると、Googleの自動広告が挿入される。操作せずとも4秒放置すれば同じく挿入される。広告を細かく設定することは面倒なので自動広告に頼っており、何処に広告が表示されるかはGoogleの自動最適化の結果次第だが、遅れて表示されるのはこのプラグインの効果だ。

設定方法としては、PageSpeed Insightsの解析結果に表れる、“レンダリングを妨げるリソースの除外”の項目に出て来るURLを、Include Keywordsという欄に入れていくだけ。1行につき1つ、URLの一部だけ入れれば良い。サイトによって入力すべき内容は異なってくる。

TimeOutは放置した時に読み込みを開始する時間。4秒という設定に根拠は無いが、流石にそれ以上ファーストビューで留まることは無いという経験から設定。

スコアの改善を始めた当初は、この手の遅延読み込み対策を子テーマのfunction.phpに記述していた。“プラグインを入れずに対応する方が良い”という情報をどこかで見たので、あれこれと調べて手動で記述していたが、筆者のような初心者はプラグインを入れた方が無難であるという結論に至った。

手動で記述していた場合、何らかの技術仕様に変更があったり、より有益な記述方法が見つかる度に書き換えが必要になってくる。【○○年度最新版】などとタイトルに書かれた情報サイトを巡るような手間も取りたくないし、プラグインであれば更新を待つだけで対応できるため、その手の分野に精通していない限りメリット大きい。万が一、テーマを変えた場合にも、function.phpを書き換える必要も無くて楽だ。

従って当サイトでは、function.phpに対して、PageSpeed Insightsのスコアアップに関係する記述を行うことは止めた。

WP Fastest Cache

2回目に訪問した際にキャッシュがあれば表示が早くなるというアレ。とりあえず入れて初期設定で使っている。

直接点数に関係は無かったが、キャッシュを利用しろという提案の対策にはなった。

Autoptimize

JavaScript、CSS、HTMLを最適化してくれるプラグイン。

PageSpeed Insightsのスコア改善で検索すると、このプラグインが進められていることが多い。当サイトも最初はこのプラグインを入れていた。しかし、改善効果を切り分けて調べた結果、このプラグインを無効化しても誤差程度の点数しか変わらなかった。何度か有効化・無効化を繰り返して比較したが、動くのは3点ぐらいで、逆に点数が下がることもあった。入れておいた方がマシかもしれないが、プラグインにコードを弄られて他に悪影響もありそうなので停止している。

なお、当サイトで利用しているテーマ“SANGO”には、カスタマイズの高速化に、CSSの圧縮の設定項目がある。少なくとも、“SANGO”であれば、AutoptimizeでCSS設定をする恩恵は無さそうである。

使っているテーマによっては効果があるはずなので、有効化・無効化を切り替えて自身でスコアを比較する必要がある。

Font Awesomeとアドセンスのスクリプトの対策

Font Awesomeをローカルで読み込み

ちょっとしたアイコンを表示できるFont Awesomeは便利だが、読み込みに時間が掛かる。そのため、ローカルで読み込めば早いという当たり前の話。

Font Awesome 軽量化
Font Awesome ローカル

とかで検索すれば、やり方が出て来るのでセッティングするだけ。

この手の情報は、各サイトが競い合うように記事を更新しているので、検索して出て来る最新情報を見た方が良い。

アドセンスの1行目を削除

アドセンスの以下の1行目は、head内に1個あれば十分らしいので全部削除した。理由は専門的なサイトを閲覧して確認して欲しい。

<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

 

以上の二つの設定で、さらに改善して、前述の通りのモバイルが75~80点、デスクトップが90~95点になった。

Cumulative Layout Shift (CLS)の改善

点数が改善して満足したのも束の間、ウェブに関する主な指標の評価は“不合格”になっている。

良く見ると、Cumulative Layout Shift (CLS)という項目が不合格になっていた。この項目は、視覚的な安定性を示す指標らしく、ページ内でレイアウトのずれが大きいと不合格になるようだ。

どこのレイアウトがずれているかは、ブラウザ“Chrom”のデベロッパーツール(Ctrl+Shift+I)にて、Layout Shift Regionsにチェックを入れて、F5を押せば確認できる。レイアウトがずれている部分があれば青色にハイライトされるのだが、見事にサイトの一番上から全部ずれていることが分かった。

これは画像のLazyLoadが影響を与えており、サイトのタイトルロゴの画像が遅延読み込みされることが原因だった。“EWWW Image Optimizer”の除外設定で、タイトルロゴのURLを入れることで解決した。

それと、新着記事一覧のデザインをカスタマイズしていたが、カード表示されている画像のwidthとheightが設定されていないことが問題だった。SANGOのデフォルトの設定に戻すことでクリアとなった。

 

PageSpeed Insightsで100点を取ること自体は、自己満足でしか無く、警告をクリア出来ればSEO的な悪影響は無いようである。従って、ワードプレスの初心者であれば、これぐらいの設定で、サクっと改善するだけで十分だろう。

Amazonで購入前に、残高チャージするだけで2.5%もオトクに!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)