Enviar pesquisa
Carregar
UXを向上させる サイト高速化テクニック
•
3 gostaram
•
12,144 visualizações
Shohei Tai
Seguir
第3回 teratail Meetup "集まっtail"のLTスライドです。 ユーザの体感速度を向上させるための、Webサイト高速化テクニックをご紹介しています。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 34
Baixar agora
Baixar para ler offline
Recomendados
Web表示速度とgtmetrixスコアの矛盾
Web表示速度とgtmetrixスコアの矛盾
Katsuhisa Ogawa
5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化
Shohei Tai
Cache 自由自在
Cache 自由自在
Ryu Shindo
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?
Takayuki Miyauchi
「コーポレートサイトにちょうどいい」CakePHPベースの国産CMS「baserCMS」 - ここがちょうどいい機能(OSC2015大分)
「コーポレートサイトにちょうどいい」CakePHPベースの国産CMS「baserCMS」 - ここがちょうどいい機能(OSC2015大分)
Takayuki Gondoh
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
Recomendados
Web表示速度とgtmetrixスコアの矛盾
Web表示速度とgtmetrixスコアの矛盾
Katsuhisa Ogawa
5分で詰め込む フロントエンド最適化
5分で詰め込む フロントエンド最適化
Shohei Tai
Cache 自由自在
Cache 自由自在
Ryu Shindo
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
え?まだMAMPで消耗してんの?
え?まだMAMPで消耗してんの?
Takayuki Miyauchi
「コーポレートサイトにちょうどいい」CakePHPベースの国産CMS「baserCMS」 - ここがちょうどいい機能(OSC2015大分)
「コーポレートサイトにちょうどいい」CakePHPベースの国産CMS「baserCMS」 - ここがちょうどいい機能(OSC2015大分)
Takayuki Gondoh
スマホフロントエンド最速化手法
スマホフロントエンド最速化手法
zaru sakuraba
PWA aruaru
PWA aruaru
n_harada
Google AMP (Accelerated Mobile Pages) を纏めてみた
Google AMP (Accelerated Mobile Pages) を纏めてみた
i3DESIGN Co., Ltd.
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
bitbank, Inc. Tokyo, Japan
123 mapsでのgasの活用
123 mapsでのgasの活用
Junya Sato
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Webアプリの向こうに見えるPWAアプリ開発
Webアプリの向こうに見えるPWAアプリ開発
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
Takamasa Maeda
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
Web体験を向上させるcdnと表示速度の重要性
Web体験を向上させるcdnと表示速度の重要性
Katsuhisa Ogawa
JSON吸って吐く機械
JSON吸って吐く機械
youten (ようてん)
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
WheetTweet
Wordvolcano
Wordvolcano
Hiromichi Koga
Learn vue.js
Learn vue.js
yuxiang21
HTML5最前線
HTML5最前線
Fumio SAGAWA
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
Akira Maruyama
PWAがOculus Storeに配信できるようになる
PWAがOculus Storeに配信できるようになる
TAM
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
ourmaninjapan
WebVRの可能性.pptx
WebVRの可能性.pptx
Koichiro Nishigai
Night Hack LT
Night Hack LT
Daigaku Ando
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Async flow controll basic and practice
Async flow controll basic and practice
Masakazu Muraoka
Mais conteúdo relacionado
Mais procurados
PWA aruaru
PWA aruaru
n_harada
Google AMP (Accelerated Mobile Pages) を纏めてみた
Google AMP (Accelerated Mobile Pages) を纏めてみた
i3DESIGN Co., Ltd.
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
bitbank, Inc. Tokyo, Japan
123 mapsでのgasの活用
123 mapsでのgasの活用
Junya Sato
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Webアプリの向こうに見えるPWAアプリ開発
Webアプリの向こうに見えるPWAアプリ開発
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
Takamasa Maeda
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
Web体験を向上させるcdnと表示速度の重要性
Web体験を向上させるcdnと表示速度の重要性
Katsuhisa Ogawa
JSON吸って吐く機械
JSON吸って吐く機械
youten (ようてん)
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
WheetTweet
Wordvolcano
Wordvolcano
Hiromichi Koga
Learn vue.js
Learn vue.js
yuxiang21
HTML5最前線
HTML5最前線
Fumio SAGAWA
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
Akira Maruyama
PWAがOculus Storeに配信できるようになる
PWAがOculus Storeに配信できるようになる
TAM
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
ourmaninjapan
WebVRの可能性.pptx
WebVRの可能性.pptx
Koichiro Nishigai
Night Hack LT
Night Hack LT
Daigaku Ando
Mais procurados
(20)
PWA aruaru
PWA aruaru
Google AMP (Accelerated Mobile Pages) を纏めてみた
Google AMP (Accelerated Mobile Pages) を纏めてみた
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
123 mapsでのgasの活用
123 mapsでのgasの活用
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Webアプリの向こうに見えるPWAアプリ開発
Webアプリの向こうに見えるPWAアプリ開発
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Web体験を向上させるcdnと表示速度の重要性
Web体験を向上させるcdnと表示速度の重要性
JSON吸って吐く機械
JSON吸って吐く機械
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
PWAを使ってWebXRコンテンツをオフラインで動くようにする手順について
Wordvolcano
Wordvolcano
Learn vue.js
Learn vue.js
HTML5最前線
HTML5最前線
ngJapan報告会
ngJapan報告会
設定のカスタマイズで まだまだ使える Dreamweaver
設定のカスタマイズで まだまだ使える Dreamweaver
PWAがOculus Storeに配信できるようになる
PWAがOculus Storeに配信できるようになる
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
WebVRの可能性.pptx
WebVRの可能性.pptx
Night Hack LT
Night Hack LT
Semelhante a UXを向上させる サイト高速化テクニック
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Async flow controll basic and practice
Async flow controll basic and practice
Masakazu Muraoka
AZAREA-Clusterセミナー(クラウドEXPO2013春)
AZAREA-Clusterセミナー(クラウドEXPO2013春)
AzareaCluster
レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
Yoichiro Takehora
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
Eiji Kodama
高速化はじめの一歩
高速化はじめの一歩
Yuki Nakane
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
Azure PaaSを活用したモダン E コマースソリューションの構築方法
Azure PaaSを活用したモダン E コマースソリューションの構築方法
Yoichi Kawasaki
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
tama200x Kobayashi
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
The Next PowerCMS
The Next PowerCMS
純生 野田
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
taiju higashi
CIサーバを制圧せよ! - プロジェクトメトリクスと自動化技術の活用よる混乱の収拾と「最強」の組織の育成
CIサーバを制圧せよ! - プロジェクトメトリクスと自動化技術の活用よる混乱の収拾と「最強」の組織の育成
Rakuten Group, Inc.
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Masakazu Muraoka
Cloudflareを活用したWebパフォーマンスチューニング
Cloudflareを活用したWebパフォーマンスチューニング
Yoichiro Takehora
PHP-Ninjaの裏側
PHP-Ninjaの裏側
Takayuki Miyauchi
Semelhante a UXを向上させる サイト高速化テクニック
(20)
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
Async flow controll basic and practice
Async flow controll basic and practice
AZAREA-Clusterセミナー(クラウドEXPO2013春)
AZAREA-Clusterセミナー(クラウドEXPO2013春)
レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
レスポンシブデザイン前提のWordPressの表示速度高速化の考え方
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
高速化はじめの一歩
高速化はじめの一歩
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Azure PaaSを活用したモダン E コマースソリューションの構築方法
Azure PaaSを活用したモダン E コマースソリューションの構築方法
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
The Next PowerCMS
The Next PowerCMS
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
マルチデバイス時代の高速化
マルチデバイス時代の高速化
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
CIサーバを制圧せよ! - プロジェクトメトリクスと自動化技術の活用よる混乱の収拾と「最強」の組織の育成
CIサーバを制圧せよ! - プロジェクトメトリクスと自動化技術の活用よる混乱の収拾と「最強」の組織の育成
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Cloudflareを活用したWebパフォーマンスチューニング
Cloudflareを活用したWebパフォーマンスチューニング
PHP-Ninjaの裏側
PHP-Ninjaの裏側
Mais de Shohei Tai
teratailで秒速回答を目指す - GoogleAppsScript + SlackWebhook
teratailで秒速回答を目指す - GoogleAppsScript + SlackWebhook
Shohei Tai
Webエンジニアが初めて機械学習に触れてみた話
Webエンジニアが初めて機械学習に触れてみた話
Shohei Tai
HTML5でteratailが喋った!
HTML5でteratailが喋った!
Shohei Tai
久しぶりのPythonでgoogleのアレを制御してみた
久しぶりのPythonでgoogleのアレを制御してみた
Shohei Tai
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
Shohei Tai
5分でわかるPhalconPHP
5分でわかるPhalconPHP
Shohei Tai
Mais de Shohei Tai
(6)
teratailで秒速回答を目指す - GoogleAppsScript + SlackWebhook
teratailで秒速回答を目指す - GoogleAppsScript + SlackWebhook
Webエンジニアが初めて機械学習に触れてみた話
Webエンジニアが初めて機械学習に触れてみた話
HTML5でteratailが喋った!
HTML5でteratailが喋った!
久しぶりのPythonでgoogleのアレを制御してみた
久しぶりのPythonでgoogleのアレを制御してみた
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
5分でわかるPhalconPHP
5分でわかるPhalconPHP
Último
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(7)
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
UXを向上させる サイト高速化テクニック
1.
UXを向上させる サイト高速化テクニック 泰昌平 (@stai0823)
2.
自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ・CakePHPとPhalconをやっています ・フロントのjavascriptが大好物 ・ダーツとバイクが好き
3.
今日のお話
4.
「UXを向上させる高速化」
5.
今日お話しすることは ・全体のリクエスト、サイズを減らすとかいう話ではない。 ・必ずしもGTmetrixのスコアが上がるような施策とは限らない。 ・ユーザに速度面でのストレスを軽減するテクニック。 ユーザの「体感速度」を高める
6.
ユーザの「体感速度」を向上させるキーワード 「遅延ロード」と「プリロード」
7.
キーワード1 「遅延ロード」
8.
・読み込みに時間がかかったり、レンダリングブロックの原因と なるリソースは遅延ロードする。 ・jsを動的に追加したり、Ajaxで後から読み込ませたり・・。 遅延ロード →読み込むリソースに手を加えず、 ユーザの体感速度を向上させることができる。
9.
10.
遅延ロードが有効な事例
11.
https://teratail.com/questions/9137
12.
ベストアンサー
13.
・「jQuery Lazy Load」や「Unveil.js」で遅延ロードは 比較的簡単に実装できる。 ・ページ読み込み時はリクエスト数がかなり削減できるので GTmetrixのスコア改善にも繋がる 画像の遅延ロード
14.
キーワード2 「プリロード」
15.
・読み込みに時間がかかったり、レンダリングブロックの原因と なるリソースは先に読み込んでしまう。 ・ユーザの行動を予測し、事前に処理を行う。 プリロード →実装次第で遅延ロードよりも高速化を図ることができ、 ユーザの体感速度を向上に繋がる。
16.
プリロードを実現する方法を いくつかご紹介します。
17.
サーバへのプリコネクト - preconnect -
18.
通信先へのプリコネクト ・読み込み先のサーバへ事前に接続しに行く。 ・HEADタグの上部にpreconnect用のタグを埋め込む。 ・事前に名前解決を行う「dns-prefech」のもう一歩先!
19.
<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> 書き方
20.
リソースを複数ドメインから 読み込んでいる場合に効果的。
21.
リソースのプリフェッチ - prefetch -
22.
リソースのプリフェッチ ・次のページで利用するリソースを事前に読み込むことができる。 ・CSSやJS、画像ファイルなど静的なリソースを読み込める。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
23.
<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> 書き方
24.
画像やWebフォントも事前に読み込めるので 表示のもたつきが軽減されます。
25.
ページのプリレンダリング - prerender -
26.
ページのプリレンダリング ・指定したページを事前に読み込み、レンダリングする。 ・事前読み込みされたページへ遷移すると一瞬で表示される。 ・ただし、ユーザの行動を予測し予め設定する必要がある。
27.
<head> <meta charset="UTF-8"> <link rel="prerender"
href="http://example.com/nextpage"> <title>prerenderによる事前レンダリング</title> </head> 書き方
28.
Chromeのタスクマネージャー
29.
ユーザの行動が予測できる導線であれば AjaxやPjaxに負けない パフォーマンスを引き出せます。
30.
プリレンダリングを使う上での注意
31.
・バックグラウンドで通信とレンダリングが行われるため、 クライアント・サーバ両方に負荷がかかる。 ・むやみやたらに使っても、事前レンダリングされたページに遷 移しないと意味が無い。 使いすぎは非常に危険
32.
ここまで ユーザの「体感速度」を向上させる 高速化施策をご紹介しました。
33.
遅延ロードとプリロードを 上手く使って快適な Webサイトを作っていきましょう
34.
ご清聴ありがとうございました
Baixar agora