doda AIジョブサーチ PWAとパフォーマンスの話

Slide 1

Slide 1 text

Slide 2

Slide 2 text

誰︖ • 吉次洋毅（ヨシツグヒロキ） • 1991年⽣まれ（27歳） • 徳⼭⾼専専攻科修了 • 経歴 – 某レストラン検索サイトでバックエンドエンジニアなど – パーソルキャリアでエンジニアをしつつフリーランスで受託開発 & 他社さんの開発やプロジェクトマネジメントのお⼿伝い • 趣味 – ⼀⼈旅&写真&スーパー銭湯 – スマブラ（VIPに⾏けそうで⾏けない） – 筋トレ（予定） • 最近触っている技術 – Javascript（Nuxt.js / Express.js） – PWA – AWS / GCP Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 3

Slide 3 text

今⽇のお話と⽬標 1. パーソルキャリア初のPWA『doda AIジョブサーチ』のご紹介 → 前置きです 2. NuxtベースでPWAを作った話 →「これからPWA作ってみよう」という⼈向け。 3. パフォーマンスの計測と改善をした話 →Nuxtアプリケーション/PWAのフロントエンドのパフォーマンスが気になる⼈向け Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

パーソルキャリア初のPWA︕ Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. https://doda.jp/AiJobSearch/ ※現時点でスマホ対応のみ • 「イマイチ⾃分に合った検索条件がわからない」、「じっくり転職サイトを使う時間がない」そんな⼈に向けた新サービス • 検索ナシ︕ • 希望条件を⼊れて、出てきた求⼈に対する興味の有無を選ぶだけ︕ • ⽇々賢くなってイイカンジのレコメンドをしてくれるというコンセプト今は最適化されていないので精度よくない現在内製の機械学習エンジンを鋭意開発中

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Vue.js×PWAの概観 • 『Vue.jsで始めるPWA』で検索︕（⼀部最新化出来てませんmm） – https://qiita.com/gyarasu/items/2f18edc4ae251180d89e • PWAでできること – ホームスクリーンへの追加（Add to Home Screen） – キャッシュ（Service Worker Caching） – プッシュ通知（Push Notification） – バックグラウンド同期（Background Sync） • 気になる制約（iOS12 Safari） – 未対応のAPI • Web Push • Background Sync – 参考: 『Whatʼs new on iOS 12.2 for Progressive Web Apps』 • https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web- apps-75c348f8e945 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 14

Slide 14 text

PWAとして何から始める︖ • ホームスクリーンへの追加（A2HS） • キャッシュ（Service Worker Caching） • プッシュ通知（Push Notification） • バックグラウンド同期（Background Sync） Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. まずは取っ掛かりやすいところから︕ ※ただし、iOS SafariでのA2HSはcookieの扱いが微妙かも…あとプロンプトが出ないので⼿動。

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Service Worker Cacheについて • Service WorkerによるCacheは2種類 – Pre Cache – Runtime Cache • Pre Cache – 静的なアセットをキャッシュする • nuxt buildしたときのバンドルファイル – Workboxモジュールが有効化されていれば⾃動的にやってくれる • Runtime Cache – 動的なHTTPリクエストをキャッシュする – フロントエンドから⾮同期で呼び出すAPI • Runtime Cacheの戦略 – リソースの特性（更新頻度など）に応じて戦略や保持する期間を設定する – https://speakerdeck.com/gyarasu/pwaji-chu-3?slide=7 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. v3で挙動変わったかも調査中

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Service Workerライフサイクル • https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API /Using_Service_Workers • skipWaiting – “Use self.skipWaiting() anytime before activation to skip installed stage and directly jump to activating stage without waiting for currently controlled clients to close.” – すでにページをコントロールしているSWがある場合も、waitingをスキップしてactive に移⾏する（SWを新しいものに上書きする） • clientsClaim – “Use self.clients.claim() in the active handler to start controlling all open clients without reloading them.” – SWがページをコントロールするようになるのは、activate後に再度ページが読み込まれたタイミング。初回のページロードのタイミングでコントロールを開始する。 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

パフォーマンスの良し/悪しの観点 • 基本的には、スコアが⾼いほど良いと思っておく – パフォーマンスはUXやコンバージョンに⼤きく貢献する • ⼀⽅で、本来Webサービスが提供すべき価値を忘れないようにする – 実際には、スコアが⾼ければ⾼いほど良いとは⼀概には⾔えない… – 例えば、スコアを伸ばすために本来に必要なコンテンツを削ったりしたら本末転倒… Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Lighthouseで確認できるパフォーマンス指標 • First Contentful Paint – 初回のテキストもしくは画像が表⽰されるまでにかかった時間 • First Meaningful Paint – 主要コンテンツが表⽰されるまでにかかった時間 • Speed Index – ページのコンテンツが⽬に⾒える状態になるまでにかかった時間 • First CPU Idle – メインスレッドでの処理が終わってCPUがアイドル状態になるまでにかかった時間 • Time to Interactive – ユーザ操作が可能になるまでにかかった時間 • Estimated Input Latency – ユーザの⼊⼒に対するアプリの応答速度 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

どれだけ良くなった︖ 4.3 5.9 5.4 5.9 16.7 3.8 3.8 4.3 5 5.8 0 2 4 6 8 10 12 14 16 18 First Contentful Paint First Meaningful Paint Speed Index First CPU Idle Time to Interactive ms パフォーマンス指標の⽐較 Before After Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

