Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
110
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
61
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
450
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
670
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
Other Decks in Programming
See All in Programming
20251127_ぼっちのための懇親会対策会議
kokamoto01_metaps
2
420
connect-python: convenient protobuf RPC for Python
anuraaga
0
380
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
220
チームをチームにするEM
hitode909
0
290
俺流レスポンシブコーディング 2025
tak_dcxi
14
8.4k
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
5
1.9k
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
370
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
120
[SF Ruby Conf 2025] Rails X
palkan
0
490
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
37
25k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
120
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
We Have a Design System, Now What?
morganepeng
54
7.9k
A Tale of Four Properties
chriscoyier
162
23k
Embracing the Ebb and Flow
colly
88
4.9k
Being A Developer After 40
akosma
91
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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
以上、 ご清聴ありがとうございました。