CSS Nite LP23フォローアップ(3)『モバイルWebパフォーマンス最適化』(斉藤 祐也さん)

120630_lp23_0500.jpg

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

メッセージ

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

Web Storage APIについて

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

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

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

pjaxについて

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

jQuery-pjaxのデモサイト

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

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

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

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」

3月に都内で好評のうちに終了したCSS Nite LP51「Reboot Dreamweaver」の大阪版を5月13日に開催します。