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

Transcript

1. 1.

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

   Vol1 LT   STOVE ! 
2. 2.

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

   (,Shifter$0//!  (#!!)
3. 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. 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. 5.

   None
6. 6.

   None
7. 7.

      WordPress
   
   5 

8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

     šdev.to  
    ""   

12. 12.

    
    Shifter + Prefetch + Service Worker (!) š Shifter 

    =  
     š EC   
13. 13.

      : CloudFront )  š 
    CloudFront"# 
    ".+"

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

    CloudFront 
    

15. 15.

    CloudFront 
    

16. 16.

    CloudFront
      

17. 17.

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

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- 
    Service Worker!" 4 š=> 10ms('
18. 18.

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

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- 
    Service Worker!" 4 š=> 10ms('
19. 19.

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

    *6  š &%& š . 70  &Prefetch  š $!" (Service Worker) š &70- 
    Service Worker!" 4 š=> 10ms(' 8ms!!
20. 20.

    
    &)!'$"( > Service Worker-
     
    
    š 50/2+3 š 
    ,4'$"(9* #%

    :0/ š Prefetch* #%
    &)!'$"( 0/1
    6=;.< 87 
21. 21.

    
    Shifter'-4 š 1" &%
    š Prefetch( ! 20, š

    1PV  PHP0,$+ 10#  š Shifter3 (
    /.   *)'-)
22. 22.

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

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

     š IntersectionObserver
    a  š IntersectionObserver š Service Worker