スマートフォンサイトで「ページの表示速度が遅い」、「挙動がおかしい」などといった経験はありますか?
たぶん、ほとんどの方が経験をされていると思います。
特に、スマートフォンページの表示速度が遅いとユーザーの離脱率が増えてしまいます。そのためには、改修と検証を繰り返して改善していく必要があります。
なぜ、表示速度が遅くなるのか
スマートフォンサイトで表示速度が遅くなる一番の理由は、画像の読み込みに時間がかかることが原因です。
レスポンシブWebデザインでは、PCサイズで作った画像をそのまま読み込んでしまうため、スマートフォンサイトでは画像容量が大きく、表示速度が遅くなってしまいます。
また、ECサイトなどでは、画像を多く使用するため、画像の読み込みに時間がかかり遅くなります。
そのほかの要因として、CSSやJavaScriptなど多くの外部ファイルを読み込んでいる場合にも表示速度が遅くなってしまいます。
Webページの表示速度と解決方法を簡単に知りたい
Webページの表示速度を無料で評価し、さらに詳しい分析や解決方法まで教えてくれるサイトがあります。
PageSpeed Insights
「PageSpeed Insights」はGoogleが提供しているサイトになります。
このサイトは自動でページを解析し、どうすれば読み込み時間が短くできるのかを提案してくれます。
また、画像やjs、cssなどのファイルを圧縮・最適化してくれるシステムもあります。圧縮されるサイズは微々たるものですが、、、
Pingdom Website Speed Test
こちらのサービスは、基本は「PageSpeed Insights」と同じですが、ページの読み込み速度やファイルを読み込んでいるタイミングなど、グラフを使って可視化しています。
そのほかにも、htmlやjsなどのファイルの容量や占有率なども教えてくれます。
日本語対応をしていないため、英語が苦手な方は難しいかもしれません。
ちなみにティファナのスマートフォンサイトの評価はどちらも95点以上でした。
モバイル端末の表示速度を上げる「AMP」
Googleでもスマートフォン端末での表示速度について問題を抱えていました。今年の10月初旬に「AMP」という、モバイル端末向けのWebニュースの表示速度を上げるプロジェクトを発表しました。
(参考ニュース:http://news.mynavi.jp/news/2015/11/27/609/)
これは2016年頭にオープンソースとして公表するそうです。Webニュースコンテンツと紹介されていますが、このAMPを利用して全てのスマートフォンサイトの表示速度を上げることが出来るようになるのではと私は考えます。
まとめ
スマートフォンサイトのWeb技術は年々進化しています。その分いろいろなプログラムを組み込んでいくことで表示速度が遅くなっていくのが問題となっています。
まずは簡単なHTMLやcssファイルなどで不要なものを削除し、最適化させることから始めましょう。ただ、不要なソースを消した時に他のプログラムがうまく動かないということもありますので、検証はしっかり行うようにしましょう!