Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic+PWA対応サイトのLighthouseスコアを34から81まで上げる話
Search
scrpgil
May 20, 2018
Programming
2
1.2k
Ionic+PWA対応サイトのLighthouseスコアを34から81まで上げる話
Ionic Meetup Tokyo #4(2018/05/20)にてLTした資料です。
スコアアップを図ったWebサイトは以下。
https://aahub.org
scrpgil
May 20, 2018
Tweet
Share
More Decks by scrpgil
See All by scrpgil
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
98
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
30
ChatGPTとLangChain さわってみた
scrpgil
0
100
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
440
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
640
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
170
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
PicoRuby on Rails
makicamel
2
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
NPOでのDevinの活用
codeforeveryone
0
840
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
AIともっと楽するE2Eテスト
myohei
6
2.6k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Adopting Sorbet at Scale
ufuk
77
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
140
7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Writing Fast Ruby
sferik
628
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
Lighthouseのスコア (パフォーマンス)を 34→81まで上げる Ionic Meetup Tokyo #4 @xiaca
前段
前回名古屋のIonic Meetupに参加した時 Lighthouseを知りました
さっそく自分のサイトを計測してみたら 34点しかありませんでした。
さっそく自分のサイトを計測してみたら 34点しかありませんでした。 これはよくない
Lighthouseのスコア (パフォーマンス)をあげよう
削減したサイト 参考:https://aahub.org 概要: AAのオンラインビューアー Ionicで作成したPWA対応のサイト 特徴: 画像を使用していない カスタムフォントを使用している
まずは、CSSの削減。 参考 https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/ 580Kb main.css
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
themeのcolorsは使わない ・ひとつ消す毎に14Kbくらい削減 ・color属性は使わずcssで記述する ように変更 290Kb→198Kbまで削減
使わないコンポーネントのCSSを削除 ・とくにgridは削除すると30KB削減さ れるので狙い目 ・node_modules/@ionic/app-scripts/config/ sass.config.js 198Kb→100Kbまで削減
purify-cssを使った ・不要なCSSを削除してくれるツー ル 100Kb→70Kbまで削減
34→56まで改善した
34→56まで改善した この調子
カスタムフォントから漢字グリフを削除 1.4Mb→45Kbまで削減 ・AAに漢字は不要 ・漢字は等幅なのでAA表示に影響なし 亻人艹丁十 間凧越蟹願
カテゴリ一覧の構造体を別ファイル化 ・カテゴリ一覧を表示するための構造体情報を埋 め込んでいたけど、jsonファイルにして別読み込 みするように変更 1.1Mb→120Kbまで削減(main.js)
56→69まで改善した 体感レベルでは相当早くなってきた
56→69まで改善した 体感レベルでは相当早くなってきた もうひとおし
ioniconsの削除 ・必要なiconだけ読み込むように変更 ioniconの読み込みが不要に
HTMLを削減 ・buttonとかをngForで描画するように変更 10Kb削減(main.js)
CSSをインライン化 ・ionic build --prod後のmain.cssをindex.html に移植 RenderBlockingStyleSheetが改善(810ms→0ms)
69→76まで改善した ついに表示が緑色(オールグリーン)に
69→76まで改善した ついに表示が緑色(オールグリーン)に が、しかし
ここから先は何をやっても変わらない... • httpClientをaxiosにしてみる • CloudFlareを使ってみる
最後 環境を変えてみた
ゲーミングPCと有線LANの環境で測定 ・中国から輸入したゲーミングPC CPU: Intel Core i7-7700 Quad Core 3.6GHz メモリ:8GB
DDR4 RAM SSD:Colorful SL500 240G Hard Disk
81を超えた!
Ionic v4への期待 • Ionic-angular(310Kb)の軽量化
引き続きスコアアップを目指します
None
以上、 ご清聴ありがとうございました。