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> <meta charset="UTF-8">  <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サイトを作っていきましょう

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

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

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

泰昌平@ShoheiTai

More Decks by 泰昌平@ShoheiTai

Other Decks in Programming

Featured

Transcript