肉球 (@nikuq299com) です。

Google検索エンジンの スピードアップデート に対応するため、モバイルサイトの高速化対応を行います。

先日のテストでは散々だったので、しっかり見直しを行わなければ。

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

2018年7月22日

はじめに

PageSpeed Insights から受けた指摘は下記のとおりです。

PageSpeed Insightsの提案内容

指摘事項	PC版	モバイル版
画像の最適化	14ファイルが対象	1点のファイルが対象
ブラウザキャッシュ活用	77ファイルが対象	57点のファイルが対象
送信時圧縮の有効化	5ファイルが対象
レンダリングをブロックするJavascriptの除去	2ファイルが対象	2ファイルが対象
CSS配信の最適化	16ファイルが対象	16ファイルが対象
HTMLコードの縮小	3ファイルが対象
サーバ応答時間短縮	ー	ー
CSS縮小	6ファイルが対象
Javascriptファイル縮小	6ファイルが対象

ひとつひとつ対応すると手がまわらないので、まずは、効果が出そうなところをざっと対応して、それから細かい対応をしていきます。

スピードアップデート 対応の具体的な作業

まずは一番簡単に実施できる下記2点から対応てみました。

• トップページタイトル下の画像を削除する
• 一部処理結果をサーバ側でキャッシュさせる

詳細は下記のとおりです。

トップページタイトル下の画像を削除する

具体的にはココを削除しました。

モバイルサイト、PCサイトともにトップページに出しているMacbookの画像を削除しました。

また、削除した画像の下に、SOTRKの機能であるスライダーによるピックアップ記事表示をしていたのですが、こちらも削除しました。

これがモバイル版のトップページの新旧を並べてみました。

修正前

 

修正後

 

続いてPCサイトも同じ対応をしました。

修正前

修正後

一部処理結果をサーバ側でキャッシュさせる

こちらはWP Fastest Cacheというプラグインを使って対応しました。

WP Fastest Cahceは、一部機能制限がありますが、無料で利用できます。

WP Fastest Cacheで設定した内容を以下に記載します。

プラグインのWP Fastest Cacheを選択後、設定タブの中から、必要な機能にチェックを入れてください。

私は無料で利用できる機能は、全てチェックを入れました。

続いて、キャッシュの有効期限タブを開き、キャッシュの更新間隔を設定します。

私は全てのキャッシュを30分に１回更新する設定にしました。

対応の結果

作業結果を検証したところ、自分でも驚きの効果が出ました。

対応前

対応後

修正前

修正後

まとめ

今回対応したサイトの軽量化は、じっくり取り組むだけの時間を確保できなかったため、画像の削除、テーマ設定変更、プラグインの導入のみでしたが、かなり大きな効果を得ることができました。

実際の作業は1時間もかかっていないので、これだけの結果が出るのは費用対効果抜群です。

モバイル版はあと2点で目標の90点を達成できるのですが、残りの課題はアフィリエイトのCSS、Javascriptなので、修正を行うことができませんので、モバイル版はいったん完了とします。

PC版は今回対応後も70点と、まだまだ改善が必要な状態なのですが、Googleの提案を見ても、ぱっと思いつく対策が見つからないので、PC版の表示速度改善は少し骨が折れそうです。

今使っているSTORKは、キレイなサイトを簡単に作れるのですが、個人でカスタマイズできるところが少なく、更に表示速度があまり早くないという評価が多いので、これを機にテーマ変更も視野に入れて対応していきたいと思います。

個人的には、Wing (Affinger5) というテーマが色々カスタマイズできそうで、気になっています。

PC版は根本的に表示速度が遅いので、抜本的な対応も含めて検討します。

みなさんも興味がれば、ぜひ対応してみてください。

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

投稿 スピードアップデート 対応でモバイルサイトを高速化対応してみた は 肉球ログ に最初に表示されました。

肉球 (@nikuq299com) です。

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

『グーグル「スピードアップデート」ついに開始！ モバイル表示速度が検索ランキング要因に【SEO記事12本まとめ】』https://t.co/ktraBPbzH0

— Kenichi Suzuki鈴木謙一 (@suzukik) July 16, 2018

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

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

はじめに

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

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

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

現時点の評価

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

PCサイト

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

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

モバイルサイト

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

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

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

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

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サイトを修正すればモバイルサイトも効果が出る)。

まとめ

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

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

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

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

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

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

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

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

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

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

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

2018年7月25日

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

投稿 スピードアップデート 対応に伴うサイト構成見直し は 肉球ログ に最初に表示されました。