重いサイトを軽くするには?表示速度を速くして損しないサイトにする方法

 

Web1.0の時代にはあまり気にされなかったものの、現在多くのWeb関係者が気にしている指標があります。それがサイトの表示速度です。

サイトの表示速度が気になるという運営者の方も多いのではないでしょうか。なんとなく表示が遅い気がすると感じた時点で既に表示が遅くなっているので、改善した方が良いでしょう。

速度改善をすべき理由とその具体的な方法をご紹介します。

ページ表示を速くすべき理由とメリット

自分のサイトであれ他のサイトであれ、とにかくGoogle検索からページにジャンプしようとした際に読み込みが遅く、結局サイトを見ずに帰ったという経験。1度はあるのではないでしょうか。

 

実は、海外の調査結果によると

 

・消費者の47%が、2秒以内にWebページが読み込まれると予想している

 

・40%の人が、ロードに3秒以上かかるウェブサイトを離れてしまう

 

・ページ応答が1秒遅れると、コンバージョンが7%減少する可能性がある

 

・電子商取引サイトが1日あたり10万ドルを稼いでいる場合、1秒のページ遅延により、潜在的に毎年250万ドルの売上損失が発生する可能性がある

 

などと、恐ろしい支障が出てきています。これは日本でも同じことが言えるでしょう。読み込みが遅ければ当然ページを覗いてくれる人も少なくなりますし、心理的にもイライラ感が募って必ずしもWebページや商品そのものに対して良い感情を持ってくれるかといえば考えものです。

 

ちなみにページの表示速度という指標はユーザーエクスペリエンスの一種ですから、当然SEOの順位にも影響を及ぼしかねない指標です。

 

現段階でページの表示に3秒以上かかってるようであれば、サイトの速度はまず一度把握して、そして改善するというフローを進んで行った方が良いでしょう。

サイトの速度を把握、改善するステップ

表示速度を改善するとなると、まずはサイトの速度を計測して自分のサイトがどのくらいの表示時間なのか確認するところから始めましょう。サイトの速度を計測する方法にはいろいろな方法がありますが、今回はGoogleアナリティクスでの測定方法と改善点の見つけ方についてご紹介してみます。

1.計測

計測はいたってシンプル。

 

「行動>サイトの速度>概要」から調べられます。

 

Googleアナリティクスの「サイトの速度」でわかることは、下記のとおりです。

ページ区分主にわかること
概要平均読み込み時間(秒)

平均リダイレクト時間(秒)

ドメインの平均ルックアップ時間(秒)

サーバーの平均接続時間(秒)

サーバーの平均応答時間(秒)

ページの平均ダウンロード時間(秒)

ページ速度平均読み込み時間(秒)

平均ドキュメントインタラクティブ時間(秒)

平均ドキュメントコンテンツ読み込み時間(秒)

速度についての提案PageSpeed の提案(改善できる項目、診断など)

PageSpeed スコア

カスタム速度画像、動画、ボタンなどのパフォーマンスを細かく分析

※セグメントや調査項目など細かく設定できる

 

こういった情報を確認して、まずどの部分で読み込みに時間がかかっているか、どの部分で速度が遅くなってしまっているかを正確に把握するところからスタートします。

2.遅い原因の分析

データを分析して把握したら、次は遅い原因そのものを分析していくことになります。これをえっちらおっちら手動でやっていると日が暮れてしまうのですが、Googleアナリティクスは一味違います。なんと改善すべき点を提案してくれるんです。

 

「速度についての提案」からページごとに改善を提案してくれるという機能があります。

 

たとえば、こんな提案が表示されます。

 

“JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。”

“フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。”

3.サイトの速度改善はまず画像とフォントから

こういった情報を確認することにより、例えば画像が重たいことが原因でWebサイトの表示速度が全体的に低下しているとなれば画像の品質そのものを落とすか、多少サイズダウンさせるなどの対策を取ることが可能となります。

 

また、JPGを使っている場合は多少表示速度が遅くなってしまうため、pngファイルなどに切り替えて軽量化するという方法も取れますね。

 

そして、フォント表示に関して読み込みが遅くなっているというデータがある場合は、改善していく必要があります。

 

フォントの読み込みが完了するまでテキストを表示させないようだとページの表示速度に如実に影響してしまうので、ひとまず表示された段階で出しておくフォントを設定しておくとよいでしょう。Webフォントを読み込ませる前にまずは「すっぴん」のような状態で構わないので文字を表示させておくのです。そして、読み込みが完了したらウェブフォントに切り替える、これでOKです。

 

もちろん、Googleアナリティクスはフォントや画像以外にもさまざまな改善案を提示してくれます。大変優秀ですね。

まとめ

Webサイトの表示速度が遅くなれば遅くなるほどコンバージョン率も低下する恐れがあります。またユーザーエクスペリエンスの観点からSEOの順位にも、少なくとも良い影響を与えることはないでしょう。そのため、まずはGoogleアナリティクスでサイトの速度を計測し、アドバイスに従って改善していきます。それでも表示速度が思うように改善できない場合は、表示速度に特化しているWordPressテーマを利用するなど対策が必要です。