UXを損ねる静的コンテンツ配信アンチパターン7選
•Download as PPTX, PDF•
6 likes•5,452 views
静的コンテンツ配信のよくあるアンチパターンを学んで、良いUXを提供しましょう！
![UXを損ねる静的コンテンツ配信アンチパターン7選
サイボウズ株式会社 大阪開発部
Webアプリケーションエンジニア
岡田 勇樹
[HTML/JS/CSS] WebデザインとUX について考える](https://image.slidesharecdn.com/ux7-160514061607/85/ux7-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to UXを損ねる静的コンテンツ配信アンチパターン7選
Similar to UXを損ねる静的コンテンツ配信アンチパターン7選 (20)
UXを損ねる静的コンテンツ配信アンチパターン7選
- 1. UXを損ねる静的コンテンツ配信アンチパターン7選 サイボウズ株式会社 大阪開発部 Webアプリケーションエンジニア 岡田 勇樹 [HTML/JS/CSS] WebデザインとUX について考える
- 3. 自己紹介 ▌岡田勇樹 @y_okady ▌神戸大学出身 33歳 ▌Webアプリケーションエンジニア 兼 マネージャー ▌サイボウズ歴 2007年 新卒入社 2009年 サイボウズ Office サブリーダー 2011年 kintone リーダー 2014年 大阪開発拠点立ち上げ 2015年 大阪開発部 部長 ▌野球観戦、サッカー観戦、フットサル、ゴルフ 3
- 5. インフラからアプリケーションまですべて自社開発 5 OS・ハードウェア・ネットワーク ミドルウェア Webアプリケーション 自社開発 + OSS + 開発効率化のための様々なツール
- 7. 選ばれし7つのアンチパターン 1. 大きな画像をサイズ指定で縮小表示 2. サイズを指定せずに画像表示 3. Retina対策していない画像表示 4. JavaScriptファイルをそのまま公開 5. なんとなくheadにscript 6. キャッシュを有効化してるのに上書き保存 7. なんでもかんでもキャッシュOFF 7
- 8. 1. 大きな画像をサイズ指定で縮小表示 ▌悪い例 8 <img src="photo.jpg" style="width: 320px; height: 240px;" /> 320px 240px2448px 3264px 1.7MB 1.7MB 4G環境で読み込みに5秒 表示
- 9. 1. 大きな画像をサイズ指定で縮小表示 ▌良い例 9 <img src="photo.jpg" /> 320px 240px 1.7MB 22KB 表示 320px 240px 22KB 変換 適切なサイズに変換した画像を表示しよう！
- 10. 2. サイズを指定せずに画像表示 ▌悪い例 10 <img src="banner.jpg" /><br /> <a href="http://cybozu.co.jp">サイボウズ株式会社</a> 画像読み込み前 画像読み込み後 画像より後の要素の位置が変わる
- 11. 2. サイズを指定せずに画像表示 ▌良い例 11 画像読み込み前 画像読み込み後 <img src="banner.jpg" style="width:640px; height:240px;" /><br /> <a href="http://cybozu.co.jp">サイボウズ株式会社</a> サイズを指定して画像を表示しよう！
- 12. 3. Retina対策していない画像表示 12 ▌悪い例 <img src="kintone.png" style="width:485px; height:225px;" /> 485x225の画像を、485x225で表示
- 13. 3. Retina対策していない画像表示 ▌良い例 13 <img src="kintone@2x.png" style="width:485px; height:225px;" /> 970x450の画像を、485x225で表示 CSSピクセルに合ったサイズの画像を用意しよう！
- 15. 3. Retina対策していない画像表示 ▌HTML5のsrcset属性 ▌CSSのMedia Queries 15 <img src=“kintone.png” srcset=“kintone.png 1x, kintone@2x.png 2x” style="width:485px; height:225px;" /> <span class="kintone_image"></span> .kintone_image { background-image: url(“kintone.png”); background-size: 485px 225px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .kintone_image { background-image: url("kintone@2x.png"); } }
- 16. 4. JavaScriptファイルをそのまま公開 ▌悪い例 16 <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script> <script src="5.js"></script> kintoneのJavaScriptは1,000ファイル、10MB、40万行 そのまま読み込むと3秒以上はかかる
- 17. 4. JavaScriptファイルをそのまま公開 ▌良い例 17 <script src="min.js?20160514"></script> $ uglifyjs 1.js 2.js 3.js 4.js 5.js –-compress –-output min.js JavaScriptファイルを圧縮・結合しよう！ kintoneで実際に読み込まれるJavaScriptは6ファイル、273KB
- 18. 5. なんとなくheadにscript ▌悪い例 18 <head> <script src="jquery.js"></script> <script src=”main.js"></script> </head> <body> <h1>We are Hiring!</h1> <h2 id="message"></h2> </body> 読み込み完了 何も表示されない ここでブロックされる // ... // めっちゃ時間のかかる処理をした後に画面を更新 $(window).load(function() { $("#message").html("Welcome to Cybozu!"); });
- 19. 5. なんとなくheadにscript ▌良い例 19 <head> <script src="jquery.js"></script> <script src=”main.js" async defer></script> </head> <body> <h1>We are Hiring!</h1> <h2 id="message"></h2> </body> 読み込み完了 大事なことは表示される レンダリングをブロックしないよう非同期で読み込もう！
- 20. 5. なんとなくheadにscript ▌その他の手法 20 8章 DOMとブラウザのパターン 8.6 JavaScriptの配備 8.6.1 スクリプトをまとめる 8.6.2 ミニファイする、あるいは圧縮する 8.6.3 Expiresヘッダ 8.6.4 CDNを使う 8.7 読み込みのための戦略 8.7.1 script要素をどこに書くか 8.7.2 HTTPのチャンク形式 8.7.3 script要素を動的にしてダウンロードのブロッキングを回避する 8.7.4 遅延読み込み 8.7.5 オンデマンドで読み込む 8.7.6 JavaScriptを事前に読み込む
- 21. 6. キャッシュを有効化してるのに上書き保存 ▌悪い例 21 location ~ .png$ { expires 1d; add_header "Cache-Control" "86400"; } <img src="logo.png" style="width:410px; height:162px;" /> <img src="logo.png" style="width:431px; height:101px;" /> 画面を再表示（再読み込みはしない） ブラウザはURL単位でキャッシュする JavaScriptで同じことが起きると正常に動作しない場合もある
- 22. 6. キャッシュを有効化してるのに上書き保存 ▌良い例（1） 22 location ~ .png$ { expires 1d; add_header "Cache-Control" "86400"; } <img src="logo.png?20130801" style="width:410px; height:162px;"/> <img src="logo.png?20160401" style="width:431px; height:101px;"/> バージョン情報をQueryStringに乗せよう！ 画面を再表示（再読み込みはしない）
- 23. 6. キャッシュを有効化してるのに上書き保存 ▌良い例（2） 23 location ~ .png$ { expires 1d; add_header "Cache-Control" "86400"; } <img src="logo.png" style="width:410px; height:162px;" /> ファイル名を変えよう！ 画面を再表示（再読み込みはしない） <img src="logo_new.png" style="width:431px; height:101px;" />
- 24. 6. キャッシュを有効化してるのに上書き保存 ▌良い例（3） HTTPリクエストはとりあえず送る ファイルに更新があれば200を返す ファイルに更新がなければ304を返す 304が返ってきたらブラウザキャッシュを使う 24 location ~ .png$ { etag on; if_modified_since exact; } ※nginxのデフォルト設定 HTTPリクエストを減らすのを諦めよう！
- 25. 7. なんでもかんでもキャッシュOFF ▌悪い例 25 location / { expires -1; add_header "Cache-Control" "no-cache"; etag off; if_modified_since off; } 1.27s 静的コンテンツもすべて取得してしまっている
- 26. 7. なんでもかんでもキャッシュOFF ▌良い例 26 location ~ .php$ { expires -1; add_header "Cache-Control" "no-cache"; etag off; if_modified_since off; } 動的コンテンツだけキャッシュOFFにしよう！ 720ms
- 27. まとめ 27
- 28. 選ばれし7つのアンチパターン 1. 大きな画像をサイズ指定で縮小表示 2. サイズを指定せずに画像表示 3. Retina対策していない画像表示 4. JavaScriptファイルをそのまま公開 5. なんとなくheadにscript 6. キャッシュを有効化してるのに上書き保存 7. なんでもかんでもキャッシュOFF 28
- 30. 宣伝 30
- 31. 技術勉強会の会場貸しやってます ▌国内 3 拠点を繋いだ同時開催が可能です ▌Facebook やメールなど、どんな手段でも良いのでサイボウズのエンジニ アまでお気軽にご相談ください 31 大阪：35名 東京：40名 松山：40名
- 32. 技術ブログやってます ▌アーキテクチャ刷新プロジェクト「Neco」の紹介 ▌React や Selenium などの勉強会開催レポート ▌Java や JVM にまつわる運用障害の調査について ▌などなど、毎月約 5 本の技術系記事を投稿中 32 http://blog.cybozu.io
Editor's Notes
- ちなみに、先ほど紹介したkintoneは、Java20万行以上、JavaScript30万行以上で作られています。
- 主に社会人向け。詳しくはサイボウズHPをご覧ください。