サイト改善 肉球

スピードアップデート 対応に伴うサイト構成見直し

スピードアップデート に対応する。

どうもこんばんは。

肉球 (@nikuq299com) です。

Googleのスピードアップデートがリリースされたみたいです。

WordPressのテーマにSTORKを使ってから、サイト速度がどんどん遅くなっていたようですが、これまで見て見ぬふりをしていました。

これを機会に、サイト構成の見直しをして、当サイトを標準的なスピードまで改善できるよう対策を打ってみようと思います。

 

はじめに

ポイント1

我がサイトはPC版の表示速度が思っていたより遅かった！

過去に肉球ログのサイト表示速度をGoogleの PageSpeed Insights で計測したことがあるのですが、PC版、モバイル版共に100点中70点台と、遅かったことを覚えています。

そこで今回、 スピードアップデート の対応を行うにあたり、改めて我がサイトの表示速度を確認してみました。

 

スピードアップデート に対応するための準備

ポイント2

まずは現状把握を行った上で対策を考えよう！

現時点の評価

まず、現時点の評価を改めて PageSpeed Insights で確認したところ、下記の通りでした。

 

PCサイト

100点中55点という散々な結果でした(ﾉД`)ｼｸｼｸ

元々70点台だったはずなのですが、ここまで評価が落ちた原因は、恐らくトップページに設置した記事スライダー表示が原因と思われます。

PCサイトは前回計測結果よりだいぶ遅くなっています。

 

モバイルサイト

モバイルサイトは前回測定結果とほぼ変わらず、72点でした。

前回計測時と異なる要素は、Adsenseの広告を2点追加しただけなので、予想通りです。

 

モバイルサイトは前回計測とあまり変わらない結果となりました。

 

具体的なスピードアップデート対策

PageSpeed Insights は、サイト表示速度の評価と合わせて、問題点を最適化するための提案をしてくれます。

Google はサイト表示速度向上のために提案をしてくれる。

 

Google から提示された最適化の提案は下記のとおりです。

PCサイト

  • 指定の画像１４点を最適化 (軽量化) する
  • ７７点のJavascript、CSS、画像についてブラウザのキャッシュを活用する
  • ５点のファイルについて、送信時の圧縮を有効にする
  • ２点のレンダリングをブロックするJavascriptを除去する
  • １６点のCSS配信を最適化する
  • ３点のHTMLコードを縮小する
  • サーバの応答時間を短縮する
  • ６点のCSSを縮小する
  • ６点のJavascriptファイルを縮小する

 

詳細はセキュリティ上、公開してよいか判断がつかなかったため、対策案と、それ伴う修正ファイル数のみを表示しています。

全部で115点とは、なかなかのボリュームではありませんか (；´Д｀)

まだWordPressの構成を把握しきれていませんが、いきなり全部対応しようとすると、なかなか大変そうな作業になるかもしれないので、優先順位をつけて効果の高いところから修正したほうが良さそうですね。

 

モバイルサイト

  • 2点のレンダリングをブロックするJavascriptを除去する
  • 16点のCSS配信を最適化する ← PC版に包括される内容
  • サーバの応答時間を短縮する
  • 57点のJavascript、CSS、画像についてブラウザのキャッシュを活用する ← PC版に包括される内容
  • 1点の画像を最適化 (軽量化) する ← PC版に包括される内容

 

STORKはレスポンシブウェブデザインでスマホサイトを作っているはずなので、モバイルサイトの指摘は全てPCサイトの指摘に包括されるものでした (PCサイトを修正すればモバイルサイトも効果が出る)。

 

まとめ

まとめ

目標はPC版、モバイル版共に80点を目指す！

Googleからの提案事項は下記2店です。

  • ハードウェアを強化して応答速度を向上させる
  • ソフトウェア処理を見直して応答速度を向上させる

 

ハードウェアの強化は個人では不可能なため、今回の修正対象から除外します (現時点でも、ハードの充実度が最強と名高いXServerを使っています)。

ということで、修正対象はソフトウェアに関する内容に絞れます。

調査結果を見る限り、PC版の修正を行えば、モバイル版にも効果があるので、PC版の修正を主として対応を進めるほうが良さそうなことが分かりました。

わかってはいたのですが、ここまで修正対象が多いと、それなりに時間を書けないと問題の解決ができなそうです。

まずは、テーマの設定変更を行った上で再度検証を行ってみようと考えています。

多分、PC版はタイトルの画像とタイトル下に設置した記事紹介のスライダーを削除すれば、ある程度改善できるはず。

ただ、設定変更だけで目標値の達成は不可能だと思われるので、そこからはGoogleの各提案事項に優先順位をつけて効果が高そうなところから改善してみようと思います。

 

2018/7/24 具体的な対応内容を記事にしました。

スピードアップデート に対応する

スピードアップデート 対応でモバイルサイトを高速化対応してみた

2018年7月25日

 

それでは。ごきげんよう。

コメントを残す

RECOMMENDこちらの記事も人気です。