フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-

Transcript

1. ϑϩϯτΤϯυίʔσΟϯάʹ͓͚Δ
   PageSpeed Insightsରࡦ
   WEBΤϯδχΞษڧձ #11
   Koichi Nagaoka
   

   View Slide

2. ࣗݾ঺հ
   ௕Ԭ ߒҰ (@kkoudev)
   ϛΫγΟͰΤϯδχΞ΍ͬͯ·͢ɻ
   

   View Slide

3. Google PageSpeed Insightsͱ͸
   Google͕ఏڙ͍ͯ͠ΔϞόΠϧ΍ύιίϯ͔ΒαΠτ΁ΞΫηεͨ͠ࡍͷ
   ύϑΥʔϚϯε͓ΑͼύϑΥʔϚϯεͷ՝୊ͱͳΔ໰୊఺ͷվળํ๏ΛϨ
   ϙʔτͯ͘͠ΕΔπʔϧͰ͢ɻ
   ύϑΥʔϚϯε݁Ռͷ෼ྨʹ͍ͭͯ͸ɺҎԼͷ̏ͭͷ෼ྨʹͳΓ·͢ɻ
   ଎͍ … είΞ 90 Ҏ্ɻຆͲͷ࠷దԽ͕͞Εͨཧ૝తͳঢ়ଶ
   ฏۉ … είΞ 50ʙ89 ͷൣғɻ·ͩҰ෦࠷దԽՄೳͳ໰୊఺ΛؚΉ
   ஗͍ … είΞ 0ʙ49 ͷൣғɻ࠷దԽ͢΂͖఺͕͔ͳΓଟ͋͘Δ
   ύιίϯ͸ߴείΞΛग़͠΍͍͕͢ɺ
   ϞόΠϧʹ͍ͭͯ͸3Gճઢ૝ఆͷείΞͱͳ͓ͬͯΓɺ͔ͳΓݫ͠Ίͷ
   ධՁͱͳΓ·͢ɻ(2019೥1݄ݱࡏ)
   

   View Slide

4. PageSpeed InsightsͰ
   ܭଌͨ͠ͱ͖ͷ݁Ռྫ
   

   View Slide

5. View Slide

6. ࠓճ͸ɺPageSpeed InsightsͰ
   Α͘ࢦఠ͞Ε΍͍͢ύϑΥʔϚϯε্
   ͷ໰୊఺ͱɺͦͷ۩ମతͳվળํ๏ʹ
   ͍ͭͯҰ෦঺հ͠·͢ɻ
   

   View Slide

7. ϨϯμϦϯάϒϩοΫ
   ͷվળ
   1
   

   View Slide

8. ϨϯμϦϯάϒϩοΫͱ͸
   ϨϯμϦϯάϒϩοΫͱ͸ɺJavaScript΍CSSͷϑΝΠϧͷಡΈࠐΈத
   ʹɺฒߦͯ͠ϒϥ΢β͕HTMLͷಡΈࠐΈॲཧΛ࣮ߦͰ͖ͳ͘ͳͬͯ͠·
   ͏ঢ়ଶΛࢦ͠·͢ɻ
   PageSpeed InsightsͰଟ͘ͷαΠτ͕ࢦఠ͞ΕΔ໰୊఺ͱͯ͠ɺ͜ͷϨϯ
   μϦϯάϒϩοΫΛҾ͖ى͜͢ script λάͷࢦఆ΍ link λάͷࢦఆ͕ڍ͛
   ΒΕ·͢ɻͰ͸ɺͲͷΑ͏ͳಡΈࠐΈࢦఆ͕ϨϯμϦϯάϒϩοΫΛҾ͖
   ى͜͢ͷͰ͠ΐ͏͔ɻ
   

   View Slide