バンドルサイズの縮⼩ Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. • Nuxtでは、内包されいてるwebpack-bundle-analyzerを使ってバンドルサイズを可視化することができる • やり⽅は簡単。nuxt.config.jsでbuild.analyzeをtrueで指定してあげる – https://ja.nuxtjs.org/api/configuration-build/#analyze • UIライブラリとしてVuetifyでA-la-carteを利⽤していたが、使⽤するコンポーネントやディレクティブのみ読み込むように変更した – https://ja.nuxtjs.org/api/configuration-build/#analyze 1.4MB → 556KB

Slide 36

Slide 36 text

A-la-carteの罠…︖ • Vuetify⾃体のサイズは⼩さくなったが、pagesのファイルが少しずつ⼤きくなってしまった… • 全体としては30KBの削減にとどまった • pagesのファイル数が増えるとVuetifyを全部読み込む場合よりもむしろ全体のバンドルサイズが⼤きくなってしまうかも…︖ Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. 特定のライブラリを⼩さくする場合に副作⽤がある可能性も考えておくのが良い。ご存知の⽅いらっしゃいましたらご教⽰くださいm(_ _)m

Slide 37

Slide 37 text

Slide 38

Slide 38 text

必要なリソースのみ読み込み（計測タグ関連） • doda AI JobSearch（https://doda.jp/AiJobSearch/）はdoda （https://doda.jp/）の括りに含まれるサービス • ⼀⽅でAI JobSearchはターゲットを絞って運⽤しており、dodaで導⼊している広告タグや各種ツール系のタグ等は不要。 • GTMでそれらを設定しているが、AI Job Search側では読み込みたくないので、GTMのコンテナを分け、必要最低限のタグのみを設定することで対応。 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 39

Slide 39 text

APIレスポンスの圧縮 • 求⼈情報を取得するためのAPIのレスポンスに、多くの情報を含めているのでレスポンスサイズが⼤きくなってしまっていた • バックエンドのAPIサーバは現在Express.jsで構築しているので、 compressionを使⽤して、APIレスポンスをgzip圧縮した。 – https://github.com/expressjs/compression – levelの設定は6（=デフォルト）くらいで圧縮率が頭打ちになったので6にした • 20件程度の求⼈情報を含むAPIのレスポンス • 求⼈⼀覧表⽰⽤と、詳細表⽰⽤でエンドポイントを分けて最適化するような対応は別途検討する必要がある Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. 192KB → 59KB

Slide 40

Slide 40 text

CDNの利⽤ • バンドルファイルや求⼈画像の静的アセットはCDNに置く • dodaではAkamaiを利⽤中 • CDNの恩恵 – 距離が近くなる（dodaの場合国内向けサービスなのでそこまで恩恵はないかも） – デバイスに最適化した画像の配信 – トラフィック分散 – 可⽤性の向上 • Nuxt.config.jsのbuild.publicPathにCDNのURLを指定すると、nuxt build実⾏後、クライアント側のバンドルファイルをCDNをアップロードする – https://ja.nuxtjs.org/api/configuration-build/#publicpath Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 41

Slide 41 text

PWAでCDNを使うときの注意点 • CDNにクロスオリジンでアクセスする場合は要注意 • Service WorkerからCDNにアクセスできない問題が発⽣する • 『Nuxt × PWA × CDNでハマった件について』 – https://qiita.com/gyarasu/items/005e4c74fa166d048dbe – scriptタグのsrc属性でのクロスオリジン指定はOK（HTML5の仕様） – Service Workerは内部的にjsによってHTTPリクエストを⾶ばしているので、この部分で引っかかる Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 42

Slide 42 text

APIリクエストの最適化 • 計測対象画⾯では初期表⽰時に複数のAPI を呼び出している – いいねサマリ取得API – Yes/Noチェック⽤の求⼈リスト取得API – レコメンドリスト取得API×2 計4リクエスト • レンダリングは2種類 – SSR: URLに直接アクセスした場合 – CSR: 画⾯下部のタブを押した場合（router.push で移動したとき） • 改善ポイントは2つ – 並列に複数のAPIを呼び出す – SSR/CSRそれぞれに合わせたデータの取得⽅法 Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 43

Slide 43 text

APIリクエストの最適化 • もともとは、mounted()内で直列にAPIを呼び出していた – SSR時にコンテンツが⼊った状態で表⽰されない – クライアントサイドでマウントされたあとにAPI呼び出して結果を表⽰するまで待つ必要がある • fetchの活⽤で解決 – モチベーションは「SSR時にコンテンツを⼊れた状態で表⽰したい」 →レンダリングされる前にデータをストアに⼊れる必要がある – https://ja.nuxtjs.org/api/pages-fetch/ • 複数APIを並列実⾏ – API呼び出しはvuexのactionsに書いているので、actionsの関数はPromiseを返却するようにする – 必要なAPI分Promiseを⽣成し、Promise.allで並列実⾏ Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved.

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

“fetch メソッドを⾮同期にするためには Promise を返却してください。そうすれば nuxt.js はコンポーネントがレンダリングされる前に promise が解決されるまで待機します。” Copyright © PERSOL CAREER Co., Ltd. All Rights Reserved. SSR時にPromiseの解決を待たずに画⾯を返してしまう = コンテンツ部分が空になってしまう