本当にあったケチくさい話

山口貴史

株式会社 Candle

創業メンバー、CTO

山口貴史 Yamaguchi Takashi

東京大学 4年

エンジニア歴 1年半

Topicks | トピックス エンタメ情報まとめメディア

Healthil | ヘルシル 健康医療情報まとめメディア

Carcast | カーキャスト 自動車・バイク情報まとめメディア

mimiTV 女の子のためのYoutubeチャンネル

Knowsia大型メディアプラットフォーム

スタートアップ初期は、お金がなかった。

バイトも辞めたので収入源がない。

節約志向

本当にあったケチくさい話

丸亀製麺での オーダー改善による コスト削減について

本当にあったケチくさい話

普通にコストを削減した場合

徹底的にコストを削減した場合

ダシ: 0円 ごはん: 130円 ネギ: 0円 天かす: 0円 生姜: 0円

丸亀製麺130円天丼！

さておき、

サーバーのパフォーマンスチューニングとコスト削減

本当にあったケチくさい話 #2

• 各種サーバーのランニングコスト 　アクセス数が増加して負荷が増えると、より多くの台数、高いスペックが必要になるので、サーバー費が高くなる。

• インターネットへのデータ転送料金 　(Html , CSS , JS , 画像 , etc.) 　データ量に比例してお金がかかる。 →画像の多いサービスでは高くなりやすい。

Webメディアはどこにサーバー費がかかるのか？

実際、サーバー費は どれくらいかかるのか？

事例1（当時、若干不備のあったインフラ構成）• 月間PV数： • 月間サーバー費： • 1PVあたりのコスト：

• 月間PV数： 60万PV

• 月間サーバー費： 4.5万円

• 1PVあたりのコスト： 0.075円

事例2（よくあるインフラ構成の場合）

200万PV

35万円

0.175円

月間 ビュー数

月間 サーバー費

1PVあたりの コスト

事例1 200万PV 35万円 0.175円/PV

事例2 60万PV 4.5万円 0.075円/PV

Topicks 1000万PV ???万円 ???円/PV

月間 ビュー数

月間 サーバー費

1PVあたりの コスト

事例1 200万PV 35万円 0.175円/PV

事例2 60万PV 4.5万円 0.075円/PV

Topicks 1000万PV 5万円 0.005円/PV

コストとパフォーマンスを 改善させるために行った

施策について

本当にあったケチくさい話 #2（続き）

施策1：キャッシュの最適化

• CakePHPのキャッシュのシステムを実装。

• サーバーの負荷が約10分の1程度にまで激減！

施策2：gzip圧縮

• HTML,CSS,JSなどのファイル圧縮技術。

・ファイルサイズが約4分の1に縮小！

→HTML,CSS,JSのデータ転送料もそのまま75%削減！

施策3：CloudFlare導入

• CDN（広域負荷分散システム）の１つ。代表的なCDNサービスにAkamaiやCloudFrontがあります。

• 簡単に言うと、画像ファイルなどをキャッシュしてくれるサービス。

• 特徴：基本無料

キャッシュがヒットした分の転送量はなんと無料

最大キャッシュヒット率99%を達成

画像転送量最大99%削減！（平均でも80%程度削減）

施策4：HTML,CSS,JSのコードの最適化による表示速度改善

• 「極限までコンパクトに」 • 保守性は保つ。

• リクエスト数の削減→CSS,JSは1つずつ

• 不要なCSSの削除→約15kB

• jsライブラリの機能を独自で実装→約1.2kB

ちなみにパフォーマンスは？

他社サイト • NAVER まとめ

• MERY [メリー]

• nanapi [ナナピ]

• iemo[イエモ]

• kaumo[カウモ]

弊社運営3サイト • Topicks[トピックス]

• Healthil[ヘルシル]

• Carcast[カーキャスト]

VS

使用するツール

Googleが提供している携帯端末やデスクトップ端末向けのページのパフォーマンスを測定するツール 85/100以上あれば高パフォーマンス。

※各サイト３記事をランダムにPageSpeed Insights

で測定し、PC版の平均値を算出。

PageSpeed Insights

0 25 50 75 100

3860687085859092

※PageSpeed Insightsはあくまで指標の１つなので総合的なサイトのパフォーマンスとは異なる。

Topicks[トピックス]

Healthil[ヘルシル]

Carcast[カーキャスト]

NAVER まとめ

nanapi [ナナピ]

kaumo[カウモ]

iemo[イエモ]

MERY [メリー]

今後の課題

• ロードバランシング

• オートスケーリング

• Web・DBサーバーの冗長化

• 自動デプロイ

今後の目標

• 更なるパフォーマンスとコストの追求

• CandlePHPの開発

まとめ

• Webメディアの運営には、あまりお金は必要ない！

• 日常生活でも然り。

おわり