Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lighthouse のスコアが悪すぎる #34

Open
Akatsuka0426 opened this issue Feb 23, 2021 · 5 comments
Open

Lighthouse のスコアが悪すぎる #34

Akatsuka0426 opened this issue Feb 23, 2021 · 5 comments
Labels
help wanted Extra attention is needed

Comments

@Akatsuka0426
Copy link
Member

image

@Akatsuka0426 Akatsuka0426 added the help wanted Extra attention is needed label Feb 23, 2021
@tukiminya tukiminya changed the title Righthouse のスコアが悪すぎる Lighthouse のスコアが悪すぎる Feb 23, 2021
@tukiminya
Copy link

デスクトップ
スクリーンショット 2021-02-23 162818

モバイル
スクリーンショット 2021-02-23 162850

このような結果が出ました。
パフォーマンスに関しては.jpegなどを軽いファイルに変更することが必要だと思います。
news.pngに関してはsvgファイルにしてもよいかと思われます。

@Na9XX-KNSS
Copy link

  • kr-tukimi さんのおっしゃる通り不透過画像のjpeg,webp化が必要です。

  • また、heightとwidthを指定すると無駄な動きを減らせるため表示速度の改善にも繋がります。

  • Noto Sans JPフォントのサイズでレスポンスに影響が出ています。

フォント自体のファイルサイズを小さくすることは難しいためオリジンサーバーからではなくGoogleFontApiから取得するようにすることをおすすめします。
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">

Swiperが使用されているようなのでCDNを活用するのもいいかもしれません。
https://cdnjs.com/libraries/Swiper

パフォーマンスをざっと見る限り画像などのメディア関連に処理が持っていかれてる気がします。
そこらへんだけでも改善すれば高評価を狙えると思います👍

@Akatsuka0426
Copy link
Member Author

jpeg, webp 化はすでに修正済みです(画像を圧縮していい感じにやりました)

フォントはもともと Google Fonts API からやっていましたが、ダウンロードしてみたら多少はパフォーマンスがよくなったので(おそらく)ダウンロードしてサーバーに置いています。Google Fonts API からやったほうがいいですかね?
Swiper も同様です

@Na9XX-KNSS
Copy link

jpeg, webp 化はすでに修正済みです(画像を圧縮していい感じにやりました)

それならおっけーです👍

Google Fonts API からやったほうがいいですかね?
Swiper も同様です

実はここらへんが結構微妙なところで、サイト訪問者の環境によって左右されます。
ただ基本はcdnを使うことで表示速度が早くなることが多いですし、遅くなるということはほぼないのでcdnを使用するのがいいと思います。

@Akatsuka0426
Copy link
Member Author

わかりました
取り敢えず CDN 経由に変えておきます

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants