Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UXを向上させる
サイト高速化テクニック
泰昌平 (@stai0823)
自己紹介
泰 昌平
ファンチーム株式会社 Webエンジニア
・CakePHPとPhalconをやっています
・フロントのjavascriptが大好物
・ダーツとバイクが好き
今日のお話
「UXを向上させる高速化」
今日お話しすることは
・全体のリクエスト、サイズを減らすとかいう話ではない。
・必ずしもGTmetrixのスコアが上がるような施策とは限らない。
・ユーザに速度面でのストレスを軽減するテクニック。
ユーザの「体感速度」を高める
ユーザの「体感速度」を向上させるキーワード
「遅延ロード」と「プリロード」
キーワード1
「遅延ロード」
・読み込みに時間がかかったり、レンダリングブロックの原因と
なるリソースは遅延ロードする。
・jsを動的に追加したり、Ajaxで後から読み込ませたり・・。
遅延ロード
→読み込むリソースに手を加えず、
ユーザの体感速度を向上させることができる。
遅延ロードが有効な事例
https://teratail.com/questions/9137
ベストアンサー
・「jQuery Lazy Load」や「Unveil.js」で遅延ロードは
 比較的簡単に実装できる。
・ページ読み込み時はリクエスト数がかなり削減できるので
GTmetrixのスコア改善にも繋がる
画像の遅延ロード
キーワード2
「プリロード」
・読み込みに時間がかかったり、レンダリングブロックの原因と
なるリソースは先に読み込んでしまう。
・ユーザの行動を予測し、事前に処理を行う。
プリロード
→実装次第で遅延ロードよりも高速化を図ることができ、
ユーザの体感速度を向上に繋がる。
プリロードを実現する方法を
いくつかご紹介します。
サーバへのプリコネクト
- preconnect -
通信先へのプリコネクト
・読み込み先のサーバへ事前に接続しに行く。
・HEADタグの上部にpreconnect用のタグを埋め込む。
・事前に名前解決を行う「dns-prefech」のもう一歩先!
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="http://www.google-analytics.com">
<link rel="preconnect" href="...
リソースを複数ドメインから
読み込んでいる場合に効果的。
リソースのプリフェッチ
- prefetch -
リソースのプリフェッチ
・次のページで利用するリソースを事前に読み込むことができる。
・CSSやJS、画像ファイルなど静的なリソースを読み込める。
・ただし、ユーザの行動を予測し予め設定する必要がある。
<head>
<meta charset="UTF-8">
<!-- 次のページで使用する画像やCSSなどを事前に読み込ませる -->
<link rel="prefetch" href="http://example.com/css/styl...
画像やWebフォントも事前に読み込めるので
表示のもたつきが軽減されます。
ページのプリレンダリング
- prerender -
ページのプリレンダリング
・指定したページを事前に読み込み、レンダリングする。
・事前読み込みされたページへ遷移すると一瞬で表示される。
・ただし、ユーザの行動を予測し予め設定する必要がある。
<head>
<meta charset="UTF-8">
<link rel="prerender" href="http://example.com/nextpage">
<title>prerenderによる事前レンダリング</title...
Chromeのタスクマネージャー
ユーザの行動が予測できる導線であれば
AjaxやPjaxに負けない
パフォーマンスを引き出せます。
プリレンダリングを使う上での注意
・バックグラウンドで通信とレンダリングが行われるため、
クライアント・サーバ両方に負荷がかかる。
・むやみやたらに使っても、事前レンダリングされたページに遷
移しないと意味が無い。
使いすぎは非常に危険
ここまで
ユーザの「体感速度」を向上させる
高速化施策をご紹介しました。
遅延ロードとプリロードを
上手く使って快適な
Webサイトを作っていきましょう
ご清聴ありがとうございました
UXを向上させる サイト高速化テクニック
Upcoming SlideShare
Loading in …5
×

UXを向上させる サイト高速化テクニック

11,314 views

Published on

第3回 teratail Meetup "集まっtail"のLTスライドです。
ユーザの体感速度を向上させるための、Webサイト高速化テクニックをご紹介しています。

Published in: Technology
  • Be the first to comment

