PageSpeed Insights(旧版)とGTmetrixのスコアを改善してみる(その1)~スコア改善結果とSNS回り対策 

本記事は、KUSANAGI for ConoHa(1Gプラン)でPageSpeed InsightsとGTmetrixのスコア改善を図った過程です。
PageSpeed Insightsは旧版のものですが、対策そのものは参考になると思います。

 

画像吹っ飛ばしたり……
クロールエラー引き起こして検索結果から私のサイトが消えてしまったり……
本当に辛かったよ……

 

その果てに得た結果。
お読みいただけると嬉しいです。

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

天満川鈴 WRITTEN BY 天満川鈴

スコア改善の結果

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

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

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に変更してみたところ、スコアは劇的に改善しました。
しかし同ツールの速度は落ちる(もちろん体感も)。
どうして?

https://twitter.com/rin_tenmagawa/status/807024921171738624

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

https://twitter.com/takehora/status/807078597244506112

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

https://twitter.com/takehora/status/807208240391929856

https://twitter.com/takehora/status/807208381156995072

https://twitter.com/takehora/status/807208897433911300

https://twitter.com/takehora/status/807209202355564544

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

SNS回りの対策をとる

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

これを読んで、

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

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

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

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

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

まとめ

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

本連載は、このことを前提に進めていきます

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは?」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何?」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。

私がConoHaを使い続ける、嘘偽りない理由です。

公式サイトで詳細を見る
× 閉じる