ネイルブックでのWEB高速化の取り組み

ネイルブックでの
WEB高速化の取り組み
Think Startup Career Night #02
株式会社スピカ
國府田勲

Copyright © Spika Inc. 2016 all rights reserved.
2
自己紹介
國府田勲
株式会社スピカ
http://spika.co.jp
代表取締役
プロダクトオーナー
インフラエンジニア
13万人 20人 4人
http://qiita.com/kou

3
株式会社スピカの紹介
2014年4月に設立された
スタートアップ
ネイルサービス
「ネイルブック」を運用
メンバーの半分がエンジニア
メンバーの半分が女性50%

4
ネイルブックのご紹介
毎月100万人の女性が利用する
日本最大のネイル情報サービス
https://nailbook.jp

5
サービス利⽤の流れ
検索情報チェック予約来店
ネイル写真から気になるサロンを検索
詳細情報を確認後、オンラインで予約を完結
ネイリストが投稿した写
真から⾃分好みのデザイ
ンを検索
ギャラリーや詳細情報を
チェック
メニューと来店希望⽇時
をチェックし、仮予約
来店し、予約時に選択
したメニューを施術
イメージとのズレなく
思い通りの仕上がり

ネイルブックでの
WEB高速化の取り組み
第一部
6

• 利用者を増やすことができる
– サイトの離脱を防ぐことができます
• コンバージョンを高めることができる
– 回遊率が高まります
7
WEB高速化の効能
高速化はエンジニアだけで
サービスの成長に大きく貢献できる部分

• 初期リリースから5年以上が経過し、技術的
負債がたまっていた
• スタートアップに機能追加を止めてリファクタ
する余裕はない
8
WEB高速化の障害
技術的負債を段階的に返済
返済時に利息（高速化）をつける

9
WEB高速化結果
項目 2015年12月 2016年11月
レスポンスタイム 167ms 90ms
ロードタイム 5.11sec 2.82sec
サーバコスト $8148 $6014
性能が向上し、コスト削減にも成功

取り組みの一部をご紹介します
• 機能のスリム化
• フレームワーク最新化
• 検索エンジン全面導入
• 静的リソース最適化
• インフラ最適化
• 非同期処理化
10
取り組み

• ビジネス側と調整して機能を削減
– 重要度の低くなった機能の廃止
– 使っていないコード・テーブルの整理
11
機能のスリム化
項目 2015年12月 2016年12月
ファイル数
3944
ファイル
2058
ファイル
テーブル数 163テーブル 94テーブル

• 古いシステムではやる気にならないので最新に
載せ替え
1. DjangoをPython2系で対応している1.6まで上げる
2. Pythonを3系にあげる
3. Djangoを最新にする
12
フレームワーク最新化
項目 2015年12月 2016年12月
Python 2.6 3.5
Django 1.2 1.10

• 処理で大きな時間が割かれていたサロン検
索をDBからElasticsearchに移行
• 同時にESをAWSのマネージドに載せ替え
13
検索エンジン全面導入
処理時間短縮とインフラ削減に貢献
アプリケーションサーバ ESサーバ
データ投入
サーバDB
アプリケーションサーバ ESサーバ
DB

• トラフィックの多くを占めていた静的リソース
の配信を最適化
– CDN経由での配信
– クライアントキャッシュの活用
– CSSスプライト化
– 独自WEBフォント化
14
静的リソース最適化

• クライアントキャッシュの活用
– ブラウザには7日以上キャッシュさせるのが望ま
しい
– 静的リソース変更時に反映されない可能性があ
る
– 自動でバージョン番号を付与する仕組みを用意
15
https://cdn.nailbook.jp/p/alternative/image
s/white_icon.png?v=35c0b07a93528a09ac3
a4f30e98c1ba8ab41b287

• CSSスプライト化
– 複数の画像を１枚の画像に合成して配信
• アイコンWEBフォント化
– サイトでよく使うアイコンをフォント化して配布
16

• この半年で実施した内容をご紹介
– HTTP圧縮
– mod_wsgiデーモン化
– 全面SSL化
– CDN全面導入
– MySQLバージョンアップ
– MemcachedからRedis移行
17
インフラ最適化

• 実行コストが高くリアルタイム性が不要な処
理を非同期処理化
– タスクキューとしてCeleryを導入
18
非同期処理化

• ご紹介した以外にも様々な取り組みしてます
– デプロイチェーン見直し
– SQLチューニング
– 管理画面の独自言語実装
– Swagger導入
– 画像合成サーバ
– Dockerでの開発環境
– リアルなテストデータ生成
– アプリ開発でのChatOps
19
最後に
詳細はご面談で！

あなたに合った
スタートアップ診断
第二部
20

21
スタートアップのステージ
スタートアップの成長段階区分
シードアーリーミドルレイター
各ステージで求められるエンジニア像、
得られる経験、悩みが異なります

22
シード期
立ち上げの準備段階
会社の状況
プロダクト企画しかない
収益夢だけ膨らむ
組織なに、それ？おいしいの？
エンジニアの状況
まだ作るものがないので、やることなし

23
アーリー期
プロダクトを世に出してユーザ定着に尽力
会社の状況
プロダクト
リリース済み
アーリーアダプターが使い出す
収益
収入なし
大きく赤字
組織 2-3人程度なのでスピード感ある

24
アーリー期
プロダクトを世に出してユーザ定着に尽力
開発スタイル 1人開発
求められる
エンジニア像
• 何でもやるという気持ちのある人
• 一人で調べて進められる人
得られる経験
• 幅広いスキルが身につく
• 自分で全てコントロールできる
悩みこれで本当にいいのかわからない

25
ミドル（グロース）期
プロダクトが受け入れられ、伸ばしていくフェーズ
会社の状況
プロダクトユーザグロースの取り組みはじまる
収益収益モデル検証がはじまる
組織複数チームができつつある

26
ミドル（グロース）期
プロダクトが受け入れられ、伸ばしていくフェーズ
開発スタイルチーム開発
求められる
エンジニア像
• こだわりよりもスピード重視
• まわりとコミュニケーションをとって
進められる人
得られる経験
• 他のメンバーと切磋琢磨できる
• 自分たちで開発スタイルを作れる
悩み時間がなくてこだわりが発揮できない

27
レイター期
収益モデルが完成した
会社の状況
プロダクトユーザ目線から顧客目線に移りつつある
収益単月黒字、累損解消
組織組織が確立し、分業がはじまる

28
レイター期
収益モデルが完成した
開発スタイル組織開発
求められる
エンジニア像
• 与えられた役割を精度良くこなせる
• 効率化・標準化が得意
得られる経験担当分野のスキル・経験の深掘り
悩み
• 担当が決まっていて新しいスキル
獲得ができない
• 営業がうるさくてリスクのある新し
いことに挑戦できない

29
適性診断
失敗してもいいのでひと山当てたい
アーリーステージへ
みんなが知ってるサービスに関わりたい
伸びていく勢いを感じたい
ミドルステージへ
レイターステージへ

ネイルブックでのWEB高速化の取り組み

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Destacado

Destacado (20)

Similar a ネイルブックでのWEB高速化の取り組み

Similar a ネイルブックでのWEB高速化の取り組み (10)

ネイルブックでのWEB高速化の取り組み