Ionic+PWA対応サイトのLighthouseスコアを34から81まで上げる話

 Ionic+PWA対応サイトのLighthouseスコアを34から81まで上げる話

Ionic Meetup Tokyo #4(2018/05/20)にてLTした資料です。
スコアアップを図ったWebサイトは以下。
https://aahub.org

Tweet

Transcript

  1. Lighthouseのスコア (パフォーマンス)を 34→81まで上げる Ionic Meetup Tokyo #4 @xiaca

  2. 前段

  3. 前回名古屋のIonic Meetupに参加した時 Lighthouseを知りました

  4. さっそく自分のサイトを計測してみたら 34点しかありませんでした。

  5. さっそく自分のサイトを計測してみたら 34点しかありませんでした。 これはよくない

  6. Lighthouseのスコア (パフォーマンス)をあげよう

  7. 削減したサイト 参考:https://aahub.org 概要: AAのオンラインビューアー Ionicで作成したPWA対応のサイト 特徴: 画像を使用していない カスタムフォントを使用している

  8. まずは、CSSの削減。 参考 https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/ 580Kb main.css

  9. iOS、WindowsPhoneのCSSは捨てる ・ionic-app-scriptのconfig/sass.config で設定 ・IonicModule.forRootでmodeをmdだ け読み込むように変更 580Kb→290Kbまで削減 ・node_modules/@ionic/app-scripts/config/  sass.config.js ・src/app/app.module.ts

  10. themeのcolorsは使わない ・ひとつ消す毎に14Kbくらい削減 ・color属性は使わずcssで記述する ように変更 290Kb→198Kbまで削減

  11. 使わないコンポーネントのCSSを削除 ・とくにgridは削除すると30KB削減さ れるので狙い目 ・node_modules/@ionic/app-scripts/config/  sass.config.js 198Kb→100Kbまで削減

  12. purify-cssを使った ・不要なCSSを削除してくれるツー ル 100Kb→70Kbまで削減

  13. 34→56まで改善した

  14. 34→56まで改善した この調子

  15. カスタムフォントから漢字グリフを削除 1.4Mb→45Kbまで削減 ・AAに漢字は不要 ・漢字は等幅なのでAA表示に影響なし  亻人艹丁十  間凧越蟹願

  16. カテゴリ一覧の構造体を別ファイル化 ・カテゴリ一覧を表示するための構造体情報を埋 め込んでいたけど、jsonファイルにして別読み込 みするように変更 1.1Mb→120Kbまで削減(main.js)

  17. 56→69まで改善した 体感レベルでは相当早くなってきた

  18. 56→69まで改善した 体感レベルでは相当早くなってきた もうひとおし

  19. ioniconsの削除 ・必要なiconだけ読み込むように変更 ioniconの読み込みが不要に

  20. HTMLを削減 ・buttonとかをngForで描画するように変更 10Kb削減(main.js)

  21. CSSをインライン化 ・ionic build --prod後のmain.cssをindex.html に移植 RenderBlockingStyleSheetが改善(810ms→0ms)

  22. 69→76まで改善した ついに表示が緑色(オールグリーン)に

  23. 69→76まで改善した ついに表示が緑色(オールグリーン)に が、しかし

  24. ここから先は何をやっても変わらない... • httpClientをaxiosにしてみる • CloudFlareを使ってみる

  25. 最後 環境を変えてみた

  26. ゲーミングPCと有線LANの環境で測定 ・中国から輸入したゲーミングPC CPU: Intel Core i7-7700 Quad Core 3.6GHz メモリ:8GB

    DDR4 RAM SSD:Colorful SL500 240G Hard Disk
  27. 81を超えた!

  28. Ionic v4への期待 • Ionic-angular(310Kb)の軽量化

  29. 引き続きスコアアップを目指します

  30. None
  31. 以上、 ご清聴ありがとうございました。