表示速度の速いホームページ作りで気をつけること

スポンサーリンク
時計:表示速度が早いHPの作り方HP作成

なんで、こんなに表示速度が遅いの?私せっかちだからイライラするわ。

こういう経験ありますよね。調べ物をしているときに遅いサイトだとイライラします。3秒待っても表示しない場合、そのページを消したくなります。でも、もしそれが自分のサイトだったらどうしますか?嫌ですよね。

今回の記事は軽いサイト作りの方法をお伝えします。

表示速度(サイトスピード)の速いホームページの作り方

表示速度が遅いと離脱率が大きくなる

モバイルサイトで表示速度が3秒以上かかる場合、離脱率が53%と言われています。約半分の人があなたのサイトを閉じて去ります。

また、ページ速度はSEOにも影響します。表示速度が速いとランキングが上がる仕組みを2010年にパソコンに導入し、2018年にスマホなどの端末サイトに導入しました。でも、表示速度が上がったからと言って、大きくランキングが上がるわけではありません。

画像の表示速度はユーザーの使いやすさに直結しますので、表示速度を意識したホームページ作りをしていきましょう。

通常HTMLで作られたシンプルなホームページより、WordPressで作られたホームページの方が遅くなります。WordPressはデータベースからコンテンツを組み立て、プラグインというアプリを組み込むから、シンプルなHTMLだけのホームページに比べると遅くなります。

表示速度を決める要因

ホームページの表示速度を決める要因は3つ考えられます。

  • サーバーの性能
  • 画像のサイズ
  • HTML、CSS、JavaScriptのリソース

サーバーの性能

サーバーの性能が高いレンタルサーバーを選ぶことです。比べるところは回線速度、転送量、CPUとコア数、メモリ数とWEbサーバーです。処理能力が高ければ表示速度が速くなります。なので、月の利用料の安さだけで比べてしまうと、表示速度が遅い場合がありますよ。

私はコアサーバーとさくらインターネットを使用していますが、感覚的にさくらインターネットの方が表示速度が速い気がします。「サーバ 仕様」と検索してみてくださいね。レンタルサーバによっては公開していない場合がありますので、口コミを見るといいですよ。

表示速度の早いレンタルサーバーで有名なところは、エックスサーバーカゴヤ・ジャパンです。私は予算も手頃ですし、日々改善しているサービスだと思うのでさくらインターネットを勧めます。

画像のサイズ

ホームページに高解像度の画像は必要ありません。1つの画像ファイルで100KBが目安だと言われています。また、画像は軽くても1ページに必要以上の多い画像がある場合は表示速度が遅くなります。

Photoshopなどの画像圧縮ツールで適切なサイズに編集して使いましょう。Photoshopは「Web用に保存する」出保存するとメタ情報も削除され適切なサイズで保存されます。

 

HTML、CSS、JavaScriptのリソース

HTML、CSSやJavaScriptはなるべくシンプルに書きます。余計なソースや空白、改行は削除します。また、重複や使用していないコード、メモ書きも遅くなる要素です。 

 

表示速度をテストする方法

自分のホームページの表示速度を知る方法です。GoogleのPageSpeed Insightsとアナリティクスを利用します。

PageSpeed insights

PageSpeed insights

グーグルのサイトスピードにURLを入力すれば標示速度が分かる

自分のホームページのURLを入力してクリックするだけで計測できます。表示速度の点数と改善策を教えてくれるツールです。

楽カミホムペ☆の標示速度結果

なかなか点数が低いですね。その下に改善策が提示されているのでそれを一つ一つ潰していけば、表示速度があがります。

アナリティクス

アナリティクス

アナリティクスの標示速度は平均速度

アナリティクスは登録が必要です。アナリティクスも無料で使える分析ツールなので登録しても損はありません。ただ、プライバシーポリシーに利用している旨を記載する必要がありますけど。

アナリティクスの「行動」から「サイトの速度」のメニューから「ページ速度」をクリックします。平均表示速度と比較して、早ければ「緑」、遅いと「赤」で表示されます。

日本一軽いホームページは阿部寛さん

ホームページの表示速度が速いことを「軽い」といいます。「ホームページ 軽い」と検索すると俳優の阿部寛さんのホームページが表示されます。ちゃんと現在も更新されている現役の、昔ながらのHTMLのホームページです。

阿部寛さんのホームページを見ると考えさせられます。ホームページの目的はなんなの?と。ご自身の情報と連絡先が載っていれば、十分目的が果たされています。おしゃれなホームページは彼の経歴に影響しないし、おしゃれなホームページが仕事を運んでこない、彼自身の実力で経歴と仕事があるのだとわかります。

ついついホームページがあれば仕事につながると思いがちで、ホームページ作りに夢中になってしまいます。ホームページの目的からずれないようにしたいですね。

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました