サイトスピードの改善とは？

サイトスピードの改善は、ウェブサイトの読み込み速度を向上させることを言います。
ユーザーの満足度の向上やSEOの観点から非常に大切な施策です。

サイトページを改善する理由は？

サイトページを改善する理由は大きく分けて二つあります。
一つは、検索するユーザーのストレスを軽減するためです。
知りたい情報が見つかりそうなサイトがあっても、そのサイトがなかなか開かなかったりするとストレスが溜まりますよね？
サイトのスピードを上げることによって、閲覧するユーザーの満足度を向上させることができます。

サイトスピードを改善するもう一つの理由は、SEO対策です。
Googleは、開くスピードが速いサイトを高く評価します。
Googleの抱える理念は、「ユーザーファースト」です。
ユーザーにとって使いやすい検索エンジンを提供することがGoogleの使命です。

サイトのスピードが改善されたら、ますますユーザーに喜んでいただき、Googleという検索エンジンを使ってもらうことができます。そうすると、Googleも広告で稼ぐことができるといわけです。

では、どうすればページスピードを改善できるのでしょうか？
その方法はいろいろあり、専門的な知識が必要な施策もありますが、ここでは比較的に簡単な3つの改善方法をご紹介します。

サイトの画像最適化

画像圧縮とフォーマット最適化

サイトのスピードを改善させるためには、画像の最適化が重要です。画像圧縮とフォーマット最適化は、読み込み時間を短縮し、ユーザーの満足度を上げることに貢献します。
サイトスピードを改善するために役立つ方法を以下に記します。
それほど、難しくはないのでチャレンジしてください。

画像を圧縮する

自分で撮った写真を使うにせよ、インターネット上で取ってきた画像を使うにせよ、そのまま使うのは辞めましょう。必ず画像は圧縮して使いましょう。
そのままの画像を使うとサイトが重くなりスピードが低下してしまいます。
ですから、スピードを改善するために、まずはサイトにアップロードする前に画像は圧縮して使いましょう。

画像を圧縮する方法

画像を圧縮する方法は簡単です。
Googleで「画像　圧縮」と調べたら、画像を圧縮してくれる無料で利用できるサイトが色々と出てきます。
例えば、私は、「TinyPNG」という画像圧縮ソフトを使っています。
JPEGやPNGの写真をこのサイトにドラッグ＆ドロップさせて、ダウンロードボタンを押すだけです。私の経験値では、平均して画像の容量が７割から８割ほど軽くなります。
あとは、その画像をサイトにアップロードするだけで、スピードが改善されます。
慣れたら１画像を圧縮するのに、1,2分で終わりますよ。

レスポンシブイメージの導入

画像をレスポンシブでも違和感なく見れるように調整することが大切です。
つまり、スマートフォンで見た時の画像の大きさに注意するということです。

これも、Googleが特に目を光らせている施策です。
ユーザーにとってみやすい大きさの画像にしましょう。
これによって、サイトの読み込むスピードも改善されることになります。
もし、あなたのサイトがワードプレスで作られているのでしたら、問題はないかと思いますが、直書きされているサイトでしたら、レスポンシブデザインの時に、ユーザーにとって最適な画像の大きさになっているかどうかに注意してください。

遅延読み込みの実装

遅延読み込みの実装とは、ページが読み込まれる際にすべての画像を一度に読み込むのではなく、画像がビューポートに近づいたときに読み込むという手法です。
つまり、画像が実際に表示される前には読み込まれず、必要になった時点で非同期的に読み込むということです。
これによって、サイトのスピードも改善されます。

では、どうすれば実装できるのでしょうか？
JavaScriptを使用した実装ができます。
少し難しいですよね。

JavaScriptを使用して、画像の読み込みタイミングを制御するということです。JavaScriptライブラリやプラグインを利用すると、遅延読み込みの実装が簡単になります。

JavaScriptを使用して、画像の読み込みタイミングを制御する方法はいくつかあります。以下にいくつかの一般的な方法をご紹介します。

・イベントリスナーを使用する方法

const image = new Image();

image.addEventListener(‘load’, function() {
// 画像が完全に読み込まれた後に実行する処理
console.log(‘画像が読み込まれました’);
});

image.src = ‘path/to/image.jpg’; // 画像のパスを指定して読み込みを開始

この方法では、loadイベントリスナーを使用して、画像が完全に読み込まれた後に実行する処理を指定します。

・onload属性を使用する方法

html

＜img src=”path/to/placeholder.jpg” alt=”Placeholder” onload=“loadImage()”＞

