Movatterモバイル変換

マルチデバイス時代の高速化〜高速化の基本からHTML5まで〜 #singtacks SHIN Takeuchi BIZREACH Inc. - Co-Founder/CTO LUXA Inc. – Co-Founder/CTO Lei Hau’oli Co., Ltd. – Founder/CEO

プロフィール• SHIN Takeuchi #singtacks – 創業企業＆所属 • 株式会社ビズリーチ CTO • 株式会社ルクサ CTO • 株式会社レイハウオリ CEO – 略歴 • 10歳でBASICに出会い情報工学の道へ • 富士ソフト➡リクルート➡創業3社 • 経営＆モノ作り全般2 #singtacks supported by

アジェンダ• #0 なぜ？なに？高速化• #1 インターネットを理解する• #2 高速化する3つ＋αの観点• #3 現場で使える「表示速度」高速化• #4 現場で使える「体感速度」高速化• #5 HTML5/スマホ時代の高速化• #6 実際に見てみよう3 #singtacks supported by

#0 なぜ？なに？高速化4 #singtacks supported by

なぜ？なに？高速化• なぜ高速化？ – 欲しいものは早く手に入れたい。 • 大抵の場合、通販などでも早く届く方が嬉しい。 • 情報も一緒だよねー。 – クリックしたらすぐ見たい。 1分1秒も惜しいほどみんな結構忙しいのです。。。5 #singtacks supported by

なぜ？なに？高速化• 高速化ってなに？ – インターネットの世界では、色んなエンジニアさんが0.001秒でも早く表示しようと頑張っている • でも、意外と知られていないのが、「HTML」「CSS」「JavaScript」をちょっと考えて書くだけで、もっともっと早く表示できるということ。 Googleさんも、Yahooさんも実は高速化に力を入れまくってます。6 #singtacks supported by

なぜ？なに？高速化• ちょっと政治的なお話 – 「高速化」というのは結構ピンとくる話。 • だって、みんな早く表示された方がいい！って思うよね。 – コストがかかる • 高速化するために、開発コストが上がるものもあります。 • 往々にして質の高い制作物というのはコストが高いもの。 – ビジネスモデルとの兼ね合い • ユーザサイドからお金を貰わないビジネスモデルの場合、開発コストと高速化に売上との相関関係を作りづらい。 • 事業としてコストが出せない判断があると、開発コストの上がる施策はやりたくても出来ないこともあるでしょう。7 #singtacks supported by

なぜ？なに？高速化• 本日のゴール – 本質的理解 • 本質を理解すれば、応用が出来るもの。 • 短い時間を有意義なものに変えるため、本質を理解しよう。 – 現場フィット型施策 • 費用対効果の高い施策を中心にお届け。 • 細かい例外パターンは省いて王道を知ることに注力。 – メラメラする • 高速化っていいじゃん！と心から思えたなら嬉しいです。 • モノを作る時にいつも気になるようになって欲しい。8 #singtacks supported by

#1 インターネットを理解する9 #singtacks supported by

インターネットを理解する• インターネットの中ってどうなってるの？ – こんな意見があります • Webサイトを見る • URLを入力して通信して、うんぬんかんぬん。。。 • 望遠鏡で覗いているような感じ • 地球が入っている感じ • よくわからない。。。 – 正直、こんなんじゃ高速化ってできません。。。10 #singtacks supported by

インターネットを理解する• 今日はこんな風に理解してください11 #singtacks supported by

インターネットを理解する• インターネットは「キャッチボール」 – 僕：「www.bizreach.jp」さーん、「index.html」くださいなー。 – サーバーさん：はーいー。ありましたよー。どうぞー。 – 僕：こんどは「top.css」くださいなー。 – サーバーさん：はーいー。ありましたよー。どうぞー。 – 僕：こんどは「top.js」くださいなー。 – サーバーさん：はーいー。ありましたよー。どうぞー。キャッチボールを何度も、何度も行います。12 #singtacks supported by

インターネットを理解する• たくさんの情報を要求して、貰って、ブラウザが解読して、ひとつのページを見ることが出来ます。色々な要素が組み合わさって、ひとつのページが作られています13 #singtacks supported by

インターネットを理解する• その上で、高速化とは？ – 1セットのキャッチボールが早く終わったら良い。 • ただそれだけ。 – キャッチボールが早く終わるコツは？ • 回数が少なければ少ない方が良い。 • 投げ合うボールが軽ければ軽い方が良い。 – 軽すぎると空気抵抗が。。。という苦情は受付かねます。。 • 二人距離が近ければ近い方が良い。14 #singtacks supported by

インターネットを理解する• ようするに – 少ない – 軽い – 近いこれが全てです。この知識を持って、Let’s 高速化！行ってみましょう。15 #singtacks supported by

#2 高速化する3つ＋αの観点16 #singtacks supported by