9. ϨϯμϦϯάϒϩοΫίʔυྫ
   
   
   
   
   
   
   
   
   
   
   ͜ͷΑ͏ʹɺheadλάʹهड़ͨ͠CSSͷಡΈࠐΈ΍JavaScriptͷಡΈࠐΈ
   ͸ɺର৅ϑΝΠϧͷಡΈࠐΈͱ࣮ߦ͕׬ྃ͢Δ·ͰHTMLͷύʔεॲཧΛ
   ࣮ߦ͢Δ͜ͱ͕Ͱ͖ͳ͘ͳΔ(ʹϨϯμϦϯάϒϩοΫ͞ΕΔ)࢓༷ͱͳͬ
   ͍ͯ·͢ɻheadͰಡΈࠐΈࢦఆ͢ΔϑΝΠϧ͓ΑͼͦͷαΠζ͕ଟ͚Ε
   ͹ଟ͘ͳΔ΄ͲɺϨϯμϦϯάϒϩοΫ͞ΕΔ͕࣌ؒ௕͘ͳΓɺύϑΥʔ
   ϚϯεʹଟେͳѱӨڹΛٴ΅͠·͢ɻ
   

   View Slide

10. ϨϯμϦϯάϒϩοΫίʔυվળྫᶃ
    
    
    
    
    
    
    <br/>script><br/><script src=“/common_corporate/asset/js/lib/truncate-text.js" defer>
    
    
    CSSͷಡΈࠐΈʹ͸ preloadɺJavaScriptͷಡΈࠐΈʹ͸ defer ·ͨ͸
    async Λ࢖͏͜ͱͰಡΈࠐΈॲཧΛϨϯμϦϯάϒϩοΫͤͣʹɺඇಉظ
    ͰಡΈࠐΈ͢Δ͜ͱ͕ՄೳʹͳΓ·͢ɻͰ͸ɺશͯͷλάʹ͜ͷࢦఆΛ͠
    ͯྑ͍ͷ͔ͱ͍͏ͱͦ͏͍͏Θ͚Ͱ͸ͳ͘ɺܭଌλάͷΑ͏ͳHTML͕ಡ
    ΈࠐΈ͞ΕΔલʹεΫϦϓτͷ࣮ߦΛ׬͓͖͍ྃͯͨ͠έʔεʹ͓͍ͯ͸
    defer ΍ async ͸͚ͭͳ͍ྫ͕ଟ͍Ͱ͢ɻ
    

    View Slide

11. ϨϯμϦϯάϒϩοΫίʔυվળྫᶄ
    
    
    
    
    
    preload΍defer, asyncͰඇಉظʹϩʔυͤ͞Δ͚ͩͰ΋ϒϩοΩϯά͸վ
    ળ͠·͕͢ɺ͞ΒͳΔߴ଎Խʹ͸ಡΈࠐΉϑΝΠϧ਺ΛݮΒ͢ඞཁ͕͋Γ
    ·͢ɻվળલͩͱଟ਺ͷCSSͱJSΛಡΈࠐΜͰ͍·͕ͨ͠ɺCSS΍JS͸
    ̍ͭʹͰ͖Δ΋ͷ͸̍ͭʹ·ͱΊͨํ͕ϩʔυ࣌ؒ΋ݮগ͠·͢ɻ
    ͜Ε͸ϒϥ΢β͕1ͭͷυϝΠϯʹରͯ͠Ұ౓ʹฒྻॲཧՄೳͳ઀ଓ਺͕
    ܾ·͓ͬͯΓɺͦͷ਺Λ௒͑Δͱ݁ہಡΈࠐΈʹ͕͔͔࣌ؒΔͨΊͰ͢ɻ
    CSS΍JSΛ1ͭʹ·ͱΊΔʹ͸PostCSSɺwebpackɺParcelɺFuseBoxͳ
    ͲͷόϯυϥʔΛ࢖͏ͱ؆୯ʹͰ͖·͢ɻ
    

    View Slide

