Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CDN+αの利活用でサイトの高速化を実現してみた
Search
coconala_engineer
April 21, 2024
Technology
0
170
CDN+αの利活用でサイトの高速化を実現してみた
2024技術トレンド大開放!LT大会の登壇資料。
https://rosca.connpass.com/event/315072/
coconala_engineer
April 21, 2024
Tweet
Share
More Decks by coconala_engineer
See All by coconala_engineer
事業会社におけるセキュリティ・ ITガバナンス強化への道のり
coconala_engineer
0
10
徹底解説!Insight SQL Testingを活用したデータベース移行の実践ポイント
coconala_engineer
0
110
人材・モチベーション・情報システムの融合とエンゲージメント
coconala_engineer
0
83
Macインスタンスを活用したアプリE2Eテストの実現
coconala_engineer
1
310
スケーラビリティの課題解決に向けたココナラのデータベース移行戦略
coconala_engineer
1
570
IPO準備企業必見!ココナラから学ぶ上場前後でのセキュリティ改革プロセス
coconala_engineer
0
140
IaC運用を続けて出会うイシューたち
coconala_engineer
0
110
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
570
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
310
Other Decks in Technology
See All in Technology
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
720
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
AWSでRAGを作る法方
sonoda_mj
1
140
エンジニア向け会社紹介資料
caddi_eng
14
220k
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Thoughts on Productivity
jonyablonski
64
4.1k
Writing Fast Ruby
sferik
623
60k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Gamification - CAS2011
davidbonilla
78
4.9k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Being A Developer After 40
akosma
72
580k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Transcript
Copyright coconala Inc. All Rights Reserved. CDN+αの利活用で サイトの高速化を実現してみた 株式会社ココナラ 川崎
雄太 2024/04/22 2024技術トレンド大開放! LT大会
Copyright coconala Inc. All Rights Reserved. 自己紹介 2 川崎 雄太 Yuta
Kawasaki @yuta_k0911 株式会社ココナラ システムプラットフォーム部 部長 / Head of Information SRE / 情シス / セキュリティ領域のEM SRE NEXT 2024のコアメンバー 去年の自慢:PR TIMESに3回載った✨
Copyright coconala Inc. All Rights Reserved. 3 ココナラの事業内容
Copyright coconala Inc. All Rights Reserved. ココナラのエンジニア数の変遷 4 事業拡大に合わせて3年で約3倍の組織規模に成長 2020年
2023年 フェーズ 上場前 上場後 エンジニア数 20人強 70人強 リポジトリ数 45 170以上
Copyright coconala Inc. All Rights Reserved. 5 Agenda CDNとは? ココナラで抱えていたパフォーマンスの課題
複数CDNの利活用を本気でやってみた 今後の取り組み 2 1 3 4
Copyright coconala Inc. All Rights Reserved. CDNとは? Chapter 01 6
Copyright coconala Inc. All Rights Reserved. (釈迦に説法ですが)CDNはContents Delivery Networkの略称 7
Webコンテンツを迅速かつ効率よくユーザーに配信する コンテンツなどのキャッ シュを一時的に世界中 のデータセンターに保 存。 最も近くにあるサー バーからコンテンツを配 信することで、ページ の読み込み時間を短 縮させる。
Copyright coconala Inc. All Rights Reserved. CDNはココナラでもめちゃめちゃ活用しています 8 ヒーローエリアなどの画像をCDNから配信 ココナラは比較的画像
が多いサービスとなっ ているので、CDNを利 活用している。 CDNにより、Webサー バーなどの負荷がか なり軽減されている状 況を作り出せていま す。
Copyright coconala Inc. All Rights Reserved. 今回のLTは「CDN+αの利活用でサイトの高 速化を実現してみた」というテーマ。 CDN(+CDN事業者)などを活用して、 サイトの高速化にどう繋がったの?
というところをご紹介します!😁 9
Copyright coconala Inc. All Rights Reserved. ちなみに元々「Amazon CloudFront」と 「Akamai Connected
Cloud CDN」を 併用していた。(僕の入社前から) 選定理由は使い分けの経緯やナレッジは どこにも残っておらず・・・😅 10
Copyright coconala Inc. All Rights Reserved. ココナラで抱えていたパフォーマンスの課題 Chapter 02 11
Copyright coconala Inc. All Rights Reserved. ココナラではGoogleが提唱する 「Core Web Vitals」を指標にして、
パフォーマンスを計測していた。 実際どういう状況だったかというと LCP(Largest Contentful Paint / 最大コ ンテンツ描画)が特に悪く、 ここに打ち手を講じたいと考えた🤔 12
Copyright coconala Inc. All Rights Reserved. 実際どのぐらいの指標値だったのか? 13 競合他社と比較して、LCPの数値が良くないことを再認識
Copyright coconala Inc. All Rights Reserved. LCPの改善項目として何があがっていたか? 14 「画像の圧縮率」と「最初のサーバー応答時間」が課題
Copyright coconala Inc. All Rights Reserved. 「餅は餅屋」ということで、まずはディスカッションをさせてもらった 15 アカマイ・テクノロジーズ社とMTGで原因を深堀り
Copyright coconala Inc. All Rights Reserved. 例えば、こういうところをディスカッションしていた 16 CDN以外の部分にも触れて、改善を図っていった
Copyright coconala Inc. All Rights Reserved. 今回のテーマは「画像の圧縮」 17 画像の圧縮をもっとかけること可能
Copyright coconala Inc. All Rights Reserved. そこで1つ課題が・・・ Amazon CloudFront +
AWS Lambdaで 画像のリサイズ処理を行っている。 サイトの高速化と画像のリサイズ処理を両 立するためにどうするか?🤔 18
Copyright coconala Inc. All Rights Reserved. 複数CDNの利活用を本気でやってみた Chapter 03 19
Copyright coconala Inc. All Rights Reserved. Image&Video Managerの導入 20 画像や動画を適切な品質と解像度に圧縮して配信
あらゆるデバイスとブラウ ザーに対応するインテリジェ ントな画像・動画最適化ソ リューション。 画像や動画を良い感じの 品質の解像度に圧縮た り、リサイズも可能とな る。
Copyright coconala Inc. All Rights Reserved. ココナラのシステム構成図 21 Akamai CDNとAmazon
CloudFrontをハイブリッド利用
Copyright coconala Inc. All Rights Reserved. LCPの改善結果 22 90%以上、画像を圧縮した状態で配信することができた
Copyright coconala Inc. All Rights Reserved. キャッシュヒット率も問題なし 23 90%以上を常時保つことで、安定運用できている
Copyright coconala Inc. All Rights Reserved. 今後の取り組み Chapter 04 24
Copyright coconala Inc. All Rights Reserved. 継続したリファクタリングの実践 25 導入して終わりではなく、継続したリファクタリングが必要…? 画像の規格は進化しているため、本来はそ
れらに追随して、チューニング / リファクタリ ングが必要。 ただし、Akamaiのソリューションを活用して いれば、そこにすべて任せられる。 =アプリケーション側での実装は不要と なるので、そこの工数を浮かせることも 副次的にできた。
Copyright coconala Inc. All Rights Reserved. 複数プロダクトへの横展開 26 「目的に応じて使い分ける」ことで、技術選定をする ベンダーロックインされないことも含めて、
純粋なCDNとしての要件と+αの要件有無 を確認し、プロダクトごとに最適な技術選定 をする。 また、課題になっていた「なぜこういうアー キテクチャーになっているかわからない」と いう状態からの脱却を目指し、技術選定 方針のドキュメントを確実に残す。
Copyright coconala Inc. All Rights Reserved. CDN1つ取ってみても、いろいろな 機能や可能性を持っています! 「何も考えず現行踏襲」はやめて、 全体最適を追いかけましょう!😁
27
Fin
Copyright coconala Inc. All Rights Reserved. Appendix Chapter 06 29
Copyright coconala Inc. All Rights Reserved. ココナラのAkamaiに関する発信内容 30 • 株式会社ココナラ、Image
& Video Managerで最大 コンテンツの表示速度(LCP)の課題を短期間で解決 ◦ https://www.akamai.com/ja/resources/customer -story/coconala • ココナラのCDN構成についてご紹介 ◦ https://zenn.dev/coconala/articles/905b968520 744e