香川です。
世界水泳見られましたか？
あまり興味なかったんですけど案外面白いんですね。
日本勢の金メダルはもちろんですが、ケイティ・レデッキーという怪物を観れたのが何よりです。
前人未到の自由形4冠…松岡の修造氏もえらく熱くなっていましたね。
という訳で、今回のテーマは”サイトスピード”についてです。
サイトスピードとは、その名の通りWebサイトの表示速度を表します。
先日、ご指摘を受けたこともあってか、今一度サイトスピードについて考えてみることにしました。
PCサイト、特にスマホサイトにおいては切っても切り離せない問題です。
何故なら、「サイトスピードが遅いと離脱に繋がる恐れがある」からです。
せっかくお越しいただいたページが「重たい」「読み込みが遅い」などであれば、せっかちなユーザーは他へ流れてしまいます。
コンバージョンという観点から見ると、改善の余地があるのは明確です。
SEO的な観点から見ても良くありません。
「Googleはコンテンツの質を重視する」為、ペナルティとまではいかないまでも良質なコンテンツとみなされない恐れもあります。
また、弊社のように作業をする側にとっても時間コストのロスに繋がってしまいます。
サイトを管理する上で、いちいち読み込みを待たなければならないのであれば、作業に遅れを来す原因にもなってしまいます。
このように、案外重要なサイトスピード。
どのようにして表示速度を上げればよいのでしょうか。
Webサイトの表示高速化具体例
・可能な限りデータを圧縮、リサイズする
なるべく画像を多用しないという前提を基に、使用する画像は圧縮することを意識しましょう。
また、gzipやdeflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことも出来るようです。
・CSS Spritesに画像をまとめる
アイコンやボタンなど、複数ページで使用するような画像であれば、CSS Spritesを利用して複数の画像を1枚にまとめた方が良いでしょう。
これにより、複数枚の画像を読み込む必要がなくなり、また、画像サイズを抑えることができる為、速度の向上が見込めます。
・コードを縮小する
不必要なソースコードはウェブページのサイズを増加させてしまいます。
コード内の余分なスペースや改行、インデントを削除するのも重要な作業になります。
・CSSを先頭に、JSは最後に記述
通常cssやjsファイルはhead内に置くのが一般的ですが、jsファイルだけ/bodyの直前に置いたほうがページロードは早くなります。
ただ、タグを定義したり、表示そのもに関係するようなjsファイルは先頭に置いた方が良いでしょう。
上記のように、地味な作業にはなってしまいますが、手を加えることでできるだけサーバーへのリクエストを減らすことを意識しましょう。
まとめ
サイトスピードは、感覚的な部分が多くを占めるかと思いますが、数字として表してくれるサイトが多数存在します。
例えばこちら
調べたいURLを挿入すれば自動で分析してくれます。
「ユーザーがページ表示に待てるのは2秒まで、3秒以上かかると40%以上のユーザーが離脱する。」
こんなデータもあるようです。
今一度ご自身のサイトスピードを確認・把握してみるのはいかかでしょうか。
遅いようであれば改善した方がよいでしょう。
かくいう弊社のオフィシャルサイトは非常に遅いです。
動画を取るか、スピードを取るか…バランスも大切になってきますよね。
それでは。
