Webページ表示高速化 入門

Transcript

2. Webページ高速化とは Webページをすばやく表示させることは、UX（ユーザエクス ペリエンス）の向上だけでなく、Googleの検索順位にも影響 する重要な指標です。 今回は、Webページ高速化のための手法、測定できるツール の「Lighthouse」の使いかたを紹介します！
3. 主な高速化の手法 D 圧縮率の高い画像形式の利) D 画像の最適化・ファイル圧$ D CSS, JSの改善・ファイル圧$ D 速いサーバーを利用する
4. 計測方法（Lighthouseの使いかた） DevToolsから立ち上げ Lighthouseパネルを表示させ、モード・デバイスを選択し、 「ページ読み込みを分析」をクリック。 Google Chrome拡張機能 chromeウェブストアで拡張機能の「Lighthouse」を検索 →Chromeに追加。「Generate report」をクリック。
5. 画面の見方 「パフォーマンス」「ユーザー 補助」「おすすめの方法」 「SEO」の、４つの項目を診断 できます。 100点満点で得点を確認でき、90 点以上はグリーン、49点以下は レッドで表示されます。
6. 画面の見方 「パフォーマンス」では「FCP」 「LCP」など５つの指標があり、 現在のページがどの指標を何点 獲得したかを確認できます。 各指標で問題が発生している場 合、「 」で表示されます。 また、「ビューを開く」から各 指標の解説を確認できます。 ▲
7. 画面の見方 「診断」では、問題が発生している箇 所の表示と原因が確認できます。 アコーディオンを開くと問題となって いるソースコードや画像ファイルが列 挙されています。また、問題がなかっ た箇所の表示もされています。 「FCP」「LCP」などの指標のうち、 その問題箇所がどの指標に影響してい るのかの確認もできます。
8. 画像の改善方法 画像圧縮アプリ macOS : Windows : https://imageoptim.com/mac https://css-ig.net/pinga 画像変換 変換サービスの例：PNG ファイルを AVIF に変換 VS Codeのスニペット スニペット機能を使って、pictureタグ、sourceタグを展開
9. Webフォントの改善方法 Webフォントのうち、日本語Webフォントは、上手に使わな いとパフォーマンスが落ちてしまいます。 日本語Webフォント使わないべきか、使うならどの手段か、 といった判断用のフローチャートを用意しました。 日本語Webフォント利用フローチャート ご入会後の特典スライドです
10. JSの改善方法 jQueryを使っている場合、素のJSを使う：jQuery -> Vanilla JSの変換 スクロール関連のイベントを使いたい場合、jQueryではなく GSAPを使う：【実践課題】スクロールアニメーション ご入会後の特典スライドです
11. CSS, JSコード軽量化 VS CodeのMinifyを使うとよいです。 Minify 使いかた command + shift + P（Win : Ctrl + Shift + P）→「Minify」 をクリック ご入会後の特典スライドです
12. まとめ 6 Lighthouseを使って計測をす' 6 Lighthouseの「診断」で問題を特定・対 6 各種改善方法を知る
13. Beans Collegeのご案内 Beans College 説明会 説明会を毎月開催してます！