CSS Nite LP23フォローアップ（3）『モバイルWebパフォーマンス最適化』（斉藤 祐也さん） | CSS Nite公式サイト

2012年6月30日（土） 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、斉藤 祐也さんの『モバイルWebパフォーマンス最適化』のスライドなどを公開します。

• スライド（PDF、103ページ、9.2MB）
• 音声

今回のセッションでは限られた時間の中で広い範囲の話をしましたので、特にHTML5の話で紹介した仕様の実装方法について触れませんでしたので、フォローします。

• HTML5のlocalStorageでiPhone用Webアプリを高速化 / @ITより
  
• localStorageを利用した基本的なデータの保持の方法についてのデモ
  

Add a taskのインプットに文字を入力してaddをクリックすると文字が追加されます。
ウィンドウを閉じて、再度ページを開いてみてください。先ほど入力した文字が保持されています。
Google Chromeを利用している場合はデベロッパーツールを開いてリソースタブからLocal Storageにデータが格納されているのが確認できます。
またここから削除も可能です。

localStorageを利用したパフォーマンス向上のデモ

このページでは地球各地の情報をWikipediaやOpen Street Mapなどから収集し表示しています。 ページ上部のアルファベットのナビゲーションからJをクリックしてJapanを開いてみてください。それから、別のページを開いて、もう1度Japanを開いてみると先ほどJapanのページを開いたよりもかなり読み込み速度が早くなっていると思います。localStorageを利用してリクエストを再度送信しない設定になっています。

第19回HTML5とか勉強会にてこまつ けんさくさんが
pjax ?HTML5時代のAjaxサイトプラクティス?というタイトルにて発表したスライドです。

jQuery-pjaxのデモサイト

githubのCEOであるdefunktことChris Wanstrath氏によるpjaxのjQueryプラグイン。
デモサイトはちょっと分かりづらい所にpjaxを有効にするチェックボックスがあるので、1度無効のままリンクをクリックし、キャッシュを空にして、pjaxを有効にしてもう1度試してみてください。

最後にパフォーマンスはもちろん、フロントエンド側のウェブ制作にまつわる最新情報をTwitter @ cssradarにて紹介しています。

セッション前に鷹野さんからも紹介いただきましたが、CSS Radarというブログも運営しております。