Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Masahiko Sakakibara

July 07, 2019
Tweet

More Decks by Masahiko Sakakibara

Other Decks in Programming

Transcript

  1. *POJD"OHVMBS

    1FSGPNBODF5VOJOH

    View full-size slide

  2. *OUSPEVDF
    .BTBIJLP4BLBLJCBSB
    $&0PG

    3FMBUJPO%FTJHO-BC
    $50PS

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

    0SHBOJ[FS

    View full-size 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 full-size slide

  4. *POJDTVC$-*
    "VUPTFUQSPKFDU MJOUcGPSNBUUFScBMJBT

    View full-size slide

  5. $BQBDJUPSBENPCc$BQBDJUPSGBDFCPPLMPHJO

    View full-size slide

  6. $BQBDJUPSGBDFCPPLMPHJOUVUPSJBM

    View full-size slide

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

    GPSDJUZNBOBHFNFOU

    View full-size slide

  8. <1SPEVDU>*POJD81DPN
    *POJDGPSCVJMENPCJMFCMPH

    VTJOH8PSE1SFTTDPN

    View full-size slide

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

    CZSFTJ[FBOE$%/IPTUJOH

    View full-size slide


  10. <1SPEVDU>UJQTZT
    'FNBMFPOMZ4/4

    GPSDSFBUFGFNBMFGSJFOET

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 'BTU*POJDBQQMJDBUJPOJTUPPEJ⒏DVMU

    View full-size slide

  15. *POJDIBTSPPNGPSUVOJOH

    View full-size slide

  16. )PXUPNFBTVSF-JHIUIPVTF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. &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 full-size slide

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

    View full-size slide

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

    BOENBZTMPXEPXOUIFJOJUJBMEJTQMBZ
    QSFMPBEJOH4USBUFHZ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    )551

    w /FUMJGZWT'JSFCBTF
    IUUQTXXXTBWKFFCF4UBUJDXFCTJUFIPTUJOHXIPJTGBTUFTU

    View full-size slide