UXを向上させる サイト高速化テクニック

  1. 1. UXを向上させる サイト高速化テクニック 泰昌平 (@stai0823)
  2. 2. 自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ・CakePHPとPhalconをやっています ・フロントのjavascriptが大好物 ・ダーツとバイクが好き
  3. 3. 今日のお話
  4. 4. 「UXを向上させる高速化」
  5. 5. 今日お話しすることは ・全体のリクエスト、サイズを減らすとかいう話ではない。 ・必ずしもGTmetrixのスコアが上がるような施策とは限らない。 ・ユーザに速度面でのストレスを軽減するテクニック。 ユーザの「体感速度」を高める
  6. 6. ユーザの「体感速度」を向上させるキーワード 「遅延ロード」と「プリロード」
  7. 7. キーワード1 「遅延ロード」
  8. 8. ・読み込みに時間がかかったり、レンダリングブロックの原因と なるリソースは遅延ロードする。 ・jsを動的に追加したり、Ajaxで後から読み込ませたり・・。 遅延ロード →読み込むリソースに手を加えず、 ユーザの体感速度を向上させることができる。
  9. 9. 遅延ロードが有効な事例
  10. 10. https://teratail.com/questions/9137
  11. 11. ベストアンサー
  12. 12. ・「jQuery Lazy Load」や「Unveil.js」で遅延ロードは  比較的簡単に実装できる。 ・ページ読み込み時はリクエスト数がかなり削減できるので GTmetrixのスコア改善にも繋がる 画像の遅延ロード
  13. 13. キーワード2 「プリロード」
  14. 14. ・読み込みに時間がかかったり、レンダリングブロックの原因と なるリソースは先に読み込んでしまう。 ・ユーザの行動を予測し、事前に処理を行う。 プリロード →実装次第で遅延ロードよりも高速化を図ることができ、 ユーザの体感速度を向上に繋がる。
  15. 15. プリロードを実現する方法を いくつかご紹介します。
  16. 16. サーバへのプリコネクト - preconnect -
  17. 17. 通信先へのプリコネクト ・読み込み先のサーバへ事前に接続しに行く。 ・HEADタグの上部にpreconnect用のタグを埋め込む。 ・事前に名前解決を行う「dns-prefech」のもう一歩先!
  18. 18. <head> <meta charset="UTF-8"> <link rel="preconnect" href="http://www.google-analytics.com"> <link rel="preconnect" href="http://www.googletagmanager.com"> <title>プリコネクト</title> </head> 書き方
  19. 19. リソースを複数ドメインから 読み込んでいる場合に効果的。
  20. 20. リソースのプリフェッチ - prefetch -
  21. 21. リソースのプリフェッチ ・次のページで利用するリソースを事前に読み込むことができる。 ・CSSやJS、画像ファイルなど静的なリソースを読み込める。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
  22. 22. <head> <meta charset="UTF-8"> <!-- 次のページで使用する画像やCSSなどを事前に読み込ませる --> <link rel="prefetch" href="http://example.com/css/style.css"> <link rel="prefetch" href="http://example.com/logo.png"> <title>プリフェッチ</title> </head> 書き方
  23. 23. 画像やWebフォントも事前に読み込めるので 表示のもたつきが軽減されます。
  24. 24. ページのプリレンダリング - prerender -
  25. 25. ページのプリレンダリング ・指定したページを事前に読み込み、レンダリングする。 ・事前読み込みされたページへ遷移すると一瞬で表示される。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
  26. 26. <head> <meta charset="UTF-8"> <link rel="prerender" href="http://example.com/nextpage"> <title>prerenderによる事前レンダリング</title> </head> 書き方
  27. 27. Chromeのタスクマネージャー
  28. 28. ユーザの行動が予測できる導線であれば AjaxやPjaxに負けない パフォーマンスを引き出せます。
  29. 29. プリレンダリングを使う上での注意
  30. 30. ・バックグラウンドで通信とレンダリングが行われるため、 クライアント・サーバ両方に負荷がかかる。 ・むやみやたらに使っても、事前レンダリングされたページに遷 移しないと意味が無い。 使いすぎは非常に危険
  31. 31. ここまで ユーザの「体感速度」を向上させる 高速化施策をご紹介しました。
  32. 32. 遅延ロードとプリロードを 上手く使って快適な Webサイトを作っていきましょう
  33. 33. ご清聴ありがとうございました

×