Ionic/Angularのパフォーマンスチューニング/ionic-angular-perfomance-tuning

Transcript

1. *POJD"OHVMBS

   1FSGPNBODF5VOJOH
   

   View Slide

2. *OUSPEVDF
   .BTBIJLP4BLBLJCBSB
   $&0PG

   3FMBUJPO%FTJHO-BC
   $50PS

   "SFB*OOPWBUJPO"MJBODF
   *POJD+BQBO6TFS(SPVQ

   0SHBOJ[FS
   

   View Slide

3. $POUSJCVUF
   ionic-team/ionic
   ionic-team/starters
   ionic-team/ionic-cli
   ionic-team/ionic-docs
   ionic-team/ionic-react

   -conference-app
   GoogleChrome/lighthouse
   

   View Slide

4. *POJDTVC$-*
   "VUPTFUQSPKFDU MJOUcGPSNBUUFScBMJBT
   
   

   View Slide

5. $BQBDJUPSBENPCc$BQBDJUPSGBDFCPPLMPHJO
   

   View Slide

6. $BQBDJUPSGBDFCPPLMPHJOUVUPSJBM
   

   View Slide

7. <1SPEVDU>"SFB*OOPWBUJPO3FWJFX
   8FCNBHB[JOF

   GPSDJUZNBOBHFNFOU
   

   View Slide

8. <1SPEVDU>*POJD81DPN
   *POJDGPSCVJMENPCJMFCMPH

   VTJOH8PSE1SFTTDPN
   

   View Slide

9. <1SPEVDU>SBCJGZ$%/
   FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E
   *NQSPWFJNBHFEJTQMBZTQFFE

   CZSFTJ[FBOE$%/IPTUJOH
   

   View Slide

10. 
    <1SPEVDU>UJQTZT
    'FNBMFPOMZ4/4

    GPSDSFBUFGFNBMFGSJFOET
    

    View Slide

11. 1FSGPNBODF
    https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
    l/PNBUUFSXIBU GBTUFSJTCFUUFSBOEMFTTJTNPSFz
    

    View Slide

12. *OBQQQVSDIBTFIJTUPSZ
    "1*41&&%61
    

    View Slide

13. 3FRVJSFUIJOLJOH
    *TZPVS"QQMJDBUJPOGBTU
    )PXUPNFBTVSF
    )PXEPFTJUHFUGBTUFS
    

    View Slide

14. 'BTU*POJDBQQMJDBUJPOJTUPPEJ⒏DVMU
    

    View Slide

15. *POJDIBTSPPNGPSUVOJOH
    

    View Slide

16. )PXUPNFBTVSF-JHIUIPVTF
    

    View Slide

17. #VU-JHIUIPVTFJT
    w 1FSGPSNBODFJTQPJOU JTO`UJU
    w $BO`UNFBTVSF'$1'.1
    w *TZPVSFOWJSPONFOUJTDPOTUBOU
    w %PFTPODFIBWFBOZBDDVSBDZ
    

    View Slide

18. DBUDIQPJOU
    

    View Slide

19. DBUDIQPJOUJT
    w 1FSGPSNBODFJTUJNF
    w 6TFBOZWBMVFJOTUFBEPG'$1'.1
    w &OWJSPONFOUJTpYFEQPJOUPCTFSWBUJPO
    w .FBTVSFQFSNJOœGFXUJNF
    

    View Slide

20. &OWJSPONFOU
    w /FUMJGZ"TTFUPQUJNJ[BUJPO%JTBCMF
    w IPVSDMPDL +VOF 4BU
    UPIPVST
    
    w .FBTVSF4BO'SBODJTDP
    w OºEPNBJOT
    w J1IPOF(&NVMBUF
    w 6OJUTNT
    w 6TFTUBSUFSUFNQMBUFAUBCTA
    

    View Slide

21. 6TF&BHFS-PBEJOH.PEVMFT'JSTU1BHF
    Result: Verified
    

    View Slide

22. 6TF&BHFS-PBEJOH.PEVMFT/FYU1BHF
    Result: Verified
    #VUTPNFUJNF 5IJTJODSFBTFUIFCVOEMFTJ[F

    BOENBZTMPXEPXOUIFJOJUJBMEJTQMBZ
    QSFMPBEJOH4USBUFHZ
    

    View Slide

23. 1SFMPBE*POJD$PNQPOFOUT'JSTU1BHF
    Result: Verified
    

    View Slide

24. 1SFMPBE*POJD$PNQPOFOUT/FYU1BHF
    Result: Verified
    

    View Slide

25. 1SFGFUDI+BWB4DSJQUpMFTVTJOHB4FSWJDF8PSLFS'JSTU1BHF
    Result: No Effect
    

    View Slide

26. 1SFGFUDI+BWB4DSJQUpMFTVTJOHB4FSWJDF8PSLFS/FYU1BHF
    Result: Effect at some pattern
    

    View Slide

27. 6OWFSJpFE
    )ZQPUIFTJT1SFMPBEJOH*POJDPOT
    Using rel=“preload" of IonIcon
    Using rel=“preload" of IonImg
    

    View Slide

28. 0QUJPOBM
    w *OMJOF$44
    w 4FSWFS1VTI

    )551
    
    w /FUMJGZWT'JSFCBTF
    IUUQTXXXTBWKFFCF4UBUJDXFCTJUFIPTUJOHXIPJTGBTUFTU
    

    View Slide

29. OHKBQBO!
    

    View Slide