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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク

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

リンク

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

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

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

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

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

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

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

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