12. preloadࢦఆͷओཁϒϥ΢βରԠ
    ࣮͸ preload ͸IEͱFirefoxͰ͸ରԠ͍ͯ͠·ͤΜɻ(ChromeɺSafariɺ
    Edge͸ରԠ͍ͯ͠Δ) ͦΕ͡Ό࢖͑ͳ͍͡ΌΜʂͱࢥΘΕΔ͔΋͠Ε·ͤ
    Μ͕ɺʮfg-loadcssʯ(loadCSS) ͱ͍͏ϞδϡʔϧΛ࢖͏͜ͱͰ؆୯ʹର
    Ԡ͕ՄೳʹͳΓ·͢ɻ
    https://www.npmjs.com/package/fg-loadcss
    

    View Slide

13. loadCSSͷࢦఆྫ
    
    
    
    
    
    <br/>!function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var<br/>e;try{e=n.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),o.bindMediaToggle=function(t){var e=t.media||"all";function a()<br/>{t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener?<br/>t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},o.poly=function(){if(!<br/>o.support())for(var t=n.document.getElementsByTagName("link"),e=0;e<t.length;e++){var a=t[e];"preload"!==a.rel||"style"!==a.getAttribute("as")||a.getAttribute("data-loadcss")||<br/>(a.setAttribute("data-loadcss",!0),o.bindMediaToggle(a))}},!o.support()){o.poly();var t=n.setInterval(o.poly,500);n.addEventListener?n.addEventListener("load",function()<br/>{o.poly(),n.clearInterval(t)}):n.attachEvent&&n.attachEvent("onload",function(){o.poly(),n.clearInterval(t)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:n.loadCSS=loadCSS}<br/>("undefined"!=typeof global?global:this);<br/>
    
    loadCSS͸ preload ࢦఆͷରԠϒϥ΢βͰ͋Ε͹ͦͷ··ϒϥ΢βͷ
    preloadΛར༻͠ɺඇରԠϒϥ΢βͰ͋Ε͹JSʹͯpreload૬౰ͷॲཧΛ࣮
    ݱ͢Δ΋ͷʹͳΓ·͢ɻ্هͷྫͷ࠷ޙʹ͋Δscriptλά͕loadCSSͷຊ
    ମͰɺ͜ΕΛΠϯϥΠϯهड़(ίϐϖ)͠·͢ɻ
    

    View Slide

14. preloadࢦఆʹΑΔ໰୊
    CSSͷಡΈࠐΈʹ preload Λ࢖༻͢Δ͜ͱͰϨϯμϦϯάϒϩοΫͤͣʹ
    ඇಉظͰCSSͷಡΈࠐΈ͕Մೳͳ͜ͱΛલͷϖʔδͰ΋঺հ͠·͕ͨ͠ɺ
    CSS͕ඇಉظͰಡΈࠐ·ΕΔͱɺHTMLඳը࣌ʹը໘ʹCSS͕ॠؒతʹద
    ༻͞Εͳ͍ঢ়ଶ(ʹը໘่Ε͕ى͖ͯ͠·͏ঢ়ଶ)͕ඳը͞Εͯ͠·͏έʔ
    ε͕͋Γ·͢ɻ͜ΕΛଏʹ FOUC (Flash Of Unstyled Content)ͱݺͼ·
    ͢ɻ
    ͱ͸͍͑ɺpreload ࢦఆΛ͠ͳ͚Ε͹ϨϯμϦϯάϒϩοΫ͞Εͯ͠·͍
    ·͢ɻͳΜͱ͔͜ͷ̎ͭΛ্ख͘ղܾ͢Δํ๏͸ͳ͍ͷͰ͠ΐ͏͔ɻ
    

    View Slide

15. Critical Path CSSͷࢦఆ
    Critical Path CSSͱ͸Critical Rendering PathΛվળ͢ΔͨΊͷCSSʹͳ
    Γ·͢ɻCritical Rendering Pathͱ͸ϒϥ΢βʹ࣮ࡍʹը໘Λඳը͢Δͨ
    Ίʹඞཁͳॲཧγʔέϯεͷ͜ͱΛࢦ͠·͢ɻCritical Path CSS͸Critical
    Rendering PathͷCSSʹؔ͢Δ෦෼Λࢦ͠·͢ɻ
    Θ͔Γ΍͍͑͘͢͹ɺϑΝʔετϏϡʔͷඳըʹඞཁͳCSSͱ͍ͬͨͱ͜
    ΖʹͳΓ·͢ɻ
    preload࣌ͷFOUCΛվળ͢Δʹ͸ɺ͜ͷCritical Path CSSΛ͋Β͔͡Ί
    HTMLͷstyleλά಺ʹΠϯϥΠϯهड़Λ͓ͯ͘͜͠ͱͰվળՄೳʹͳΓ·
    ͢ɻ
    

    View Slide

16. Critical Path CSSͷࢦఆྫ
    
    
    <br/>*,:after,:before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-<br/>sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}<br/>html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto<br/>Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color<br/>Emoji;line-height:1.15;<br/>
    
    

    View Slide

17. Critical Path CSSͷࣗಈੜ੒
    ຖճΠϯϥΠϯཁૉͱͯ͠खಈͰهड़͢Δʹ͸ແཧ͕͋ΔͷͰɺCritical
    Path CSS͸ݩͷCSS͔Βࣗಈੜ੒͢Δͷ͕ओྲྀͰ͢ɻ
    ࣗಈੜ੒Λߦ͏ʹ͸ɺʮcriticalʯͱ͍͏NPMϞδϡʔϧΛར༻͠·͢ɻ
    https://www.npmjs.com/package/critical
    critical͸ϑΝʔετϏϡʔͷ෯ͱߴ͞Λࢦఆ͠ɺͦͷൣғͰඞཁͱͳΔε
    λΠϧ৘ใΛݩͷCSSϑΝΠϧ͔Βग़ྗ͢Δ࢓૊Έʹͳ͍ͬͯ·͢ɻ
    (ϑΝʔετϏϡʔͷ෯ͱߴ͞͸σϑΥϧτͩͱ 1300x900 ʹͳ͍ͬͯ·
    ͢ɻجຊతʹ͸ͦͷ··Ͱ΋໰୊ͳ͍Ͱ͢)
    

    View Slide

18. ը૾ಡΈࠐΈ
    ͷվળ
    2
    

    View Slide

19. ը૾ͷಡΈࠐΈͷվળʹ͍ͭͯ
    ϨϯμϦϯάϒϩοΫͷ࣍͸ɺը૾ͷಡΈࠐΈͷվળʹ͍ͭͯʹͳΓ·
    ͢ɻPageSpeed InsightsͰଟ͘ͷαΠτ͕ࢦఠ͞ΕΔ߲໨ͷ̍ͭͱͯ͠
    ʮը૾αΠζͷ࠷దԽ͕͞Ε͍ͯͳ͍ʯͱ͍͏΋ͷ͕͋Γ·͢ɻ
    PageSpeed InsightsͰείΞΛ্͛ΔͨΊʹ͸ɺՄೳͳݶΓը૾ͷαΠζ
    ΋খ͍ͯ͘͘͞͠ඞཁ͕͋Γ·͢ɻجຊతʹPhotoshopΛ͸͡Ίͱͨ͠π
    ʔϧͰԿ΋ࢦఆͤͣpng΍jpegը૾Λग़ྗͨ͠΋ͷ͸ը૾αΠζ͕࠷దԽ
    ͞Ε͍ͯͳ͍ͨΊɺͦͷ··ͩͱPageSpeed Insightsʹ͓͚Δࢦఠͷର৅
    ͱͳͬͯ͠·͍·͢ɻ
    

    View Slide

20. ը૾αΠζͷ࠷దԽํ๏
    ҰൠతʹΑ͘࢖ΘΕ͍ͯΔϞδϡʔϧͱͯ͠ʮimageminʯͱ͍͏NPMϞ
    δϡʔϧ͕͋Γ·͢ɻ͜Εͱ࠷దԽ͍ͨ͠ը૾͝ͱʹ༻ҙ͞Ε͍ͯΔϓϥ
    άΠϯϞδϡʔϧ(ʮimagemin-pngquantʯ΍ʮimagemin-mozjpegʯͱ͍
    ͏Ϟδϡʔϧ)Λ࢖͑͹؆୯ʹ࠷దԽ͕ՄೳͱͳΓ·͢ɻ
    https://www.npmjs.com/package/imagemin
    

    View Slide

21. 3xղ૾౓࣌୅ͷը૾ͷѻ͍
    RetinaσΟεϓϨΠ(2xղ૾౓)͕ొ৔ͯ͠ਵ෼ܦͪ·͕͢ɺ࠷ۙͰ͸͞Β
    ʹͦͷ্ͷ3xղ૾౓Λ࣋ͭRetina Display͕ొ৔͍ͯ͠·͢ɻ(iPhone Xɺ
    XSɺXS MaxͳͲ͕͜Εʹ͋ͨΓ·͢)
    2x͕ओྲྀͷ࣌୅ͩͱ2xͷը૾͚ͩΛ༻ҙͯͦ͠ΕΛ width ΍ height ࢦఆ
    Ͱ 1x αΠζʹͯ͠ίʔσΟϯάΛ͍ͯ͠Δํ΋தʹ͸͍͔ͨͱࢥ͍·͢
    ͕ɺ3xαΠζͱͳΔͱ࠷దԽͯ͠΋ͦͦ͜͜େ͖ͳαΠζͰ͢ɻ
    ͦͷͨΊɺͲͷσΟεϓϨΠʹ͓͍ͯ΋3xΛॖখͯ͠࢖͏ͱ͍ͬͨํ๏ͩ
    ͱɺ3xղ૾౓Ҏ֎ͷσΟεϓϨΠͰ͸ຊདྷෆཁͳͷʹඞཁҎ্ʹେ͖ͳը
    ૾ΛಡΈࠐΉඞཁ͕ग़͖ͯͯ͠·͏(ʹ͕͔͔࣌ؒΔ)݁Ռͱͳͬͯ͠·͍
    ·͢ɻ
    ͜ΕΛղܾ͢Δʹ͸Ͳ͏͢Ε͹Α͍Ͱ͠ΐ͏͔ɻ
    

    View Slide

22. srcsetଐੑʹ͍ͭͯ
    imgλάʹ͸srcsetͱ͍͏ଐੑ͕͋Γ·͢ɻ͜Ε͸ը໘ղ૾౓͝ͱʹಡΈ
    ࠐΉը૾ΛࢦఆͰ͖Δͱ͍͏ଐੑͰ͢ɻҎԼͷΑ͏ʹར༻͠·͢ɻ
    
    srcଐੑʹ͸ 1x ͷը૾αΠζɺsrcsetଐੑʹ͸ 2x ͱ 3x ͷը૾αΠζΛ্
    هͷΑ͏ʹࢦఆ͢Δ͜ͱͰɺϒϥ΢βଆͰࣗಈతʹը໘ղ૾౓ʹԠͨ͡ը
    ૾͚ͩΛಡΈࠐΈͯ͘͠Ε·͢ɻ
    

    View Slide

23. CSSͷimage-setؔ਺ʹ͍ͭͯ
    CSSʹ΋imgλάͷsrcsetଐੑͷΑ͏ʹը໘ղ૾౓͝ͱʹը૾ΛઃఆͰ͖
    Δimage-setͱ͍͏ؔ਺͕͋Γ·͢ɻҎԼͷΑ͏ʹࢦఆ͠·͢ɻ
    .bg-image {
    background-image: image-set(
    url(‘./images/display.png') 1x,
    url('./images/display@2x.png') 2x,
    url('./images/display@3x.png') 3x)
    }
    srcsetଐੑͱಉ͡Α͏ʹը૾ύεͷޙʹղ૾౓Λࢦఆ͠·͢ɻ
    

    View Slide

24. srcsetଐੑͷIE11ରԠ
    ྫʹΑͬͯ IE11 ͸srcsetଐੑʹରԠ͍ͯ͠·ͤΜɻ໘౗Ͱ͕͢PolyfillͰର
    Ԡ͢Δඞཁ͕͋Γ·͢ɻIE11ͰsrcsetଐੑΛར༻͢Δʹ͸ʮpicturefillʯͱ
    ͍͏NPMϞδϡʔϧΛར༻͠·͢ɻҎԼ͕ࢦఆྫʹͳΓ·͢ɻ
    https://www.npmjs.com/package/picturefill
    import picturefill from 'picturefill';
    picturefill();
    JavaScript (Babel)
    

    View Slide

25. image-setؔ਺ͷओཁϒϥ΢βରԠ
    ͜Ε·ͨྫʹΑͬͯimage-setؔ਺͸ChromeͱSafari͔͠ओཁϒϥ΢βͰ
    ͸ରԠ͓ͯ͠ΒͣɺIE΍FirefoxͰ͸ରԠ͍ͯ͠·ͤΜɻ
    ͜ͷ໰୊ʹର͢ΔରԠͱͯ͠͸ PostCSS ͷϓϥάΠϯͰ͋Δʮpostcss-
    image-set-polyfillʯϞδϡʔϧΛར༻͢Δ͜ͱͰճආͰ͖·͢ɻ
    https://www.npmjs.com/package/postcss-image-set-polyfill
    ͜ͷPolyfill͸JSΛར༻͢ΔͷͰ͸ͳ͘ɺCSSͷmedia queryΛར༻ͯ͠ը
    ໘ղ૾౓Λ൑ఆ͢Δ͜ͱͰɺٖࣅతʹimage-set૬౰ͷελΠϧΛ࣮ݱ͢
    Δ΋ͷͱͳΓ·͢ɻ
    

    View Slide

26. image-setؔ਺ͷIE11ରԠ
    ʮpostcss-image-set-polyfillʯΛར༻͢Δʹ͋ͨͬͯ̍఺஫ҙ͕͋Γ·
    ͢ɻͦΕ͸IE11ͷରԠͰ͢ɻલड़ͷ௨Γɺʮpostcss-image-set-polyfillʯ͸
    CSSͷmedia queryʹΑٖͬͯࣅతʹimage-setΛ࣮ݱ͢Δ΋ͷͰ͕͢ɺ
    IE11Ͱ͸ͳΜͱ1x΍2xͱ͍ͬͨղ૾౓୯ҐΛmedia queryͰαϙʔτ͠
    ͍ͯͳ͍ͷͰ͢ɻͭͮ͘͘खͷ͔͔Δϒϥ΢βͰ͢Ͷɻճආࡦͱͯ͠͸ผ
    ͷ୯Ґ(dpi)Λར༻͠·͢ɻdpiΛར༻ͨ࣌͠ͷը໘ղ૾౓ͷࢦఆ͸ҎԼͷ
    ௨ΓʹͳΓ·͢ɻ
    1x … 96dpi
    2x … 192dpi
    3x … 288dpi
    ͦͷͨΊɺIE11ʹ΋ରԠ͢Δʹ͸ɺimage-setʹ͓͚Δղ૾౓͸ dpi ୯Ґ
    Ͱࢦఆ͢Δඞཁ͕͋Γ·͢ɻ
    

    View Slide

27. ը૾ͷ஗ԆಡΈࠐΈͷར༻ʹ͍ͭͯ
    ը໘ղ૾౓ผʹ࠷దͳը૾Λϩʔυ͢ΔॲཧΛೖΕͨͱ͜ΖͰɺͲͪΒʹ
    ͤΑಡΈࠐΈ͢Δը૾਺͕ଟա͗ͨΓαΠζ͕େ͖͍ͱ݁ہಡΈࠐΈʹ࣌
    ͕͔͔ؒΔ݁Ռͱͳͬͯ͠·͍·͢ɻ
    ͦͷͨΊΑ͘ར༻͞ΕΔख๏ͱͯ͠͸ɺը໘ʹ·ͩදࣔ͞Ε͍ͯͳ͍ը૾
    Λޙ͔ΒಡΈࠐΉը૾஗ԆಡΈࠐΈ(lazyload)Λར༻͠·͢ɻ
    PageSpeed InsightsͷϞόΠϧධՁʹ͓͍ͯ͸ϑΝʔετϏϡʔʹදࣔ͞
    Ε͍ͯͳ͍ը૾ʹlayzloadΛద༻͠ͳ͍ͱࢦఠͷର৅ͱͳͬͯ͠·͍·
    ͢ɻ
    

    View Slide

28. ը૾஗ԆಡΈࠐΈͷରԠ
    ը૾஗ԆಡΈࠐΈͷϥΠϒϥϦ͸ଟ਺͋Γ·͕͢ɺલड़ͷsrcsetଐੑʹର
    Ԡͨ͠΋ͷ͸ݶΒΕ͍ͯ·͢ɻ͓͢͢Ίͳͷ͕ʮvanilla-lazyloadʯͱ͍͏
    NPMϞδϡʔϧͰ͢ɻ͜ΕΛ࢖͏ͱ src ଐੑ͚ͩͰͳ͘ srcset ଐੑͷ
    lazyloadʹ΋ରԠ͕ՄೳͰ͢ɻ
    https://www.npmjs.com/package/vanilla-lazyload
    

    View Slide

29. vanilla-lazyloadͷࢦఆྫ
    HTML
    class="js-lazyload"
    src="./images/loading.png"
    data-src="./images/display.png"
    data-srcset="./images/display@2x.png 2x, ./images/display@3x.png 3x"
    alt="Display Image")
    />
    JavaScript (Babel)
    import LazyLoad from 'vanilla-lazyload';
    new LazyLoad({
    elements_selector: '.js-lazyload',
    });
    

    View Slide

30. αʔόαΠυ
    ͷվળ
    3
    

    View Slide

31. αʔόαΠυͷվળʹ͍ͭͯ
    PageSpeed Insightsʹ͓͍ͯ͸CSS΍JSɺը૾ͷѹॖ΍ظݶ(Expires)ͷ
    ࢦఆʹ͍ͭͯͷࢦఠ΋͋Γ·͢ɻ
    ͜ΕΒ͸αʔόαΠυଆͰͷ഑৴࣌ͷઃఆͱͳΓɺϑϩϯτΤϯυଆͷΈ
    Ͱ͸੍ޚ͕Ͱ͖·ͤΜɻ
    ؆୯ʹݴ͑͹ɺNginx΍ApacheͳͲͷHTTPαʔόʔɺ·ͨ͸CloudFront
    ͳͲͷCDNΛ࢖ͬͯgzipѹॖͷࢦఆͱExpiresͷࢦఆΛߦ͏͜ͱͰվળՄ
    ೳͰ͢ɻ
    (͜͜Ͱ͸֓ཁͷΈͷ঺հͱ͠·͢)
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. WebαΠτͷύϑΥʔϚϯε͸Ϣʔβ
    ʔମݧͷվળ͚ͩͰͳ͘ɺSEOʹ΋͋
    Δఔ౓ӨڹΛٴ΅͠·͢ɻԿΑΓ
    PageSpeed InsightsͰߴείΞΛୟ͖
    ग़͢ͱͦΕ͚ͩͰྑ͍αΠτײ͕ग़ͯ
    ͘ΔͷͰੋඇͱ΋ରࡦ͢Δ͜ͱΛ͓͢
    ͢Ί͠·͢ʂ
    

    View Slide

34. THANK YOU
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide