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 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