2018年7月から、事前に告知されていた通り、Googleのスマホ（モバイル）での検索のランキング要因として「スピードアップデート」が導入されました。
Googleウェブマスター向けブログ – ページの読み込み速度をモバイル検索のランキング要素に使用します
Speed Update についての補足です。
１）アナウンスしている通り「ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し」ます。
２）それは遅さに応じて段階的に適用されます
３）今月ローンチ予定です。
もしすでに十分速いサイトの場合、改善しても特に何も変化は起きません。 https://t.co/JcReDliMGw— 金谷 武明 Takeaki Kanaya (@jumpingknee) 2018年7月3日
これまでアナウンスされている内容を簡単にまとめると、以下がモバイルでの検索の結果に影響してくるようです。
- 表示が遅いページに影響する（すでに早い場合は影響がない）
- 表示の遅さに応じて、評価が下がる
ページの読み込み速度をチェックするツールはGoogleから公開されています。
このツールを使用してサイトのスピードを測った後、改善すべき箇所は修正方法まで提示してくれます。
非常に便利なツールです。
何より、検索結果を評価してランキングしているGoogleが提供しているツールであることが、このツールを信頼できる理由です。
この記事では、代表的なサイトのスピードアップのための改善方法を紹介します。
Contents
何がサイトのスピードアップにつながるのか
これから紹介する改善策すべてに共通する方向性として、Webサイトの構成要素の容量を小さくするということが共通しています。画像や、ページを構成しているHTML、JavaScript、CSSなどそれぞれの容量を軽くすることで、ページの表示速度が速くなります。
画像の軽量化
ウェブサイトに使われている要素で、ページ全体の容量が大きくなる原因と考えられるのは画像です。
HTMLなどの文字で構成されているファイルと、画像のファイルの容量を比べるとハッキリと分かります。
画像一点一点の容量が大きいことも評価を下げる原因となりますが、ページに読み込まれる画像の数が多ければ多いほど表示速度が遅くなり、評価がマイナスになります。
（ECサイトなど、他の商品へのサムネイルを含んだリンクをたくさん配置している場合は注意しましょう。）
画像の軽量化における注意
画像を軽くするのは良いのですが、軽くしすぎて画質が悪くなるとサイトの印象が悪くなるので、程よい軽量化を心がけましょう。
画像軽量化してくれるツール
オンラインで無料で利用できるツールがたくさんありますが、ここではいくつか紹介します。
TinyJPG
JPG、PNGのファイルを圧縮することができます。
操作はカンタンで、圧縮したいファイルを「Drop your .png or .jpg files here!」と書かれた枠の中に、ドラッグアンドドロップするだけです。
Optimizilla
こちらもJPG、PNGのファイルを圧縮することができます。
一度に最大20個までファイルをアップロードできます。
圧縮のレベルを調整する機能付きです。画像をどの程度圧縮するのか確認しながらやりたい人にオススメです。
画像の軽量化以外の改善について
多くの場合は画像の軽量化でスピードを改善するかと思うのですが、それでも改善しない場合は、以下を確認しておいた方が良いです。
HTMLソースに無駄な記述がないか
HTMLコーディングで作られたソース（記述）に、タグが何重にも入れ子になっているなど無駄な記述がある場合はソースの読み込みに必要以上に時間がかかるためん、表示速度が遅くなります。
HTMLの記述がちゃんとしているか、確認した方が良いでしょう。
利用しているサーバーに異常がないか
異常に安い価格のサーバーを利用しているときや、サーバーに何かしら障害が発生している時などでも、データの通信がうまくいかないことが原因で、表示速度が遅くなることがあります。
異常に安い価格のサーバーの場合は、多少コストが上がってもサーバーを引っ越した方が良いかもしれません。
サイトの表示速度が遅すぎてユーザーが見られないよりは、ずっと良いです。
サーバーの障害はレンタルサーバーの場合、メールが届いていたり、管理画面から確認できます。
読み込むファイルが多すぎるかどうか
画像の件でも説明したのですが、CSSやJavaScriptの外部ファイルを読み込む数が多すぎると、表示スピードが遅くなる場合があります。
その場合は必要なファイルだけ読み込むようにしましょう。
すでに使っていないCSS、JavaScriptは読み込まないようにしましょう。
ASPサービスの仕様
ASPサービスを利用している場合、サービスが構築されているシステムによって、表示速度が遅くなる場合があります。そういう場合は中身の改善による表示速度の改善は難しいので、サービスの提供元に問い合わせてみましょう。
その他の改善方法
以下の改善方法は、HTMLソースやJavaScript、CSSなどのファイルを圧縮して読み込み速度を速くする方法です。
ただ、よっぽど複雑のサイトの作りをしていない限り、ここまでしなければいけないケースは少ないと思います。
いずれも利用する前に、圧縮前のファイルはバックアップしておきましょう。
HTMLソースの圧縮
コメントアウトや空白、空の要素などを取り除くことができるツールです。
JavaScriptファイルの圧縮
JavaScriptの無駄な記述を取り除くことができるツールです。
CSSファイルの圧縮
CSSの無駄な記述を取り除くことができるツールです。
いずれも制作時に考慮しておけば手間がない
いずれの改善方法も、制作時に気をつけておけば、後からする必要はありません。
Webサイトを制作する際に、価格の安さだけで発注する先を選んでいる場合は、なぜ価格が安いのか必要があります。
技術が未熟だから、安く受けているのか。
技術はあるが金額を値切られたので、握られた分、工数を抑えて制作しているのか。
見積もりがある程度高いということは、それなりの技術を駆使してサイトを制作している人である場合が多いです。
（まれに金額は高いが技術がないという方もいらっしゃいます。）
制作を依頼する際は、ちゃんと制作実績を確認しましょう。
