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

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>

<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>
<link rel="prerender" href="http://example.com/nextpage">
<title>prerenderによる事前レンダリング</title>
</head>
書き方

Chromeのタスクマネージャー

ユーザの行動が予測できる導線であれば
AjaxやPjaxに負けない
パフォーマンスを引き出せます。

プリレンダリングを使う上での注意

・バックグラウンドで通信とレンダリングが行われるため、
クライアント・サーバ両方に負荷がかかる。
・むやみやたらに使っても、事前レンダリングされたページに遷
移しないと意味が無い。
使いすぎは非常に危険

ここまで
ユーザの「体感速度」を向上させる
高速化施策をご紹介しました。

遅延ロードとプリロードを
上手く使って快適な
Webサイトを作っていきましょう

ご清聴ありがとうございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to UXを向上させるサイト高速化テクニック (20)

More from Shohei Tai

More from Shohei Tai (6)