どうもこんばんは。
肉球 (@nikuq299com) です。
Google検索エンジンの スピードアップデート に対応するため、モバイルサイトの高速化対応を行います。
先日のテストでは散々だったので、しっかり見直しを行わなければ。
はじめに
効果の高そうなところから手を付けよう！
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版は根本的に表示速度が遅いので、抜本的な対応も含めて検討します。
みなさんも興味がれば、ぜひ対応してみてください。
それでは。ごきげんよう。
コメントを残す