【SEO対策・直帰率改善】メインブログの読み込み速度の見直しと高速化

f:id:ktrw3200:20180217224254j:plain

最近は、様々なアニメーションを駆使した個性が豊かなウェブサイトが多い気がします。クリックしたくなったり、スクロールしてもっと見たくなったり...表現の方法は様々です。

しかし、アニメーションを使う反面、「表示速度の低下」という問題が出てくるかなぁ~と思います。アニメーションを実装するために、大半のウェブサイトでは「jQuery」というjavascriptライブラリが使用されています。この「jQuery」の読み込みや処理によって表示速度が遅くなったりしているのです。

読み込み中にローディングアニメーションを表示させて、体感速度をアップするといった方法も挙げられますが、実際の表示速度にほぼ変わりはありません。

というわけで今回は、SEO離脱率にも関わる読み込み速度を見直すことにしました。

サイトの読み込み速度を計測する

Googleが提供するPageSpeed Insightsというサービスをつかって、自分のサイトの速度を測ってみましょう。

最高点が100点で、様々な観点から得点を出します。 評価は

  • Good (80点以上)
  • Midium (80点未満60点以上)
  • Low (60点未満)

の3つで評価されます。 当ブログでは、jQueryを読み込んだりだとかはしていないので、スマホ・パソコンでGoodの評価が出ています。

メインブログの評価

メインブログでも画像の圧縮を行ったりと、普段から気にはかけているものの評価はスマホ・パソコンの両方でMidiumという結果になりました。

分析

メインブログでこのような評価になった理由を少し考えてみます。

  • 同じ処理を繰り返している
  • WEBフォントおよびアイコンフォントの読み込み
  • jQueryの使用によるサイト表示処理(レンダリング)

これらの3点を詳しく見ていきます。

同じ処理を繰り返している

f:id:ktrw3200:20180217211652p:plain こちらの画像は、ブラウザの機能の一つ「開発ツール」(F12で起動)を使用してHTTPリクエストを表示させたものです。

見ての通り同じファイルが複数回読み込まれているのがわかります。

adsbygoogle.jsというのは「Googleアドセンス」の広告を表示させるためのファイルです。

f:id:ktrw3200:20180217212737p:plain アドセンスで広告のコードを出力した時、コードの一番上の行で読み込まれるようになっています。

本来ならば、1度だけ読み込めばいいのですが、広告ごとに読み込んでいるケースが多く、サイトの読み込み速度の低下に大きく影響しています。

また、HTTPリクエストが多いと他のリクエストの妨げとなり、表示速度の低下につながるので、一度みなさんのサイトでもこのようなことになっていないか確認してみてください。

解決方法

該当するコードを削除する。

この問題に関してはこれだけで解決です。 同じものが複数読み込まれている場合には、1つだけ読み込むようにしましょう。

WEBフォントおよびアイコンフォントの読み込み

メインブログでもこのブログでもWEBフォントを使用しています。

最近では、WEBフォントとして使えるフォントも増え、使っているサイトも多いです。

また、「FontAwesome」「Material icons」が挙げられるWEBアイコンフォントも良く使われています。

FontAwesomeでは約2,300種類のアイコンが使用できます。しかし、実際は数個しか使用していないのです。

また、WEBフォントでは、使用しないウエイト(太さ)のフォントが無駄に読み込まれていたりします。

10種類のウェイトが用意されていても、実際に使用するのは普通の太さと、ボールドにした時の太さだけしか使いません。

こういった、無駄な読み込みが多いのです。

解決方法

使用しないウェイトは読み込まない

f:id:ktrw3200:20180217214745p:plain Google FontsであればCUSTOMIZEからウェイトを選択できます。

使用するウェイトだけを読み込むようにしましょう。

SVGファイルを使用する

アイコンフォントを使用するのではなく、SVGファイルのアイコンを使用してみましょう。

SVGファイルというのは、ベクター形式の画像で、拡大縮小しても荒くならないのが特徴です。

f:id:ktrw3200:20180217215442p:plain 記号系のアイコンであれば、Material iconsで使用したいアイコンを選択し、右下のSVGをクリックすることで、SVG形式のアイコンファイルを手に入れることができます。

f:id:ktrw3200:20180217215829p:plain SNS系・WEBサービス系のアイコンはSimple Iconsが種類も豊富で使いやすいです。

左上の検索ボックスからアイコンを検索し、ダウンロードしたいアイコンをクリックすることでSVG形式のアイコンファイルを入手できます。

また、SVG形式のファイルはそのままでは使用できないので、メモ帳等のテキストエディタやコードエディタで開いて、出てきたコードを使用しましょう。

<svg aria-labelledby="simpleicons-hatenabookmark-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-hatenabookmark-icon">Hatena Bookmark icon</title><path d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.645 1.41-1.425-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12.526-.084.976-.222 1.32-.412.45-.232.78-.564 1.02-.99s.36-.915.36-1.48c0-.78-.21-1.403-.63-1.87-.42-.48-.99-.734-1.74-.794.66-.18 1.156-.45 1.456-.81.315-.344.465-.824.465-1.424 0-.48-.103-.885-.3-1.26-.21-.36-.493-.645-.883-.87-.345-.195-.735-.315-1.215-.405-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185c.705 0 1.185.088 1.44.262.27.18.39.495.39.93 0 .405-.135.69-.42.855-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08c.71 0 1.185.08 1.432.24.245.16.367.435.367.83 0 .38-.13.646-.39.804-.265.154-.747.232-1.452.232h-.57V9.08h.615z"/></svg>

こんな感じになっていると思います。これをそのままHTMLのタグとして使用出来ます。

サイズや色はCSSで指定できます。

svg {
  width: 24px; //横幅
  height: 24px; //高さ
  fill: #fff; //色
}

svgは文字ではないのでfont-sizeではなくwidth heightで指定しましょう。また、色(塗りつぶし)はfillを使います。

このように、使いたいアイコンだけを読み込むことで、サイトの表示速度高速化に繋がります。また、外部ファイルの読み込みがないという点でも、高速化に繫がります。

jQueryの使用によるサイト表示処理(レンダリング)

jQueryを使うべきところ 〜 JSおくのほそ道 #009 - Qiita

かなり古い記事ですが、jQueryの処理は、javascript(ネイティブjs)の処理に比べて、かなり遅いです。 また、jQueryを外部から読み込む必要があるので、サイトの読み込み速度に大きく影響します。

解決方法

jQueryのコードをネイティブjsに書き換える

かなり大変な作業になりますが、jQueryを使用した処理のコードをすべてネイティブjsに書き換えます。

jQueryでできることはネイティブjsでもできます。知識と時間さえあれば、書き換えることができます。

ネイティブjsは大変だと言うかたは、他のjavascriptライブラリを使用するのも一つの手かもしれません。

脱jQueryでサイトの表示速度・処理速度を向上させるために - Qiita

こちらの記事ではjQueryをネイティブjsに書き換えるための基本的なことを書いています。是非参考にしてみてください。

結果

スマホ・パソコンの両方の点数が4ポイントアップしました。

あとがき

読み込み速度の高速化は、簡単なことでも結構変わったりするので、是非みなさんも見直してみてはいかがでしょうか。