ページの読み込み速度を上げる
方法4選・便利ツールを紹介!
目次
ページの読み込み・表示速度は速いほうが良い
皆さんはあるサイトを開いたときに、ページの読み込みが遅くて諦めたことはありませんか?
なぜそのようなページは読み込みが遅いのでしょうか。
読み込みが遅い原因は、そのページが重いからです。
もちろんインターネット環境が悪い場合もあります。
ユーザーの利用しやすさを考えると、ページの読み込みは速いほうが良いですよね。
読み込みの遅いページはユーザーのストレスになるだけでなく、遅すぎるとページが開かれることもないかもしれません。
読み込みの遅いサイトからユーザーは離れていき、結果的にSEOに弱いサイトとなってしまいます。
世界で圧倒的なシェアを占めるGoogleはページ読み込みを速くするように推進しています。
2018年にGoogleは、読み込み速度をモバイル検索のランキング要素に使用します、と発表しました。
参考:https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
ちなみにモバイルでなく、デスクトップ検索は2018年以前からランキングシグナル対象です。
読み込み速度改善はSEO対策の1つと言えるでしょう。
ページの読み込みの速さ判定に役立つ便利ツール
ページの読み込みは速いほうが良いと言われても、速い・遅いの基準は人の目ではわかりません。
そのときに、読み込みの速さを判定できるツールがPageSpeed Insightsです。
Google公式のツールであるため、SEO対策としても信頼できます。
速さだけでなく改善するポイントまで教えてくれるので、非常に実用的です。
ページの読み込みの速さを上げる方法4選、便利ツールも紹介!
読み込みの速さを上げるためにやることは主に4つです。
画像ファイルを圧縮し軽量化
画像ファイルが極端に重い場合は、圧縮して軽量化します。
画像圧縮には次のツールを使うと、綺麗に圧縮してくれます。
画像圧縮ツール https://tinypng.com/
[補足]
png圧縮には重宝するtinypng。個人的にちょっと気をつけているのが、やりすぎると赤みが飛びやすい気がしています。こどもの笑顔といった元気さをアピールする画像の際には気をつけていきましょう!
コーディングファイルを軽量化
コーディングファイルを軽量化するというのは、HTML・CSS・JavaScriptなどのファイルを軽量化することです。
HTMLの情報量が多い場合は、CSSやJavascriptの方に情報を移します。
そしてCSSやJavascriptなどの外部ファイルを軽くすればOKです。
CSS・JavaScriptは圧縮には、次のツールを使うと便利です。
CSSファイルを圧縮 CSS Compressor
JavaScriptファイルを圧縮 JS Minifier
また使わない外部ファイルが残っていると読み込みは遅くなります。
不要な場合は、消してしまいましょう。
gzip圧縮を行う
gzip圧縮というのは、HTML・CSSなどそれぞれのファイルごとに圧縮することです。
このときに便利なツールが 7-Zipです。
7-Zipは対応OSが決まっているので注意しましょう。
ブラウザのキャッシュを利用
ブラウザのキャッシュを利用することで、ブラウザが1度開いたことのあるサイトを保存し、再度開く際に早く読み込めるようになります。
ブラウザ上に保存しておく期間を設定し、期間内にサイトを開けば初回よりも速く開くことができます。
これはコーディングで改善します。
まとめ:ページの読み込みの速さをできるだけ上げよう
ページの読み込みをできるだけ速くすることについて、理解が深まったでしょうか?
SEO効果はもちろんですが、ユーザーの利用しやすさを考えて、できるだけページの読み込みは速いほうが良いでしょう。
ノキボウ株式会社ではページの読み込みの速さを改善も承ります。
ちなみに2020年時点で、本サイトのTOPページはあまり読み込み速度は早くありません。Googleの評価もあまり高くありません。
では、なぜそのような状態になっているのか?と申しますと、アニメーションを使っているからです。
最初にホームページにアクセスしてくれた方がどのように感じるのかを想定して、今回は少し重いですが、アニメーションを選択しています。
2021年には様々な対策をまた施し、アニメーションを残しながら、このポイントを改善していく予定です。