Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
PRO
November 11, 2021
Technology
0
86
比較サイトの検索改善(SPA から SSR に変換)
GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/Session-3
gree_tech
PRO
November 11, 2021
Tweet
Share
More Decks by gree_tech
See All by gree_tech
基調講演-サステナブルなチームであるために-
gree_tech
PRO
0
290
クリエイターツール「QUANT」の開発の話 & クライアントに寄り添ったデータ分析基盤の構築
gree_tech
PRO
0
220
爆速で成長するおでかけ情報サービスの成長を支えるデザインと開発の取り組みについて
gree_tech
PRO
0
360
グリーの新卒1年目が半年間働いて感じたグリーのカルチャー 〜新卒でもこんなに任せて貰えるんですか!?〜
gree_tech
PRO
0
360
クラウド - オンプレ間の通信品質向上作戦!〜ネットワーク編〜
gree_tech
PRO
0
200
よくわかる!「データアナリスト」の作り方 〜とある新卒の成長物語〜
gree_tech
PRO
0
420
事業環境の変化に対応するインフラ組織 その取り組みと現状
gree_tech
PRO
0
280
簡単!Slack+GAS+GCPでIT棚卸自動化
gree_tech
PRO
0
260
GREE VR Studio Laboratory - UXDev R&D Summary 2022
gree_tech
PRO
0
680
Other Decks in Technology
See All in Technology
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.7k
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
120
Bill One 開発エンジニア 紹介資料
sansantech
PRO
0
130
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
2
1.1k
Oracle Cloud Infrastructure:2023年1月度サービス・アップデート
oracle4engineer
PRO
0
180
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140
PHPのimmutable arrayとは
hnw
1
180
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
420
OVN-Kubernetes-Introduction-ja-2023-01-27.pdf
orimanabu
1
460
cdk deployに必要な権限ってなんだ?
kinyok
0
200
NGINXENG JP#2 - 3-NGINX Plus・プロダクトのアップデート
hiropo20
0
250
Raspberry Pi Camera 3 介紹
piepie_tw
PRO
0
170
Featured
See All Featured
Happy Clients
brianwarren
90
5.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
KATA
mclloyd
12
9.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
It's Worth the Effort
3n
177
26k
The Invisible Side of Design
smashingmag
292
48k
Making Projects Easy
brettharned
102
4.8k
Writing Fast Ruby
sferik
613
58k
Bash Introduction
62gerente
601
210k
Designing for humans not robots
tammielis
245
24k
Designing for Performance
lara
600
65k
Transcript
比較サイトの検索改善 (SPAからSSRに変換) アウモ株式会社 サーバーサイドエンジニア 天野桂輔
• 名前 • 天野 桂輔 • 担当 • サーバーサイドエンジニア •
Ruby on Rails、Nuxt.js • 経歴 • 2013- グリー株式会社 • GREE Platform 部に所属 • 2020- アウモ株式会社 • 比較サイト、aRM※の開発担当 ※CRMツール 自己紹介 2
aumoはご存知ですか? ⓘ Start presenting to display the poll results on
this slide.
4 aumoってどんなサービス? 国内最大級のおでかけ情報サービス 1300万 500万 月間ユーザー数 アプリDL数 50万 掲載記事数 総口コミ数
50万 掲載メディア数 500
5 aumoってどんなサービス? Web記事 SEOに最適化された コンテンツ制作 Web記事 Web記事 Web記事 位置情報、閲覧傾向を利用 レコメンドシステム
App ユーザーの口コミを活用 おでかけCGM Web施設
6 Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby / Ruby
on Rails インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web記事 SEOに最適化された コンテンツ制作 Web記事
7 App Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby /
Ruby on Rails, Swift, Kotlin, Python インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB, FireStore Database 監視 Datadog, Papertrail, PagerDuty, Firebase 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch 機械学習 SageMaker, fastText コード管理 GitHub 位置情報、閲覧傾向を利用 レコメンドシステム App
8 Web施設 Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby /
Ruby on Rails, Vue.js, Nuxt.js インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty, Sentry 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web施設 ユーザーの口コミを活用 おでかけCGM
9 比較サイトとは? Web記事 Web記事 位置情報、閲覧傾向を利用 レコメンドシステム App ユーザーの口コミを活用 おでかけCGM Web施設
Web記事 SEOに最適化された コンテンツ制作 Web記事
10 施設情報を提供するサービス 比較サイトとは? • 施設 • 基本情報、写真、口コミ • 検索 •
ジャンル×エリア×カテゴリで施設を検索 ホテル グルメ レジャー・観光 チラシ・ショッピング
11 構成 フロントエンド バックエンド ELB 同一インスタンスに搭載 サブドメイン
12 当初のフロントエンド設計 UXを優先したSPAという方法を採用
13 Single Page Application SPA ページ遷移することなく同一のページ内でコンテンツのみ切り替 え サーバー ELB クライアント
①リクエスト ③レスポンス ②コンテンツ生 成 ④JSをブラウザで実行 ※2回目以降は差分のみリクエスト するため処理が早い
14 SPA • メリット • 2回目以降は差分のデータのみを要求するため早い • デメリット • 初回のページ読み込みが遅い
Single Page Application
15 比較サイトの成長に伴い、初回読み込みの遅延が顕著に。。。
16 特に、施設の検索が遅い
17 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
18 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
19 コンテンツ表示までの速度 検索の課題 • コンテンツ生成が非同期 • レンダリングに時間がかかる
20 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
21 検索エンジン最適化(SEO)対策 検索の課題 • コンテンツ生成が非同期で評価できない • Web記事はSEOに強い • ノウハウを共有したい Web記事
SEOに最適化された コンテンツ制作 Web記事
22 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 解決策:SPAからSSR(同期生成)に仕様変更
23 Server Side Rendering SSR Webページのレンダリングをブラウザの代わりにサーバ上で行う サーバー ELB クライアント ①リクエスト
③レスポンス ②コンテンツ生 成 ・HTML生成 ・JS実行 ※ Node.js必要 ④コンテンツ表 示 ※画面の表示において有用な アプリケーションの機能
24 SSR • メリット • 画面の表示が早い • デメリット • サーバー側の負荷が高い
• Node.js サーバー環境が必要 Server Side Rendering
25 つまり
26 SPAからSSR(同期生成)に仕様を変更することで • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 を改善できる
27 仕様変更 • 検索処理 • Vue components 内 mounted 時に実行
• しかも、ジャンル毎に似たような処理がある... mounted () { return this.search() }, search () { const page = this.$route.query.page || 1 : 検索パラメータ設定 : this.searchGourmetAction({ searchQuery, page }) // store経由でAPIリクエスト } 変更前
28 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()
created() fetch() mounted() validate() ・初回アクセス時に実行される ・ストアに事前にデータを格納する ☆ page components のみ利用可能 ★ 全ての Vue components で利用可能 ・条件の設定やチェックを行う ・page リダイレクトに利用 ☆ 動的ルーティングのパラメータを検証 Vuex store component data ☆ page レンダリング前にデータを取得 ★ Vue インスタンスが生成されたときに呼び出される ★ Vue インスタンスが生成された後に呼び出される ★ DOM がレンダリングされたときに呼び出される
29 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()
created() fetch() mounted() validate() DOM がレンダリングされた後に検索
30 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()
created() fetch() mounted() validate() page レンダリング前に検 索
31 ① 検索処理の移行 仕様変更 • 検索処理 • page components 内
fetch 時に実行 • page 全てに同様の処理を置くのは微妙なので... async fetch ({ app, route }) { return await Promise.all([ app.$categorySearch({ route }) ]) },
32 ② 検索処理の共通化 仕様変更 • plugin 利用 • ジャンル毎の検索処理を共通化 export
default ({ store, req }, inject) => { inject('categorySearch', async ({ route }) => { const page = route.query.page || 1 switch (process.host) { case process.env.GOURMET_DOMAIN: : 検索パラメータ設置 : await store.dispatch('gourmetSearch/searchGourmetAction', { searchQuery, page }) break : } }) } ※ ブラウザ環境に帰属するオブジェクト(window, document)にはアクセス不可
33 ③ 検索ページ導線を変更 仕様変更 • 検索ページへの遷移処理を修正 • <NuxtLink>によるページ遷移はクライアント側で実行 • ブラウザをハード再読み込みしてサーバーへリクエスト
34 まとめ
35 改善項目 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
36 改善項目 • コンテンツ表示までの速度 • リクエストからコンテンツ表示までの速度:55~62%⬇ • 検索エンジン最適化(SEO)対策
37 改善項目 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 • 初回読み込み時に全てのコンテンツを生成
38 改善項目 • コンテンツ表示までの速度 • リクエストからコンテンツ表示までの速度:55~62%⬇ • 検索エンジン最適化(SEO)対策 • 初回読み込み時に全てのコンテンツを生成
39 学び
40 NuxtJS • SSR導入は困難ではない • Node.js サーバー環境を準備 • Nuxt Life
Cycle 理解 ※クライアント、サーバーの処理 • 同様の課題があるサービスに有用 • ページ単位で導入も可能
41 引き続きより良いサービス作りを心掛けていきます これからもaumoを宜しくお願いしますmm
42