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

UXを損ねる静的コンテンツ配信アンチパターン7選
サイボウズ株式会社大阪開発部
Webアプリケーションエンジニア
岡田勇樹
[HTML/JS/CSS] WebデザインとUX について考える

Twitterハッシュタグ
#frontkansai
2

自己紹介
▌岡田勇樹 @y_okady
▌神戸大学出身 33歳
▌Webアプリケーションエンジニア兼マネージャー
▌サイボウズ歴
2007年新卒入社
2009年サイボウズ Office サブリーダー
2011年 kintone リーダー
2014年大阪開発拠点立ち上げ
2015年大阪開発部部長
▌野球観戦、サッカー観戦、フットサル、ゴルフ
3

チームの役に立つサービス
4
サークル
家庭
仕事
学校
友人
国内外 660 万人の利用者

インフラからアプリケーションまですべて自社開発
5
OS・ハードウェア・ネットワーク
ミドルウェア
Webアプリケーション
自社開発 + OSS + 開発効率化のための様々なツール

今日のお話
▌開発環境でちゃんと動いてるからって、本番環境でもちゃんと動いてると
思ってませんか？
▌予期せずUXを損ねてませんか？
▌静的コンテンツ配信のよくあるアンチパターンを学んで、良いUXを提供し
ましょう！
6

選ばれし7つのアンチパターン
1. 大きな画像をサイズ指定で縮小表示
2. サイズを指定せずに画像表示
3. Retina対策していない画像表示
4. JavaScriptファイルをそのまま公開
5. なんとなくheadにscript
6. キャッシュを有効化してるのに上書き保存
7. なんでもかんでもキャッシュOFF
7

▌悪い例
8
<img src="photo.jpg" style="width: 320px; height: 240px;" />
320px
240px2448px
3264px
1.7MB
1.7MB
4G環境で読み込みに5秒
表示

▌良い例
9
<img src="photo.jpg" />
320px
240px
1.7MB
22KB
表示
320px
240px
22KB
変換
適切なサイズに変換した画像を表示しよう！

▌悪い例
10
<img src="banner.jpg" /><br />
<a href="http://cybozu.co.jp">サイボウズ株式会社</a>
画像読み込み前画像読み込み後
画像より後の要素の位置が変わる

▌良い例
11
画像読み込み前画像読み込み後
<img src="banner.jpg" style="width:640px; height:240px;" /><br />
<a href="http://cybozu.co.jp">サイボウズ株式会社</a>
サイズを指定して画像を表示しよう！

12
▌悪い例
<img src="kintone.png" style="width:485px; height:225px;" />
485x225の画像を、485x225で表示

▌良い例
13
<img src="kintone@2x.png" style="width:485px; height:225px;" />
970x450の画像を、485x225で表示
CSSピクセルに合ったサイズの画像を用意しよう！

14

▌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
<script src="1.js"></script>
kintoneのJavaScriptは1,000ファイル、10MB、40万行
そのまま読み込むと3秒以上はかかる

▌良い例
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
<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
<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
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
location ~ .png$ {
expires 1d;
add_header "Cache-Control" "86400";
}
<img src="logo.png" style="width:410px; height:162px;" />
画面を再表示（再読み込みはしない）
ブラウザはURL単位でキャッシュする
JavaScriptで同じことが起きると正常に動作しない場合もある

▌良い例（1）
22
location ~ .png$ {
expires 1d;
}
<img src="logo.png?20130801" style="width:410px; height:162px;"/>
<img src="logo.png?20160401" style="width:431px; height:101px;"/>
バージョン情報をQueryStringに乗せよう！

▌良い例（2）
23
location ~ .png$ {
expires 1d;
}
ファイル名を変えよう！
<img src="logo_new.png" style="width:431px; height:101px;" />

▌良い例（3）
HTTPリクエストはとりあえず送る
ファイルに更新があれば200を返す
ファイルに更新がなければ304を返す
304が返ってきたらブラウザキャッシュを使う
24
location ~ .png$ {
etag on;
if_modified_since exact;
} ※nginxのデフォルト設定
HTTPリクエストを減らすのを諦めよう！

▌悪い例
25
location / {
expires -1;
add_header "Cache-Control" "no-cache";
etag off;
if_modified_since off;
}
1.27s
静的コンテンツもすべて取得してしまっている

▌良い例
26
location ~ .php$ {
expires -1;
add_header "Cache-Control" "no-cache";
etag off;
if_modified_since off;
}
動的コンテンツだけキャッシュOFFにしよう！
720ms

選ばれし7つのアンチパターン
28

どれもちょっとしたことなんですが
▌ちょっとしたことでユーザーの満足度を下げるのはもったいない
▌ちょっとしたことに気を配ってるサービスってなんかイケてる
▌ちょっとだけ手間をかけて、良いUXを提供しましょう！
29

技術勉強会の会場貸しやってます
▌国内 3 拠点を繋いだ同時開催が可能です
▌Facebook やメールなど、どんな手段でも良いのでサイボウズのエンジニ
アまでお気軽にご相談ください
31
大阪：35名東京：40名松山：40名

技術ブログやってます
▌アーキテクチャ刷新プロジェクト「Neco」の紹介
▌React や Selenium などの勉強会開催レポート
▌Java や JVM にまつわる運用障害の調査について
▌などなど、毎月約 5 本の技術系記事を投稿中
32
http://blog.cybozu.io

エンジニア採用やってます
▌サイボウズの企業理念
チームワークあふれる「社会」を創る
チームワークあふれる「会社」を創る
▌求める人材
「チームの役に立つサービス」を「いろんな人と協力し合うチーム」で開発したい人
▌インフラからアプリケーションまであらゆる分野で募集中
33
http://cybozu.co.jp/company/job/

ご清聴ありがとうございました！
34
#frontkansai

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

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

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

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

Notes de l'éditeur