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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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エラーはロードの障害となります。可能なな限りエラーをなくしましょう。

まとめ

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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

『iOS11』の「CoreNFC」でサンワサプライ社製のタグを読み込んでみた... 前回は『iOS11』新搭載の「Core ML」を試してみました。 <bitWave関連記事『「iOS11」新搭載の「Core ML」を駆使してMNISTの手書き数字認識を試してみた』> しかし、私の『iOS11』に対する興味はこれだ...
『iOS11』新搭載の「Core ML」を駆使してMNISTの手書き数字認識を試してみた... 今回もありましたね~、Apple社主催カンファレンス「WWDC2017(※注釈)」 ※World Wide Developer Conference:Apple社が毎年開催するデベロッパー向けイベント 新製品の「HomePod」を始...
スマホの音量調整ボタン、もっと有効活用できないの?... 「カメラ女子」なんて言葉がもてはやされ、ミラーレス一眼レフカメラが爆発的に売れた時期もありましたが、今ではスマートフォンの普及、そしてSNSの普及により、国民総 “カメラ女子(男子)” になるのではないかという勢いすら見せています。 ...
自社制作『OCR』がどんな環境でも文字認識ができるのかテストしてみた... こんにちは、M.Sです。 先日、ひょんなことから『OCR』のテストを行う機会がありました。 これまで自社サービスのサービスインやアップデートの前段階で検証を行うことがほとんどだったわけですが、今回の『OCR』検証は初めての体験。 ...