PageSpeed InsightsとGTmetrixのスコア改善結果とSNS回り対策 KUSANAGI for ConoHaでPageSpeed InsightsとGTmetrixのスコアを改善してみる(その1)

この記事は約5分で読めます。

2017-03-22KUSANAGI for ConoHa

ConoHaイメージキャラクター美雲このは (C)GMO Internet, Inc. 再利用禁止
ConoHaイメージキャラクター美雲このは (C)GMO Internet, Inc. 再利用禁止

本記事は、KUSANAGI for ConoHa(1Gプラン)でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。
数回にわたり掲載予定。
色んなサイトを手本にしたためどこかに書いてあるようなことも多いです。
ただ私自身の失敗の記録を交えながら、その中にオリジナリティを出していこうと思います。

途中は画像吹っ飛ばしたり、クロールエラー引き起こして検索結果から私のサイトが消えてしまったり。
その果てに得た結果。
お読みいただけると嬉しいです。

スコア改善の結果

改善前(トップページにアドセンスなし)

具体的に採っている対策はこちらの記事を御参照ください

WEB担当者Forum版ページ速度分析ツール

KUSANAGI for ConoHaで1秒切り(0.777秒)の画像

0.777秒、フィーバーです。

PageSpeed Insight

モバイル70、パソコン82。
あまりいい数字とは言えません。
対策項目もずらずら並んでいます。

GTmetrix

PageSpeedがB(82%)、YSlowがC(70%)。
スコアもよくないのですが、速さも3.5秒とよくない。

改善後(PC版トップページにアドセンスを2枚設置)

WEB担当者Forum版ページ速度分析ツール

0.841秒。
数字が改善前より落ちているのはアドセンスを設置したためです。

PageSpeed Insight

モバイル95、パソコン96。
パソコンはアドセンスの画像圧縮が表示されるかされないかでぶれますが、大体95前後。
(アドセンスがかなり遅れて表示されているため、解析に間に合っていない?)
ブラウザキャッシュはアクセス解析とアドセンス。
ほぼ限界まで対策を講じたのではないかと思います。

GTmetrix

スコアAA!(100%、95%)、速度も1.7秒!

対策項目はYSlowのUse cookie-free domainsのみ。
これはあえて放置しています。

アドセンス積んでレイアウトも整えた上でのスコア。
満足しています。

チューニングにおける超高速WordPress仮想マシンKUSANAGIの利便性

PHPに詳しくない私でも何とか数字を出せたわけですが、これはやはりKUSANAGIあってです。

KUSANAGIのありがたいところはNginx回りのチューニングがほぼ済んでいること。
(触ったのはブラウザキャッシュの期限のみ)
しかも言語やキャッシュがワンタッチで切り替えられる。
本来なら自分で黒い画面と格闘しながら設定しないといけないところ。
あちこちのチューニング記事を読みながらぞっとしました。
かなり負担が軽くなったと思います。

「PageSpeed Insightのスコアが高い=高速」ではない

これは本連載の前提。
誤解している人が多そうなので記しておきます。
私自身も誤解していた一人でした。

実のところ、前回の時点で十分満足していました。
体感はWEB担当者Forum版ページ速度分析ツールの数字通りですので。

ただ気にはなる。
試しにテーマをLightningからLuxeritasに変更してみたところ、スコアは劇的に改善しました。
しかし同ツールの速度は落ちる(もちろん体感も)。
どうして?

ツイートで愚痴ったところ、何と反応が!

さらに本サイトを分析してくれる。

見るとボトルネックは明らかにFacebook。
ほか、程度は違うもののTwitterなども。
まさにおっしゃる通りでした。

SNS回りの対策をとる

こちらが推薦された記事。

これを読んで、

  • フェイスブックコメント&google+コメントを外す
  • Twitterタイムラインウィジェットを外す
  • 公式フォローボタンをcssで自作したものに置き換える

など思いつく対策をとってみたところ、スコアを維持しながら速度も改善しました。

フェイスブックコメントは、一時Disqusが動かなくなったとき、代わりにComments Evolved for WordPressを入れたため。
せっかく機能がついてるんだしフェイスブックも入れておこうみたいな感じでした。
「いいね!」は残したままで速度アップしましたから、恐らくこれが最大の元凶です。
Google+はついでなので削除しました。

Twitterタイムラインウィジェットは、以前に他の作者の小説宣伝にもなると思って入れていたもの。
もちろん見返りは自作品の宣伝。
しかし現在「馴れ合い」とみられる行為は避けており、外してもいいと判断しました。

フォローボタン自作については、こちらの記事を御参照ください。
公式からの交換であれば目に見えて軽くできます。

まとめ

本記事のタイトルが「高速化」ではなく「スコアを改善してみる」となっているのは、必ずしもスコアアップが速度そのもののアップではないという認識を踏まえて。
ただやっぱり欠点を洗い出すのにPageSpeed InsightとGTmetrixは効果的なページ。
体感を意識しながら上げることには意味があると思います。
本連載は、このことを前提に進めていきます。