こんにちは。
本日のブログの内容は、先日ウェブサイトの高速化セミナーに参加してお勉強してきましたので、アウトプットがてらブログで皆様にシェアさせていただこうかと思います。
余談は抜きにして、さっそく
スポンサーリンク
サイトの表示速度はユーザーさん満足のために最重要要素
ウェブの中でビジネスをしている企業の大半がここに力を入れています。
皆様がご存知のGoogle様やアマゾンも同じことを言っています。
表示速度＝ユーザーさんにストレスを与えない
と、考えていてかそれぞれ自分達のビジネスにどう言った影響が出てくるかというと、、、
アマゾン
サイト表示が０、１秒遅くなると売り上げが１％減少し、１びょう高速化すると１０％の売り上げが向上する。
グーグル様
表示速度が０、５秒遅くなると検索数が２０％減少する。
マイナビ
３秒過ぎると５７％のユーザー数が痺れを切らして訪問を諦める。
と、言われています。
それくらいサイトの表示速度は『最終的な売り上げや集客』に関係し、ウェブの中では必須な項目になってきます。
僕もユーザーさんの立場だったら、、、表示に時間がかかるサイトはイヤですね。
表示速度はユーザー行動にどう影響するか？
上記の写真をみてもらうとわかると思いますが、１秒違うだけで離脱率が変わります。
（えっ！？たった１秒！？）
そう思わないでください。
１秒の違いが勝負の分かれ道になります。
では、優良なサイトの秒数の基準はというと『３秒以内』と言われています。
ちなみにこちらの写真をみてもわかると思いますが、たいていの業種のサイトは３秒すぎてる会社が多いんです。
つまり高速化にされていないサイト。
これは本当にもったいないことで、いくらコンテンツやデザインが良くても根本の表示速度が遅ければみてもらえないし、ユーザーさんも見る気にはならないので、グーグル様からすれば
表示速度が遅い＝評価しづらい、評価が低い
と、いうことになります。
何からするべきか？
現状のサイトを理解する、チェックする。
- PageSpeed Insights(無料、グーグル様が提供）
- GTmetrix
- Google search console
PageSpeed Insights(無料、グーグル様が提供）
表示速度のチェックツール。
０〜４９ 低速
５０〜８９ 中速
９０〜１００ 高速
モバイルとPCの評価が出ます。
更には、サイトの訂正する部分を細かくピックアπぷしてくれますのでオススメのツール。
グーグル様が提供するサービスなのでSEO対策にしても信頼度の高いツールになります。
GTmetrix
精密な分析が可能で上級者向け。
過去の分析結果が保存されている。
分析履歴同士で比較ができるサイト。
英語版の写真になっていますが、確か日本語でもできた気が、、、
Google search console
おなじみの最強ツールであるサーチコンソールはサイト内の全ページの速度を把握することができます。
速度の推移を把握できるのでサイトを持っている人たちには必ず取っておいて欲しいツール。
キーワードの流入なども見れるのでオススメです。
スポンサーリンク
どうすれば高速化できるか？
高速なWebサーバーにに転移
サーバーの導入機が何年も昔からで、ずっと続いている場合は長年のデータが蓄積されているので表示速度が遅くなってしまいます。
新しいサーバーに転移することで表示速度が向上する場合があります。
ソーシャルボタンを外す
ソーシャルボタンはページの表示速度を下げる原因になることがあります。
ツイート数やイイね数といった数値を外部から読み込む為大きくレスポンスが悪化します。
特にFacebookのソーシャル処理は結構遅かったりします。
サイトまっぷ、商品詳細ページといったようなコンテンツではないページについてはソーシャルボタンを外すことを推奨します。
画像圧縮
ウェブページの読み込みデータ量の大部分は画像データだといっても差し支えありません。今までの画像について圧縮せずそのままアップロードしていたような場合、表示速度が数分の１になる事も稀ではありません。
最重要な高速手法とも言えます。
＜４つの手法＞
- 画像ファイルのサイズを小さくする
- 画像の品質を問題ない程度に下げる
- 新しい画像フォーマットを使う
- Exif 情報の削除
Keep aliveの有効果
ウェブページは数多くのファイルの読み込みを経て初めて表示することができる。
Keep aliveの設定をしないと１つのファイルの読み込みが終わったらサーバーとパソコンやスマホ間の通信を切断します。
ブラウザのキャッシュの有効果
サーバーから1度パソコンやスマホに読み込んだファイルについて保存をしておき再利用するよう指示します。
gzip圧縮の有効化
自動的に圧縮してデータ量を減らすことで高速化します。
遅延の読み込み
画像ファイルはデータサイズが大きい為、表示速度に関わる大きな要因になります。
そこでページを開いた時にはまだ画面に表示されない画像の読み込みの後回しにすることで体感的な速度も早めることができます。
CSSスプライトの導入
よく使用するアイコンなどの小さな画像については画像のように１枚の画像にまとめます。
こうすることにより画像読み込みの回数を減らすことができます。
CDN（content delivery network)の導入
インターネット上にある多数あるキャッシュサーバーにサイトのデータをコピーしユーザーがアクセスしているネットワークから近いサーバーが対応するという仕組み。
高速化について
高速化は非常に奥が深く試行錯誤が必要な対策になるとのことで、僕自身１回のセミナーを聞いただけでは結構頭の中がちんぷんかんぷんになりました。w
なので、基本は『サイトをユーザーさんにストレスなくみてもらう』というのいが目的になりますので、是非ともご自身のサイトを一人でも多くのネットユーザーさん達に見てもらえるよう、自社サイトをチューニングしていければ良いのかなと思いました。
そして、今後また知識のアップデートをしていってこちらのページもリライトしていこうと思います。
この度はわかりづらいブログの内容でしたが最後までブログを読んでいただきありがとうございました。
スポンサーリンク
