はじめに こんにちは、AmebaマンガでWebフロントエンジニアをしています、小林と岸です。 本記事ではAmebaマンガフロントエンドチームが取り組んだWebパフォーマンス改善の取り組みと成果を紹介します。 Amebaマンガのフロントエンドチーム紹介 Amebaマンガはマンガをスマホ完結で購入・閲覧できる、電子コミック配信サービスです。23時間待てば無料で読める無料連載、編集部による特集などのコンテンツで、新たなマンガとの出会いを支援しています。 Amebaマンガのフロントエンドチームは5名の体制です。うち半数がプロダクトの運用に関わる新機能の開発や改修をメインに、もう半数が今回お話しするパフォーマンスを中心としたWEBの品質改善をメインに日々開発をおこなっております。 なお、建てつけ上「パフォーマンス」と「プロダクト」の開発に二分となっておりますが、これは専任ではありません。 プロダクト

アメブロのWebシステム改善を「5カ年計画」として定義してから早いものでその5年が経ちました。当時計画していた項目を満たしつつ、今もなおアメブロのシステム改善は続いています。 2020年は次の取り組みへ向けての橋渡しとなった年でした。本記事では、2020年に取り組まれた改善を紹介します。 アクセシビリティ対応は標準に 長時間CDNキャッシュでサービス配信を安定化 スクリプトサイズを管理し、削減 Core Web Vitalsの計測と改善 SXGの試験提供でAMP体験を改善 ブランドガイドライン、デザインシステムの構築で調和のとれたサービス提供に挑戦 Yatteiki Frontendチームの発足で改善を継続的に アクセシビリティ対応は標準に アメブロにとってのアクセシビリティは過去には少し特別なものでしたが、アクセシビリティに関心のある様々な方の努力により、今ではサービス運営時にアクセシビ