5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Top画面の早く表示、頑張るぜ!!

Last updated at Posted at 2019-08-29

pagespeed_insights.png

Top画面の表示速度が直帰率と関係が深いらしく、以下のサイト(ほとんどGoogle提供・方針)で現在会社で担当している開店ポータルのチェックを行ったところが思ったより点数及び速度がイマイチでした。

https://testmysite.withgoogle.com/intl/ja-jp
https://developers.google.com/speed/pagespeed/insights/

大きく対応するべき内容は以下の物

  • 画像の適切なサイズ、Format
  • レンダリングを妨げるリソースの除外
  • 使用していない CSS の遅延読み込み
  • テキスト圧縮の有効化
  • その他

一旦会社の運営しているサーバーは勝手に試すのも出来ないし、テストサーバーはIP等の制限で確認出来ないので、以前から運営している個人サイトで試してみました。経験もない上家に帰って少しずつ進んだので相当時間がかかりましたが、insightsサイトで40位の点数が90位になりました。対応内容は以下の通りです。
complete.png

画像の適切なサイズ、Format
・個人のサイトは画像はあまり使用してないので対応なし

レンダリングを妨げるリソースの除外
・Critical CSSの分割
・CSSのpreload化(「https://github.com/filamentgroup/loadCSS」を利用)

使用していない CSS の遅延読み込み
・ChromeのCoverageで分析
・Chromeの拡張機能:CSS used(https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff)を利用

テキスト圧縮の有効化
・ApacheのGzip
・Cloudflareの利用(Apacheの対応は要らなかった。CDN上でBrotliで圧縮されていた)

※ 「レンダリングを妨げるリソースの除外」部分が専門分野でもないので一番難しいかった。
※ 違う分野で面白く、やりがいがあった。

※ 結局、最終的にはサーバーのランクアップでした。
メモリが1GのLowスペックですので。。。。WWW
complete-02.png

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?