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
99
フレーム問題で考えてみるやる夫スレ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
650
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
130
Model Pollution
hschwentner
1
160
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
AIともっと楽するE2Eテスト
myohei
8
3k
テスト駆動Kaggle
isax1015
1
630
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
効率的な開発手段として VRTを活用する
ishkawa
0
160
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.6k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Language of Interfaces
destraynor
158
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Producing Creativity
orderedlist
PRO
346
40k
Practical Orchestrator
shlominoach
189
11k
GitHub's CSS Performance
jonrohan
1031
460k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Bash Introduction
62gerente
613
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Unsuck your backbone
ammeep
671
58k
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
以上、 ご清聴ありがとうございました。