webサイトが重い時の解決方法

webサイトが重い時の解決方法

webサイトになかなかアクセスできなかったり画像の表示に時間がかかったり、サイトの読み込み速度が遅いと感じたことはありませんか?
webサイトの読み込み速度が遅いと、離脱率の上昇や直帰率の上昇、Googleの表示順位にも影響するようです。

DigitalMarketingblogの記事によると、googleは表示速度と直帰率について下記のように発表しているとのことです。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
表示速度が1秒から10秒に落ちると、直帰率は123%上昇する

参照:DigitalMarketingblog

そこで今回は、webサイトの読み込み速度の確認方法と読み込み速度が遅い時のよくある解決方法を紹介します。

読み込み速度の確認方法

webサイトの読み込み速度の確認は、下記のサイトで無料で計測できます。

PageSpeed Insights

googleが提供している「PageSpeed Insights」
URLを入力するだけで簡単に計測できます。計測結果は点数化(100点満点)されているのでわかりやすく、改善点も提案してくれるので、とても使いやすいです。

webサイトが重い時の解決法

GTmetrix

GT.netが提供している「GTmetrix」
計測結果がA~Fのランクで表されるため、予備知識がなくても表示速度の確認が可能です。さらに、要素ごとの表示速度についてもA~Fランクでの評価があり、改善点も提案してくれます。
こちらはアカウント登録すると、より詳しい設定が利用できます。基本的に無料ですが、一部有料プランもあるようです。

webサイトが重い時の解決法

読み込み速度が遅い時の解決方法

webサイトの読み込み速度を改善する、よくある解決方法を紹介します。

画像の最適化

画像は使用するサイズにあわせてトリミングをおこない容量を抑え、画像にあわせたフォーマット(GIF、JPG、PNG)で保存します。画像最適化サイトを使用すれば効率的に作業できます。

下記2つのような画像最適化サイトを使用すると効率的に作業できます。

Tiny PNG

Optimizilla

他にもたくさん優れた画像最適化ツールがありますので、自分の合ったお気に入りを探してみてください!

ファイルの軽量化

HTMLやJavaScript、CSSのコードに含まれている余分な記述(改行やコメントアウトなど)を削除することでファイルサイズを軽くします。

下記のような自動圧縮ツールを使用すると、効率的に圧縮ができます。

HTMLの圧縮

html-minifier

CSSの圧縮

csso

cssnano

JavaScriptの圧縮

Closure Compiler

UglifyJS

まとめ

webサイトの読み込み速度はSEOの視点からも集客面からも、CVR向上の面からも大切です。
まだ実践していない場合は、ぜひ一度測定・改善を試してみてください♪

\ 私たちと一緒に働きませんか? /

エムトラッドでは現在デザイナー・エンジニアを募集しています!