高速化する3つ＋αの観点• 先ほど話したことのおさらい – 少ない – 軽い – 近い – これを具体的に分解してみましょう • ここからはちょっとエンジニアリングっぽくしてみます。17 #singtacks supported by

高速化する3つ＋αの観点• ちょっと全体理解 – Webシステム全体概要はなんとなくこんな感じ • たくさんキャッチボールしてそうですねー。18 #singtacks supported by

高速化する3つ＋αの観点• 「キャッチボールの回数を少なくする」 – ひとつのWebページ（HTML）が沢山のファイルを読み込もうとすると回数が増える • 例えばどんなファイル？ – 画像 – CSS – JavaScript – その他（動画ファイルなど） – ようするに、読み込むファイルが少なければ良い！19 #singtacks supported by

高速化する3つ＋αの観点• 「それぞれのボールが軽ければ良い」 • 正直、重いものを投げるって大変ですよね。。。 – ようするに、それぞれのファイルを軽くすれば良い！20 #singtacks supported by

高速化する3つ＋αの観点• 「キャッチボールの距離を近くする」 • 近い方が早くボールを受け渡せそうです。 – ようするに、サーバまでの距離が近い方が良い！ • 実際にはこの考え方は難しいので、現時点ではLANケーブルの長さが短ければ短い方が良い、くらいのイメージを持っていてください。21 #singtacks supported by

高速化する3つ＋αの観点• 「＋α」の観点 – キャッチボールはあくまでも情報の受け渡し • キャッチボールが終わっても表示されていませんね。 – ブラウザが情報を組み立て「表示する」処理がある • 実際はHTML/CSS/JavaScriptの書き方で、早く表示するための観点は色々あるが、今回は割愛 • ブラウザの性質を利用して「早く表示されているように体感させる」方法に今回はフォーカスします。22 #singtacks supported by

#3 現場で使える「表示速度」高速化23 #singtacks supported by

現場で使える「表示速度」高速化• gzip圧縮（DEFLATE）効果大きいコスト施策自体は小さい観点「軽い」オススメ度 ★★★★★ – テキスト情報をサーバ側で圧縮する • Zip圧縮してメール送信するような感じ – 70〜90%くらいサイズを小さくできる • 効果絶大 – Apacheなどのサーバ設定だけで施策可能24 #singtacks supported by

現場で使える「表示速度」高速化• gzip圧縮（DEFLATE） – 具体的な設定例（Apache/httpd.conf） AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript DeflateCompressionLevel 9 #Skip browsers with known problems BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html25 #singtacks supported by

現場で使える「表示速度」高速化• CSSスプライト効果大きいコスト大きい（制作コストが上がる）観点「少ない」「軽い」オススメ度 ★★★☆☆ – 複数の画像を1枚に統合してファイル数を少なくする • 個別画像の表示はCSSでポジション指定 – 100ファイルを5〜10ファイル程度の削減可能 • 効果絶大 – 制作コスト（技術力）が必要になる26 #singtacks supported by

現場で使える「表示速度」高速化• Google – 右のように画像を1枚にまとめている – CSSで画像内の座標指定可能 • 個別の画像のように表示できる• 上手くまとめるにはスキルが必要 – CSSスプライト設計と呼んだりします • 自動でまとめ画像を作るツールもあります • http://ja.spritegen.website-performance.org/ – シンプルなサイトには利用価値あり！ – CSSも一緒に出力してくれます27 #singtacks supported by

現場で使える「表示速度」高速化• CDN（Contents Delivery Network）効果大きいコスト中くらい（お金がかかる）観点「近い」オススメ度 ★★★★☆ – 特に画像ファイルを、うまーくユーザの近くにコピーしておいてくれて、すぐ表示してくれるサービス – 基本的にレンタルサーバみたいなものと同じで、業者にお金を払って使うサービスになる – 難しく言うとキャッシュサーバ28 #singtacks supported by

現場で使える「表示速度」高速化• CDNのイメージ – 世界中のいたるところに自動的にコピーしといてくれるサーバがあるイメージ29 #singtacks supported by

現場で使える「表示速度」高速化• CDNサービス業者 – AWS（CloudFront）※お手軽、安価に始められる – Akamai – Limelight Networks • 世界的に有名な2社、老舗。 • 契約するには100万単位になるので個人では辛い。30 #singtacks supported by

現場で使える「表示速度」高速化• 世界展開しなくても – 今のイメージだと日本国内のサービスでは意味無さそうに見えますが、それは違います。 • 例えば – OCNの契約の人は、同じOCN回線で契約しているサーバはすごく「近い」距離にある、と言える。 • 物理的に光信号が通る道筋の距離が短いと、やっぱり速い。 – CDNはキャッシュサーバが沢山、いろんなところにあったりするので、国内でも速い。 • あとは自分のサーバの負荷が減ります。31 #singtacks supported by