JavaScript
function loadImage() {
// 画像が完全に読み込まれた後に実行する処理
console.log(‘画像が読み込まれました’);
}

この方法では、onload属性を使用して、画像が完全に読み込まれた後に指定した関数を呼び出します。

・Promiseを使用する方法

function loadImage(src) {
return new Promise(function(resolve, reject) {
const image = new Image();

image.addEventListener(‘load’, function() {
resolve(image); // 画像の読み込みが成功した場合は解決
});

image.addEventListener(‘error’, function() {
reject(new Error(‘画像の読み込みに失敗しました’)); // 画像の読み込みが失敗した場合は拒否
});

image.src = src; // 画像のパスを指定して読み込みを開始
});
}

loadImage(‘path/to/image.jpg’)
.then(function(image) {
// 画像が完全に読み込まれた後に実行する処理
console.log(‘画像が読み込まれました’);
})
.catch(function(error) {
console.error(error);
});

この方法は、Promiseを使用して非同期の画像の読み込みを管理しています。loadImage関数はPromiseを返し、画像の読み込みが成功した場合は解決（.thenブロック）、失敗した場合は拒否（.catchブロック）されます。

こうした方法を利用することによって、JavaScriptを活用して画像の読み込みタイミングを制御し、必要な処理を適切なタイミングで実行することができるようになります。
結果として、サイトのスピードが改善されるのです。

ブラウザキャッシュの活用

ブラウザキャッシュは、ウェブブラウザが一度ダウンロードしたリソースを保存しておく仕組みです。これにより、同じウェブサイトを再訪問する際に、必要なリソースを再ダウンロードすることなく高速に表示することができます。

ブラウザキャッシュの設定

ブラウザキャッシュのもたらす益には、大きく分けて2つあります。

①リソースの再ダウンロードを回避:
ブラウザキャッシュにより、同じウェブサイトを再び訪問した際に必要なリソースを再ダウンロードする必要がなくなります。これにより、ページの読み込みスピードが改善され、ユーザーエクスペリエンスが向上することになります。
②ネットワークリクエストの削減:
キャッシュされたリソースはローカルで利用できるため、サーバーへのリクエストが削減されま
す。そのため、ネットワークの帯域幅を節約し、サイトのレスポンス時間を改善できます。

CSSとJavaScriptの最適化

CSSとJavaScriptはウェブサイトのデザインや機能の実装に欠かせない要素ですが、不要なコードや冗長なファイルが増えると、サイトスピードに悪影響を与える可能性があります。

不要なCSSとJavaScriptの削除と最適化

サイトスピードの改善のために、まずは不要なCSSを削除しましょう。
中には、サイトに反映されていないCSSやセレクタがあるかもしれません。
それらを削除することによって、ファイルの容量を小さくできます。そして、結果として、サイトのスピードは向上されるのです。

またCSSの結合と圧縮もサイトの読み込みスピードを改善するために有効な手段となります。
いくつかのCSSファイルが存在していると読み込みスピードが遅くなってしまいます。
ですから、ファイルを一つにまとめることによってスピードを速くすることができます。

そして、次に不要なJavaScriptの削除も行なってください。
使用されていないJavaScript関数や変数を削除することで、ファイルサイズを減らし、パースや実行の時間を短縮することができます。

さらに、CSSファイルの時と同じように、複数のJavaScriptファイルを結合して1つのファイルにすることで、ネットワークリクエストの数を減らし、ダウンロード時間を早めるようにしましょう。さらに、JavaScriptの圧縮を行うことで、ファイルサイズを最小化し、読み込み時間を短縮することができます。
このようにして、サイトスピードの改善を図るのです。

現在のサイトのスピードを知る方法

サイトのスピードの改善に取り組むためには、現在のサイトスピードの状況を理解しておくことが大切です。
そのために役立つ無料のツールがありますのでお伝えします。
PageSpeed Insightsというツールです。

使い方は非常に簡単です。
スピードを調べたいサイトのURLを貼り付けるだけです。
そうすると、100点中何点の評価を得ているかが一目で分かります。
またどこを改善すればスピードが改善させるかも教えてくれます。

何らかの施策を行なった後にこちらのツールを使って、どのくらいの効果が上がったのかを確かめるのも楽しいですね。

サイトスピードの改善のまとめ

上記の施策の他にも、サイトスピードを改善する方法は色々とあります。
しかし、ここでは比較的簡単にできるものだけを厳選して紹介しました。
特に、画像ファイルの圧縮作業は効果もありますし、今日からでも実践できますので必ず、試してみてください。
他にも、お尋ねなどがありましたらいつでもご連絡ください。