低速回線時代のスマホサイト制作

シェアする

iij mioに乗り換えて200kpbsでネットしてて、結構サイトによってコンテンツ量は大体一緒でもロード時間が違うなぁと思いまして、それについて書いてみたいと思います。

格安SIMの低速回線

盛り上がっているといってもごく一部の話ですが、最近盛り上がってる格安SIM、大体月に3GBとか5GBの制限オーバーすると200kbpsに減速するのが普通です。iijではこれをクーポンと言って、ONにするとLTE高速通信、OFFにすると減速された200kbps通信でネットが出来るわけです。で、やっぱりケチって200kbpsで使っちゃいたいものなんですが、そこで2,3日ネットしてて気づいたのは、結構サイトによって表示速度に差があるなぁというところ。

ウェブページの初回描画=ファーストペイント

これ調べてて知ったのですが、ウェブページのロードを始めてからスクロールできるようになるまでの時間をファーストペイントって言うんですね。このファーストペイントが小さいサイトほど、低速回線でも早くコンテンツが表示されるわけです。ちなみに、自分のサイトだったらスクリプト入れるとファーストペイントがベンチ出来るみたいなんですが、今やりたいのは人のサイトのファーストペイントを勝手に計測したいだけなので触れないでおきます。

低速回線シミュレーター

ここで研究用に、低速回線をエミュレートできるソフトでもあんのかなぁと思って色々調べてたんですが、色々調べてるそのChromeで出来るんですね。こんな機能初めて知りましたわ。
モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」 | HTML5Experts.jp

というわけで色々みてみよ

でも結局厳密に調べるの面倒なので完全に主観でお届け。知りたい人はやってみてね。250gbpsの2Gモードでレッツ・トライ
Yahoo→はやっ!でもトップページのコンテンツ量少ないから当たり前?
ライブドア→結構遅い
楽天市場→クソ遅い。
Cookpad→楽天ほどじゃないけど遅い。意外。まぁアプリの方に力入れてんでしょう。
価格.com→Cookpadと同じぐらい遅い
食べログ→価格.comと同じぐらい遅い

繰り返しになりますがあくまで主観的な印象で、とにかくヤフーが爆速なんですよ。んでちょっとソース見てみたら、HEADがとにかくシンプル。10行無いぐらい。楽天なんて100行超えてっからね。もちろんjquery読んでるし。ヤフーはケツでJS読むスタイルらしく、HEADでは外部ファイルcssだけ。で、ヤフーってページ終盤は無限スクロール使ってるんで、遅延ロードされるんですよねー、頭いい。

Apple−touch−iconは滅ぶべし、そしてまとめ

見てて気づいたんですが、apple-touch-iconって、ホーム画面にブックマークするときしか使わないのにHEADに書かないといけないし、もれなくサイトロード時に読み込み走るんですよ。そりゃキャッシュされてりゃいいけどこれいらないよね。まぁそれ言い出したら不要なものしこたま読み込んでモバイルデータ通信を食いつぶしてることを考えると、いくらLTEとかで通信速度が上がってページ容量にさほど気を遣わなくなくて良くなったとはいえ、ファーストペイントの最適化というのは課題なのかなと思った次第です。

スポンサードリンク
 
シェアする