Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UXを向上させる サイト高速化テクニック
Search
泰 昌平@ShoheiTai
December 10, 2015
Programming
0
100
UXを向上させる サイト高速化テクニック
第三回 集まっtail LT:5分
ユーザの体感速度を向上させるための、Webサイト高速化テクニックについて。UXに着目した高速化手法です。
泰 昌平@ShoheiTai
December 10, 2015
Tweet
Share
More Decks by 泰 昌平@ShoheiTai
See All by 泰 昌平@ShoheiTai
DX企業CTOとして考える技術への向き合い方
shoheitai
0
460
LT20回以上やって、やっと学んだLTの技術
shoheitai
1
100
WSOの現状とすすめかた
shoheitai
0
640
今こそ始めるWSO - Web高速化の現状と対策テクニック
shoheitai
2
780
“超効率化” で生き残る 2018 #innocafe
shoheitai
2
310
LTを続けてLT文化の素晴らしさを感じた話 #集まっtail
shoheitai
1
5.2k
Drupal8のConfigurationManagementで心が折れた話 #drupalstudy
shoheitai
1
510
もうこわくない!エンジニアを巻き込むコミュニケーション #PRLT
shoheitai
3
3k
macbookでteratailの秒速回答を目指す - Electron + Node.js #集まっtail
shoheitai
1
1.2k
Other Decks in Programming
See All in Programming
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
CSC307 Lecture 14
javiergs
PRO
0
220
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
CSC307 Lecture 08
javiergs
PRO
0
330
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
生成AIをkintoneに連携してみた
hideg
0
230
小さな開発会社を作った理由
polidog
0
1.9k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Being A Developer After 40
akosma
72
580k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Why Our Code Smells
bkeepers
PRO
332
56k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Speed Design
sergeychernyshev
9
270
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Building Adaptive Systems
keathley
34
2k
Designing Experiences People Love
moore
136
23k
Transcript
UXを向上させる サイト高速化テクニック 泰昌平 (@stai0823)
自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ・CakePHPとPhalconをやっています ・フロントのjavascriptが大好物 ・ダーツとバイクが好き
今日のお話
「UXを向上させる高速化」
今日お話しすることは ・全体のリクエスト、サイズを減らすとかいう話ではない。 ・必ずしもGTmetrixのスコアが上がるような施策とは限らない。 ・ユーザに速度面でのストレスを軽減するテクニック。 ユーザの「体感速度」を高める
ユーザの「体感速度」を向上させるキーワード 「遅延ロード」と「プリロード」
キーワード1 「遅延ロード」
・読み込みに時間がかかったり、レンダリングブロックの原因と なるリソースは遅延ロードする。 ・jsを動的に追加したり、Ajaxで後から読み込ませたり・・。 遅延ロード →読み込むリソースに手を加えず、 ユーザの体感速度を向上させることができる。
None
遅延ロードが有効な事例
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="http://www.googletagmanager.com"> <title>プリコネクト</title>
</head> 書き方
リソースを複数ドメインから 読み込んでいる場合に効果的。
リソースのプリフェッチ - prefetch -
リソースのプリフェッチ ・次のページで利用するリソースを事前に読み込むことができる。 ・CSSやJS、画像ファイルなど静的なリソースを読み込める。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
<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> 書き方
画像やWebフォントも事前に読み込めるので 表示のもたつきが軽減されます。
ページのプリレンダリング - prerender -
ページのプリレンダリング ・指定したページを事前に読み込み、レンダリングする。 ・事前読み込みされたページへ遷移すると一瞬で表示される。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
<head> <meta charset="UTF-8"> <link rel="prerender" href="http://example.com/nextpage"> <title>prerenderによる事前レンダリング</title> </head> 書き方
Chromeのタスクマネージャー
ユーザの行動が予測できる導線であれば AjaxやPjaxに負けない パフォーマンスを引き出せます。
プリレンダリングを使う上での注意
・バックグラウンドで通信とレンダリングが行われるため、 クライアント・サーバ両方に負荷がかかる。 ・むやみやたらに使っても、事前レンダリングされたページに遷 移しないと意味が無い。 使いすぎは非常に危険
ここまで ユーザの「体感速度」を向上させる 高速化施策をご紹介しました。
遅延ロードとプリロードを 上手く使って快適な Webサイトを作っていきましょう
ご清聴ありがとうございました