モバイルの表示速度を上げるTips(SEO効果も)

モバイルの表示速度を上げるTips(SEO効果も)

2016年7月にThink Googleにページスピードの記事が載っていたので、3年前から言われていたことですが、改めて復習してみたいと思います。

自社サイトのページ速度を計測する

Think Google Tool(Test My Site)でURLを入力すると採点してくれます。これはPagespeed Insightの最新版ですね。

URL欄に入れると採点されます。
スクリーンショット 2016-07-28 10.16.09

スクリーンショット 2016-07-28 10.17.51

これに似た機能はGoogle Analytics(以下GA)にもあります。

GAのページ速度は定期的にサンプリングしてくれるので便利です。対策後もマメなチェックをしたい時に使えますね。

スクリーンショット 2016-07-28 10.25.46

できることからやってみよう

ここにも書かれていますが、シンプルに各読み込みの工程を小さくしていくことがコンバージョンに良い結果をもたらします。

ロード3秒を目標とする

不要なJavascript,CSS,HTMLなどを削除し、構造を簡略化することでページのロード時間を減らしましょう。

難しいように聞こえますが(実際本格的にやると難しいが)、呼び出しているファイルがテンプレートのまま、古いアニメーション用のJavascriptが残ってた、コメントアウトされた箇所、不要なCSSなどを削除する程度なら簡単にできるでしょう。

画像の点数を20以内に収める

Googleの調査によるとコンバージョンしたサイトは画像数が19以内に収まり、コンバージョンしないサイトは39以上の画像があったことから、画像は少ないほど良いという結論になります。

images-per-page-conversions-download

画像は(圧縮率により)トータルの読み込み速度が最適化される可能性もあります。圧縮した状態の仕上がりを一度確認してみましょう。

CSSスプライトで画像表示させる

Googleが利用しているのが小さなファイルを1ファイルにし、CSSスプライトで表示エリアを指定する方法です。

nav_logo242

CSS/Javascriptの読み込みを後方に

装飾のCSSやアニメーションのJavascriptなどは初期にレンダリングには必要のないファイルです。
HTMLの後方に配置することで、最初のレンダリングを高速化できます。

また「CSSに@import を利用しない」、「可能な限り同一ドメインにファイルを配置する」なども、重要な要素になります。

小さな画像はdata形式に変える

Data URLスキームで画像をHTMLに埋め込むことでHTMLは少し重くなりますが、画像がなくなるため、読み込み回数を減らせます。dataボリュームにもよりますが、画像を複数読み込むより、HTMLを読み込む方が、より早く表示されます。

参考:https://www.softel.co.jp/blogs/tech/archives/2117

エラーを無くす

File Not FoundやJavascriptエラーはロードの障害となります。可能なな限りエラーをなくしましょう。

まとめ

全てを一気にやろうとすると、息切れしてしまうので、できることから少しづつ進めていくのが良いと思います。

改善ミスをして、むしろ遅くなったりしないようにテストは十分に行いましょう!

コメント