現場で使える「表示速度」高速化• ルクサ（LUXA） – 画像の多いEC系サイトは効果大 • ルクサはCDNが無いと負荷的にも相当辛くなります。 • ルクサにおいてCDNは最強の高速化施策です。32 #singtacks supported by

#4 現場で使える「体感速度」高速化33 #singtacks supported by

現場で使える「体感速度」高速化• 体感速度の高速化？ • 人って、錯覚する生き物なんです。 – 「早く表示しているように見える」 • それだけで、結構充分なんですね。 • 表示処理が続いているんだけど、先に見える分だけ見せといてあげる、的なことが出来れば満足してくれる。 – だから、「体感速度」の高速化も大事。 • 僕は「UX高速化」と勝手に呼んだりしてます。34 #singtacks supported by

現場で使える「体感速度」高速化• <script>タグを一番下に持ってくる効果場合によっては大きいコスト極小観点「＋α」オススメ度 ★★★★★ – JavaScriptは「表示処理の天敵」 • 遅いJavaScriptがあると表示処理が全部ストップする！ – 一番下に置いておけば、ブラウザは取りあえず先に表示してからJavaScriptを実行してくれる – トラッキング系のスクリプトが多い場合はやや注意 • 口頭でお話しますね。35 #singtacks supported by

現場で使える「体感速度」高速化• 具体的にはこんな感じ – HTMLファイルの例 <html> <head> : </head> <body> <div> : </div> <script ... /> <script ... /> <script ... /> </body> </html>36 #singtacks supported by

現場で使える「体感速度」高速化• <link>タグを<head>タグの中に持ってくる効果たいして無いコスト極小観点「＋α」オススメ度 ★★★★★（？） – CSSは<head>内に定義することで最も高速表示する • 非常に基本的なことなのでやってないことが少ない – なので、効果は薄いと思われる。 – 間違って変なところに定義してないか、確認する。 • くらいのイメージで充分。37 #singtacks supported by

現場で使える「体感速度」高速化• 具体的にはこんな感じ – HTMLファイルの例 <html> <head> : <link ... /> <link ... /> </head> <body> <div> : </div> <script ... /> </body> </html>38 #singtacks supported by

現場で使える「体感速度」高速化• 404エラーを無くす効果意外とあるコスト少ないはず観点「＋α」オススメ度 ★★★★★ – 長年メンテナンスしているページは意外と多い • JavaScriptが無くなっているとか、画像が無いとか、何百ファイルも読み込んでいるページには、1,2個存在しないファイルを読み込もうとしている場合がある。 • タイムアウト待ちとかで表示処理が停滞することもある – Yslow/Firebugとかで見れば一目瞭然39 #singtacks supported by

#5 HTML5/スマホ時代の高速化40 #singtacks supported by

HTML5/スマホ時代の高速化• 「スマホ」をどう捉えるか？ – PCと比較して • CPU/GPU含めて処理性能は基本的に劣る • ネットワークは無線ベースのため、基本遅い • 通信状況の影響も受けるため、ネットワークは常に不安定 – ガラケーと比較して • 表現方法の幅が広がり、ページあたりの容量が増大 • 容量の増大と比較して、性能、帯域の増強は鈍い – 基本的に技術は常に限界を突破しようとする • 常に高速化を考えていることに損は無い。41 #singtacks supported by

HTML5/スマホ時代の高速化• HTML5時代を最大限活用する – デザインに画像を使用する時代の終焉 • CSS3による表現方法の多様化 – 角丸の表現可能 – 透過の表現可能（簡易になった） • JavaScriptのcanvasによる描写表現の広がり – JavaScriptで普通に絵が描ける時代になった » ただし、JSの処理コストも掛かるため、乱用はむしろ高速化を阻害する可能性もアリ • SVGによるグラフィック表現 – ピクトやアイコンなどの表現をSVGへ。 » テキストデータなので非常に軽い42 #singtacks supported by

HTML5/スマホ時代の高速化• CSS3を利用した角丸、グラデーション表現 • これからは、CSS3で表現するのが当たり前の時代。43 #singtacks supported by

HTML5/スマホ時代の高速化• グラフィックスはSVGへ • テキストデータなのでGzip圧縮も可能！44 #singtacks supported by

#6 実際に見てみよう45 #singtacks supported by

実際に見てみよう• せっかくなので、僕に関係あるサイトを見てみましょう • 良いところも、悪いところも解説しながら – ビズリーチ • http://www.bizreach.jp/ – LUXA • http://luxa.jp/ – レイハウオリ • http://www.leihauoli.com/46 #singtacks supported by

ご清聴ありがとうございました47 #singtacks supported by

質疑応答この本の特集でもっと詳しく書いてるよ。 http://gihyo.jp/magazine/wdpress/archive/2010/vol5948 #singtacks supported by

了。ありがとうございました。49 #singtacks supported by

Movatterモバイル変換

Change Language

マルチデバイス時代の高速化

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to マルチデバイス時代の高速化

More from Shin Takeuchi

マルチデバイス時代の高速化