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

Shifterだからできる! ページ遷移のスピードを 神速化 する方法

Shifterだからできる! ページ遷移のスピードを 神速化 する方法

373480d59170ef3212fa5c57036fe3d8?s=128

Daisuke Kawabata

February 06, 2019
Tweet

Transcript

  1. Shifter$  #   "  2019/02/06 Shiftup! JP_Getshifter

    Vol1 LT   STOVE ! 
  2. Shifter 4 3. -2 &) (!)  Service Worker"1'*+% 

    (,Shifter$0//!  (#!!)
  3.   š >BJWordPressDW S6/R< '. "&, ReadyShip ?V/ https://readyship.co/ja/

    +.%+&)-:M4 &* " $.(! š 9IU7T / 1987@L05 K / FA3O STOVE 2Q / =C SI P ;G (3@) → $+.*--#( 1.5@) → H18 4EN X
  4.   š AFNWordPressH[ W9/V? (/!#'- ReadyShip BZ0 https://readyship.co/ja/ ,

    /&,'*.=Q7 '+!# %/)" š <MY:X / 1987DP18 O / JE5S STOVE 4U / @G SI T >K (3D) → %,/+..$( 1.5D) → L2; 4IR \ Ready-Made WordPress 6YC  (3D- )
  5. None
  6. None
  7.    WordPress 5 

  8. None
  9. None
  10. None
  11.  šdev.to   ""   

  12. Shifter + Prefetch + Service Worker (!) š Shifter 

    =   š EC   
  13.   : CloudFront )  š CloudFront"#  ".+"

    &,   š !%(HTML)$%*-40 - 60ms  ((' 30ms)
  14. CloudFront 

  15. CloudFront 

  16. CloudFront    

  17. /5+# - Prefetch + Service Worker )3!" '2 1, /5

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- Service Worker!" 4 š=> 10ms('
  18. /5+# - Prefetch + Service Worker )3!" '2 1, /5

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- Service Worker!" 4 š=> 10ms('
  19. /5+# - Prefetch + Service Worker )3!" '2 1, /5

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- Service Worker!" 4 š=> 10ms(' 8ms!!
  20. &)!'$"( > Service Worker-  š 50/2+3 š ,4'$"(9* #%

    :0/ š Prefetch* #%&)!'$"( 0/16=;.< 87 
  21. Shifter'-4 š 1" &%  š Prefetch( ! 20, š

    1PV  PHP0,$+ 10#  š Shifter3 (/.   *)'-)
  22. Shifter/5< š !#"9(,+ š Prefetch0'$:84 š 1PV PHP84*310)  š

    Shifter; ( 76 %" &21/5) Shifter -.  
  23.  š IntersectionObservera  š IntersectionObserver š Service Worker