【SEO】Google PageSpeed Insightsの助言通りに対策しただけで1時間後にはスコアが40→78に改善した話

Pocket

いつも多くの方に本サイトを閲覧していただき感謝申し上げます。

でも正直言ってこのサイト・・・表示までが遅いでしょう? 私も薄々思っていたのですが、後手に回って放置していました。
しかし最近PageSpeed Insightsのメニュに「速度(試験運用版)」が追加されていたので気になったので測定してみると、建築グラビアは表示までが遅すぎるという現実を数字で叩きつけられて本気で焦りました。
ということですぐに対処したところ、1時間後には倍スコアにまでもっていけたので記録もふまえて紹介。

PageSpeed Insights – Google

やってみよう

このサイトのすごいところはプロファイリング機能がある点。
具体的にどのファイルが・何秒かかっているから遅い。と教えてくれる点です。
つまり超単純に言ってしまえば指摘されたファイルを参照しないように設定変更を繰り返せば最短で高速化出来ます。
まあ必要なファイルもありますからそうは行きませんが。

1.Google Mapsを削除

特に指摘されていませんが、Page(単体ページ)のGoogleMapsを削除してみました。
→特に変わらず。外す意味なかった?

2.トップのカルーセルを削除

指摘されたのがカルーセル(記事が5秒毎に自動でアニメーションしてスライドする機能。)が参照するJavaScriptファイルが最も遅いそうです。

【対策】なくてもいいか! と思ったのでここは思い切ってストップしてみました。速くしなきゃお客様が逃げるだけです。
【成果】体感速度で少し改善。

3.サイトの圧縮

お次。「サイトをgzipしてください」って出ました。
「は?」って思ったんですが、なぜか私のサイトgzipしていなかった。サイト引っ越しのときに設定し忘れしたと思われます。最悪。
この機能は通信するファイルサイズを抑えるもので、速度に対して直接的に効きます。サイトによっては数倍UPします。
確かに確認するサイトでチェックしたら非圧縮だった。ええ。

参考:
GIDZipTest – GIDNetwork
[.htaccess]gzip圧縮を使ってWordPressの表示速度を改善する方法 – pixeliste

【対策】gzip対応。
.htaccessファイルに以下を追記します。

SetOutputFilter DEFLATE
#not compress
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
#compress
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype

参考:https://www.seo-pro.jp/seo/psi-gzip

【成果】体感速度は殆ど変わらないが、スコアが50台へ。

4.不要なソーシャルボタンを消す

私のサイトは記事の上下にソーシャル共有ボタン(TwitterとかFacebook、Hanetaのボタン。)があるのですが、実は上下で別のプラグインが表示していました。
 ・上はWPSocialBookmarkプラグイン。
 ・下はJetPackプラグインの共有設定。
で、JetPackプラグインが生成する方のTumblr共有ボタンが参照するJavaScriptファイルが遅いとのこと。

【対策】JetPackの共有は全部削除。WPSocialBookmarkはFacebook Twitter以外を削除。
【成果】体感速度が明らかに速くなった。スコアも60台へ。

5.テーマが呼ぶフォントを削除

私はOriaというテーマを利用しているのですが、テーマが呼んでいるawesome-fontと、webフォントのLatoとOswaldが呼ぶJavaScriptが遅いとのこと。このあたりのJSは芋づる式に呼んでいるっぽい。
先に結論を言ってしまうと、一部残しました。awesome-fontは私にとって必要で、一旦削除しましたが調査の結果200msec遅くなるだけなので妥協して残しました。

【対策】LatoとOswaldフォントを停止。
【影響】メニューのフォントがしょぼくなりましたが全然許容範囲。
【成果】体感速度さらに改善した。このあたりからコンテンツの主役である文書表示が一瞬になりました。

6.画像ファイルの最適化

あとすぐに対処できそうなのは「画像を最新の形式にせよ」、「画像の解像度を適切にせよ」という内容。
こんだけコンテンツが増えた今では自力対処は不可能なので、プラグインに頼ります。

参考:
rel=”preload” によるコンテンツの先読み – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

【対策】Autoptimizeプラグインを入れる。
設定はUIが親切なので簡単です。
基本的には大項目のチェックボックスをONにしていけばOK。

画像の最適化は私は一部だけONにしました。
ちなみに遅延読み込みについては私はBW Lazy Loadの方が優秀な気がしているので、Autoptimize側のLazy Loadは無効にしました。

【成果】体感速度は少しよくなったかも?

7.トップページはウィジェットを非表示に

あとは500msec×3つていどですが、ウィジェットのおすすめ記事とかをランダム表示するプラグインが遅いとのことです。
ページデザイン上、トップページにウィジェットの存在意義が殆ど無いので、思い切って消しました。

参考:
Widget Logicでウィジェットの表示非表示の条件を設定する – 出不精の横好き
https://debuyoko.com/489

【対策】Widget Logicプラグインを使い、トップページには検索バーと自己紹介以外は非表示に設定変更。
【成果】トップページのスコアが10弱UP。

最終成果

ここまでで1時間しか経っていませんが、どうなりましたかね。
おおー! 40から78ですか。ほぼ2倍になった。
しかも明らかに別サイトになったくらいに表示速度UPしました。これはありがたい。感謝感謝。

参考サイト

雑記ブログ:FontAwesomeを軽量化する – Qrac blog
PageSpeed Insights – Google
rel=”preload” によるコンテンツの先読み – MDN Web Docs
GIDZipTest – GIDNetwork
[.htaccess]gzip圧縮を使ってWordPressの表示速度を改善する方法 – pixeliste
GIDZipTest – GIDNetwork
Widget Logicでウィジェットの表示非表示の条件を設定する – 出不精の横好き

カテゴリー: SEOタグ:

コメントを残す