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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

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

Avatar for Daisuke Kawabata

Daisuke Kawabata

February 06, 2019
Tweet

More Decks by Daisuke Kawabata

Other Decks in Programming

Transcript

  1.   š >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
  2.   š 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- )
  3. Shifter + Prefetch + Service Worker (!) š Shifter 

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

    &,   š !%(HTML)$%*-40 - 60ms  ((' 30ms)
  5. /5+# - Prefetch + Service Worker )3!" '2 1, /5

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

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

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

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

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

    Shifter; ( 76 %" &21/5) Shifter -.