小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約5分で読めます。

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

質問者の写真

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

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

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

スポンサーリンク
この記事を読む方へのオススメ

スコア改善の結果

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

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

WordPress 0.777秒! ~KUSANAGI超素人セッティング
この記事の続きです。 アイキャッチの画像はKUSANAGIのイメージキャラクター草薙沙耶 ©PRIME STRATEGY 計測してみた結果 k...

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

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

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

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

スポンサーリンク

SNS回りの対策をとる

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

HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします!ーWebパフォーマンス改善企画(改善編)
Webパフォーマンス改善企画(改善編)は、実際の改善内容とその結果をお伝えします!パフォーマンス分析を行った解析編は、こちらからご覧ください。本記事はHTML5 Experts.jpがいかにして速くな

これを読んで、

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

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

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

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

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

CSSでTwitterとFeedlyの公式っぽいSNSフォローボタンを自作する
本記事では、TwitterとFeedlyの公式っぽいフォローボタンをCSSで自作する方法を紹介します。 作成した理由は、言わずと知れたWordPressの高速...
スポンサーリンク

まとめ

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

解答者の写真
本連載は、このことを前提に進めていきます
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました