Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

UXを損ねる静的コンテンツ配信アンチパターン7選

4 400 vues

Publié le

静的コンテンツ配信のよくあるアンチパターンを学んで、良いUXを提供しましょう!

Publié dans : Internet
  • Soyez le premier à commenter

UXを損ねる静的コンテンツ配信アンチパターン7選

  1. 1. UXを損ねる静的コンテンツ配信アンチパターン7選 サイボウズ株式会社 大阪開発部 Webアプリケーションエンジニア 岡田 勇樹 [HTML/JS/CSS] WebデザインとUX について考える
  2. 2. Twitterハッシュタグ #frontkansai 2
  3. 3. 自己紹介 ▌岡田勇樹 @y_okady ▌神戸大学出身 33歳 ▌Webアプリケーションエンジニア 兼 マネージャー ▌サイボウズ歴 2007年 新卒入社 2009年 サイボウズ Office サブリーダー 2011年 kintone リーダー 2014年 大阪開発拠点立ち上げ 2015年 大阪開発部 部長 ▌野球観戦、サッカー観戦、フットサル、ゴルフ 3
  4. 4. チームの役に立つサービス 4 サークル 家庭 仕事 学校 友人 国内外 660 万人の利用者
  5. 5. インフラからアプリケーションまですべて自社開発 5 OS・ハードウェア・ネットワーク ミドルウェア Webアプリケーション 自社開発 + OSS + 開発効率化のための様々なツール
  6. 6. 今日のお話 ▌開発環境でちゃんと動いてるからって、本番環境でもちゃんと動いてると 思ってませんか? ▌予期せずUXを損ねてませんか? ▌静的コンテンツ配信のよくあるアンチパターンを学んで、良いUXを提供し ましょう! 6
  7. 7. 選ばれし7つのアンチパターン 1. 大きな画像をサイズ指定で縮小表示 2. サイズを指定せずに画像表示 3. Retina対策していない画像表示 4. JavaScriptファイルをそのまま公開 5. なんとなくheadにscript 6. キャッシュを有効化してるのに上書き保存 7. なんでもかんでもキャッシュOFF 7
  8. 8. 1. 大きな画像をサイズ指定で縮小表示 ▌悪い例 8 <img src="photo.jpg" style="width: 320px; height: 240px;" /> 320px 240px2448px 3264px 1.7MB 1.7MB 4G環境で読み込みに5秒 表示
  9. 9. 1. 大きな画像をサイズ指定で縮小表示 ▌良い例 9 <img src="photo.jpg" /> 320px 240px 1.7MB 22KB 表示 320px 240px 22KB 変換 適切なサイズに変換した画像を表示しよう!
  10. 10. 2. サイズを指定せずに画像表示 ▌悪い例 10 <img src="banner.jpg" /><br /> <a href="http://cybozu.co.jp">サイボウズ株式会社</a> 画像読み込み前 画像読み込み後 画像より後の要素の位置が変わる
  11. 11. 2. サイズを指定せずに画像表示 ▌良い例 11 画像読み込み前 画像読み込み後 <img src="banner.jpg" style="width:640px; height:240px;" /><br /> <a href="http://cybozu.co.jp">サイボウズ株式会社</a> サイズを指定して画像を表示しよう!
  12. 12. 3. Retina対策していない画像表示 12 ▌悪い例 <img src="kintone.png" style="width:485px; height:225px;" /> 485x225の画像を、485x225で表示
  13. 13. 3. Retina対策していない画像表示 ▌良い例 13 <img src="kintone@2x.png" style="width:485px; height:225px;" /> 970x450の画像を、485x225で表示 CSSピクセルに合ったサイズの画像を用意しよう!
  14. 14. 3. Retina対策していない画像表示 14
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. 6. キャッシュを有効化してるのに上書き保存 ▌良い例(3) HTTPリクエストはとりあえず送る ファイルに更新があれば200を返す ファイルに更新がなければ304を返す 304が返ってきたらブラウザキャッシュを使う 24 location ~ .png$ { etag on; if_modified_since exact; } ※nginxのデフォルト設定 HTTPリクエストを減らすのを諦めよう!
  25. 25. 7. なんでもかんでもキャッシュOFF ▌悪い例 25 location / { expires -1; add_header "Cache-Control" "no-cache"; etag off; if_modified_since off; } 1.27s 静的コンテンツもすべて取得してしまっている
  26. 26. 7. なんでもかんでもキャッシュOFF ▌良い例 26 location ~ .php$ { expires -1; add_header "Cache-Control" "no-cache"; etag off; if_modified_since off; } 動的コンテンツだけキャッシュOFFにしよう! 720ms
  27. 27. まとめ 27
  28. 28. 選ばれし7つのアンチパターン 1. 大きな画像をサイズ指定で縮小表示 2. サイズを指定せずに画像表示 3. Retina対策していない画像表示 4. JavaScriptファイルをそのまま公開 5. なんとなくheadにscript 6. キャッシュを有効化してるのに上書き保存 7. なんでもかんでもキャッシュOFF 28
  29. 29. どれもちょっとしたことなんですが ▌ちょっとしたことでユーザーの満足度を下げるのはもったいない ▌ちょっとしたことに気を配ってるサービスってなんかイケてる ▌ちょっとだけ手間をかけて、良いUXを提供しましょう! 29
  30. 30. 宣伝 30
  31. 31. 技術勉強会の会場貸しやってます ▌国内 3 拠点を繋いだ同時開催が可能です ▌Facebook やメールなど、どんな手段でも良いのでサイボウズのエンジニ アまでお気軽にご相談ください 31 大阪:35名 東京:40名 松山:40名
  32. 32. 技術ブログやってます ▌アーキテクチャ刷新プロジェクト「Neco」の紹介 ▌React や Selenium などの勉強会開催レポート ▌Java や JVM にまつわる運用障害の調査について ▌などなど、毎月約 5 本の技術系記事を投稿中 32 http://blog.cybozu.io
  33. 33. エンジニア採用やってます ▌サイボウズの企業理念 チームワークあふれる「社会」を創る チームワークあふれる「会社」を創る ▌求める人材 「チームの役に立つサービス」を「いろんな人と協力し合うチーム」で開発したい人 ▌インフラからアプリケーションまであらゆる分野で募集中 33 http://cybozu.co.jp/company/job/
  34. 34. ご清聴ありがとうございました! 34 #frontkansai

×