GraphQLを用いたECサイトにおけるパフォーマンス改善
背景
2015 Rails erbで作った
ページ遷移が長い
Releaseがシビアでパフォーマンスを犠牲にした
パフォーマンス改善プロジェクト
フロントのチューニング
GraphQLのチューニング
技術構成
フロントにAPIの自由度を持たせたかった
Schema定義
API document
introspection
計測指標の導入
実機テスト
Chrome Audit
PageSpeed Insights
フロントの改善
ページごとに必要なCSSを読み込む
viewportの内外でクエリを分割
サーバーの改善
ref: paypal engineers resolver best practice
batch-loader を使う
フロントの画面の描画以上にサーバーが処理をしている
pagingがない配列のリクエスト
relay-connection-types-spec を使用
不要なリソースへのリクエスト
Fragmentはqueryの部分定義ができるので、コンポーネントに紐付けられる
Fragmentを合成して1つのqueryに合成すること
今後
cacheの活用を検討
persisted query