Webサイトの速度解析
サイトの表示速度
最初は測定サイトを利用してサイトの表示速度をチェックします。
点数が低い場合は表示速度が遅い事を意味するので、アドバイスを基に改善が必要です。
サイトの表示速度はSEOにも利用者にも効果的な改善策となるので、現在では非常に重要な要素となっています。
特にデザインに用いる画像が重いとメインのコンテンツの足を引っ張る事になるため、できるだけ軽量化を行うようにしてください。
Webサイトの速度測定
Webサイトのスピード改善はUI／UX改善以上に効果あり ゴルフルダイジェスト・オンライン担当者が断言
「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
サイトを37倍に高速化した7つの手法
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS
測定結果と体感速度
大抵は測定サイトの点数が上昇すれば、それに合わせて体感速度でも違いを感じる事ができます。
しかし、まれに測定サイトの点数が上昇しても、体感速度では遅くなったように感じる事があります。
この場合は体感速度を重視し、何らかの施策を行っている場合は修正した方が無難です。
サイトスペックによる速度差
WordPressなどを使用する動的サイトと静的サイトでは、処理の多い動的サイトの方が遅くなります。
また、利用しているサーバーのスペックによっても差が出るため、速度を重視する場合はサイト環境も考慮する必要があるようです。
Webサイトの高速化
サイト構造
サイト構造を複雑にすると読込速度が低下する場合があります。
基本的にあまり深い階層にはせず、辿りやすいシンプルなディレクトリ構造を構築する事が望ましいようです。
- ディレクトリ構造：シンプルにする
- 階層：浅くする
無駄の無いコーディング
ソースは定期的に見直してできるだけ無駄が無く、円滑に処理されるように作成すると速度の向上が見込めます。
効果的なソースは処理速度の向上やデータ量の削減など、様々なメリットが得られるので研究すると良いかもしれません。
無駄な処理を作らない
.htaccessによる高速化
.htaccessを利用する事でWebページの表示速度を高速化する事ができます。
なお、この方法はローカルファイルに変更を加える事無く高速化が可能です。
.htaccessの高速化
WordPressの高速化
WordPressを高速化できるプラグインです。
大抵は問題なく利用できると思いますが、不具合が出るようなら設定を変更して調整する必要があります。
WordPress高速化プラグイン
モバイルページの高速化
モバイルページを高速化するJavaScriptライブラリです。
Accelerated Mobile Pages Project
JavaScriptの高速化
JavaScriptを高速化する方法です。
jQuery高速化！処理速度を10倍上げるテクニック20選
画像の高速化
コーディングによる高速化（HTML、CSS）
HTMLやCSSを効果的に利用する事でサイト全体の高速化が可能です。
HTMLでは画像のサイズ指定、コードの省略など、CSSではCSS Effect、CSS Spriteなどがあります。
HTML高速化
CSS高速化
2行追加するだけでWebサイトを高速化するInstantClick.io
- CSSデザイン：パーツ画像→CSS Effect
- 画像の統合：複数の画像→CSS Sprite
画像ファイルの軽量化
画像の軽量化にはファイル形式の見直し、一覧ページと画像ページの分類、パターン画像の利用、画像ファイルの最適化などがあります。
特に画像の最適化は大幅に軽量化できるので、画像ファイルを取り扱う際には必須と言えます。
また、透過画像に対応したものもあるので、CSS Spriteで作成した画像を最適化する事もできます。
画像を軽量化する方法
- 最適なファイル形式に変換して軽量化する
- ページを分類して読み込み時の負荷を軽減する
- 背景にパターン画像を利用する
- 画像を最適化して軽量化する
- 背景画像を使用している場合（背景が見えない画面サイズ以下は背景画像から背景色に変える）
画像ファイルの先読み
画像ファイルの縮小版を先に読み込ませて読み込み時間の短縮を行います。
- HTML：<div id="container">
<img src="img/画像ファイル" id="speedimg" alt="代替テキスト"> - CSS：#speedimg {width:0px;height:0px;}