uxを向上させる サイト高速化テクニック
TRANSCRIPT
UXを向上させるサイト高速化テクニック
泰昌平 (@stai0823)
自己紹介
泰 昌平ファンチーム株式会社 Webエンジニア
・CakePHPとPhalconをやっています
・フロントのjavascriptが大好物
・ダーツとバイクが好き
今日のお話
「UXを向上させる高速化」
今日お話しすることは
・全体のリクエスト、サイズを減らすとかいう話ではない。
・必ずしもGTmetrixのスコアが上がるような施策とは限らない。
・ユーザに速度面でのストレスを軽減するテクニック。
ユーザの「体感速度」を高める
ユーザの「体感速度」を向上させるキーワード
「遅延ロード」と「プリロード」
キーワード１
「遅延ロード」
・読み込みに時間がかかったり、レンダリングブロックの原因と
なるリソースは遅延ロードする。
・jsを動的に追加したり、Ajaxで後から読み込ませたり・・。
遅延ロード
→読み込むリソースに手を加えず、
ユーザの体感速度を向上させることができる。
遅延ロードが有効な事例
https://teratail.com/questions/9137
ベストアンサー
・「jQuery Lazy Load」や「Unveil.js」で遅延ロードは
比較的簡単に実装できる。
・ページ読み込み時はリクエスト数がかなり削減できるので
GTmetrixのスコア改善にも繋がる
画像の遅延ロード
キーワード２
「プリロード」
・読み込みに時間がかかったり、レンダリングブロックの原因と
なるリソースは先に読み込んでしまう。
・ユーザの行動を予測し、事前に処理を行う。
プリロード
→実装次第で遅延ロードよりも高速化を図ることができ、
ユーザの体感速度を向上に繋がる。
プリロードを実現する方法をいくつかご紹介します。
サーバへのプリコネクト- 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サイトを作っていきましょう
ご清聴ありがとうございました