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

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

どうもこんばんは。

肉球 (@nikuq299com) です。

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

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

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

2018.07.22

 

はじめに

ポイント1

効果の高そうなところから手を付けよう!

 

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

PageSpeed Insightsの提案内容

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

 

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

 

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

ポイント2

データ送信量を減らす!キャッシュを使う!!

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

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

 

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

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

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

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

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

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

 

修正前

モバイルサイトのトップページから背景画像とスライダーを削除する

 

修正後

モバイルサイトのトップページから背景画像とスライダーを削除した後

 

 

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

 

修正前

PCサイトのトップページから背景画像とスライダーを削除する

修正後

 

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

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

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

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

 

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

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

 

設定タブで必要な機能を選択する。

 

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

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

 

キャッシュの有効期限タブでキャッシュの更新間隔を設定する。

 

対応の結果

ポイント3

簡単な作業ですが、効果は絶大です!

 

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

 

対応前

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

対応後

高速化対応の効果は抜群でした。

 

修正前

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

修正後

高速化対応の効果は抜群でした。

 

まとめ

まとめ

短い作業時間でも、それなりに早くなった!

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

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

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

 

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

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

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

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

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

 

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

 

コメントを残す