明日からできる、速度改善のためのこまごまパフォーマンスチューニング（きほんのき）

Transcript

1. © Cake.jp Co.Ltd. All Right Reserved.｜Confidential 2024/4/11
 
 明日からできる、速度改善のための こまごまパフォーマンスチューニング （きほんのき）
 
 島 未来

2. 2 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential 自己紹介 • 名前 ◦ 島 未来 / Miki Shima • 経歴 ◦ 総合職採用だった広告事業会社で iOS appエンジニアの道 踏み入れる ◦ 受託Web制作会社でフロントエンドエンジニア ◦ フリーランスを経てご縁ありCake.jpにジョイン • 業務 ◦ UIリニューアル（デザインシステム）適用推進 ◦ 速度改善 ◦ 機能改善の仕様・デザイン作成など • おすすめ🍰 ◦ チーズケーキなら、古都美さんとル ミュゼ ドゥ アッシュさん！ ▪ シーズナル終売してたので店を推します
3. 3 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential 弊社では最近、エンジニア一丸となって速度改善を頑張っています！（その話はまたどこかで） その中から、今すぐチェックしたい簡単かつ盲点ネタを、ご紹介します。 はじめに
4. 4 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential imgタグにlazyload徹底できてますか？ チェック①
5. 5 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • loading=”lazy” ◦ 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを 遅延させる 参照 ▪ 設定されていない場合、直ちに画像を読み込む ◦ ページの読み込み時にビューポート内にある可能性が高い画像（＝ファーストビューの画 像）には設定しない チェック①imgタグにlazyload徹底できてますか？
6. 6 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ 設定ヌケモレ ▪ 昔から使われている.ctpファイル ▪ 普段あまりメンテされることのない .ctpファイル ▪ コードレビュー時の拾いもれ ◦ 逆にファーストビューの画像にlazyloadがかかっていたものは、はずす チェック①imgタグにlazyload徹底できてますか？
7. 7 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential サイト内画像 メインユーザーにとって最適サイズですか？ チェック②
8. 8 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • 大容量画像を各所で使いまわし ◦ 非圧縮のままアップロードされた撮影画像 ◦ PC用に@2x解像度で書き出されたバナー • .webpだからって絶対軽いわけではない ◦ PC用の.webp より SP用の.jpg チェック②サイト内画像、メインユーザーにとって最適サイズですか？
9. 9 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ カートの商品画像のサムネイル、商品メイン画像をそのまま表示していた →リサイズ版を取得するように変更 ▪ 画像サイズ -99.47% 改善 ▪ 読み込み時間 -48.65% 改善 チェック②サイト内画像、メインユーザーにとって最適サイズですか？
10. 10 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ トップMVスライダーでPC用.webpをSPで併用していた →pictureタグでそれぞれのリサイズ.jpgを取得するように変更 ▪ 画像サイズ -50~85% 改善 チェック②サイト内画像、メインユーザーにとって最適サイズですか？
11. 11 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential PC用, SP用どちらも生成して `display: none` してませんか？ チェック③
12. 12 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • CSSでうまくレイアウトできなかったときの産物 ◦ DOM量増える ◦ スライダーなどJS処理がかかっている場合、処理する対象も 2倍に ◦ ソースの可読性悪くなる チェック③PC用, SP用どちらも生成して `display: none` してませんか？
13. 13 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ PCとSPで掲載位置を変えたい（SPではスクロール量が増えるのでページ上〜中に配置 したい）コンテンツがそれぞれ呼び出され、非表示になっている ▪ 該当.ctpは1回だけ呼び出して、CSSのgrid layoutでレイアウトを組み替える ▪ 暫定でどちらかにそろえる（意図がかわるので後追いで最適化 🙏） チェック③PC用, SP用どちらも生成して `display: none` してませんか？
14. 14 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • 画像 ◦ pictureタグを使って、sourceタグのmedia属性でPC用とSP用を出し分け ◦ SPファーストにする場合、imgタグにSP用画像を設定する ▪ sourceのメディア条件がfalseと評価された場合、その要素はスキップされて次の要 素が評価される 参考 チェック③PC用, SP用どちらも生成して `display: none` してませんか？
15. 15 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential フォントの最適化 できるかも？ チェック④
16. 16 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • ローカルフォントは再コンバートして使う ◦ transfonter • 推奨環境にIEが含まれないなら、以下のチューニングが可能 ◦ .eot →はずす ▪ Microsoftが開発したIEのみに対応した独自規格 ◦ .woff2 →採用 ▪ 一般に広く使える.woffの進化版で、圧縮率が高く読み込みを短縮できる ▪ IEには非対応　参考 チェック④フォントの最適化できるかも？
17. 17 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ icomoon（アイコンフォント用サービス）から DLしたファイルをそのまま利用していた →再コンバートして利用 ▪ フォントリソースのサイズ -47.93% 改善 ▪ 読み込み時間も改善 チェック④フォント最適化できるかも？
18. 18 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • google font 廃止して、システムフォントに ◦ 読み込みリソース、FCPが大幅に改善する ◦ サイトの印象が最優先ではない /現状と大きく変わらないのであれば、思い切って削る判断 は大アリ ◦ おすすめのシステムフォント ▪ 2024年おすすめ 参考 チェック④フォント最適化できるかも？
19. 19 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • うちであった例 ◦ Googleフォントで、NotoSansJP(400,700)＋WorkSans(500)を利用していたが、読み込 み廃止しシステムフォントに ▪ 印象差 before / after ▪ DCL -30.56% 改善 ▪ フォントリソース -88.92% 改善 ▪ 読み込み完了 -34.33% 改善 チェック④フォント最適化できるかも？
20. 20 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • 改善前（2/27）のスコア（トップページ） おまけ
21. 21 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential • 4/10時点のスコア（トップページ） おまけ
22. 22 © Cake.jp Co.Ltd. All Right Reserved.｜Confidential あたりまえをあたりまえにやるのが大変 おしまい 「うちでもこんな見逃しあったよ」 「これがコスパよかったよ」 っていう速度改善あれば教えて下さい