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

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

7f95c6712be7d9a89aae7b9b152dad90?s=47 Kou
February 01, 2019
Programming
7
4.9k

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

7f95c6712be7d9a89aae7b9b152dad90?s=128

Kou

February 01, 2019
Tweet

More Decks by Kou

See All by Kou
7f95c6712be7d9a89aae7b9b152dad90?s=48 kkoudev
2
850
7f95c6712be7d9a89aae7b9b152dad90?s=48 kkoudev
1
1.9k
7f95c6712be7d9a89aae7b9b152dad90?s=48 kkoudev
19
9.4k
7f95c6712be7d9a89aae7b9b152dad90?s=48 kkoudev
4
1.8k
7f95c6712be7d9a89aae7b9b152dad90?s=48 kkoudev
0
170

Other Decks in Programming

See All in Programming
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
2
1.5k
37388695483b7c7d355cd9a9dc04281e?s=48 srea
1
220
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
200
640727b1a8120669de9b6d7f1d469893?s=48 ch6noota
0
270
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
170
20ddbe9b7cfdde5e2dfeb8d8714d5de8?s=48 tarugoconf
0
1.7k
F247cc71d9e0bba9f60709c3ae48dd80?s=48 decoch
2
120
E8fae2ce31d2d3700bca68c464862bad?s=48 paru871
0
120
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
110
B3f560d34c14a9113e5024bc34ac26a0?s=48 heyitsmohit
3
230
84931a5617d844ecfda982721de3a9e9?s=48 grace2riku
0
190
2a67c9a199a83a5eada6276f20630cb1?s=48 ohr486
3
150

Featured

See All Featured
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
33
3.2k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.7k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
634
51k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
17
1.3k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
156
12k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
47k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
204
10k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
267
11k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
20k

Transcript

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

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

  3. Google PageSpeed Insightsͱ͸ Google͕ఏڙ͍ͯ͠ΔϞόΠϧ΍ύιίϯ͔ΒαΠτ΁ΞΫηεͨ͠ࡍͷ ύϑΥʔϚϯε͓ΑͼύϑΥʔϚϯεͷ՝୊ͱͳΔ໰୊఺ͷվળํ๏ΛϨ ϙʔτͯ͘͠ΕΔπʔϧͰ͢ɻ ύϑΥʔϚϯε݁Ռͷ෼ྨʹ͍ͭͯ͸ɺҎԼͷ̏ͭͷ෼ྨʹͳΓ·͢ɻ ଎͍ … είΞ

    90 Ҏ্ɻຆͲͷ࠷దԽ͕͞Εͨཧ૝తͳঢ়ଶ ฏۉ … είΞ 50ʙ89 ͷൣғɻ·ͩҰ෦࠷దԽՄೳͳ໰୊఺ΛؚΉ ஗͍ … είΞ 0ʙ49 ͷൣғɻ࠷దԽ͢΂͖఺͕͔ͳΓଟ͋͘Δ ύιίϯ͸ߴείΞΛग़͠΍͍͕͢ɺ ϞόΠϧʹ͍ͭͯ͸3Gճઢ૝ఆͷείΞͱͳ͓ͬͯΓɺ͔ͳΓݫ͠Ίͷ ධՁͱͳΓ·͢ɻ(2019೥1݄ݱࡏ)

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

  5. None

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

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

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

    λάͷࢦఆ͕ڍ͛ ΒΕ·͢ɻͰ͸ɺͲͷΑ͏ͳಡΈࠐΈࢦఆ͕ϨϯμϦϯάϒϩοΫΛҾ͖ ى͜͢ͷͰ͠ΐ͏͔ɻ

  9. ϨϯμϦϯάϒϩοΫίʔυྫ <head> <link rel="stylesheet" href="/common_corporate/asset/css/reset_corporate.css"> <link rel="stylesheet" href="/common_corporate/asset/css/themify-icons.css"> <link rel="stylesheet"

    href="/common_corporate/asset/css/style.css?20181226"> <link rel="stylesheet" href="/common_corporate/asset/css/webfont.css"> <script src="/common_corporate/asset/js/lib/jquery.easing.1.3.js"></script> <script src="/common_corporate/asset/js/lib/jquery.matchHeight-min.js"></script> <script src="/common_corporate/asset/js/lib/truncate-text.js"></script> <script src="/common_corporate/asset/js/script.js"></script> </head> ͜ͷΑ͏ʹɺheadλάʹهड़ͨ͠CSSͷಡΈࠐΈ΍JavaScriptͷಡΈࠐΈ ͸ɺର৅ϑΝΠϧͷಡΈࠐΈͱ࣮ߦ͕׬ྃ͢Δ·ͰHTMLͷύʔεॲཧΛ ࣮ߦ͢Δ͜ͱ͕Ͱ͖ͳ͘ͳΔ(ʹϨϯμϦϯάϒϩοΫ͞ΕΔ)࢓༷ͱͳͬ ͍ͯ·͢ɻheadͰಡΈࠐΈࢦఆ͢ΔϑΝΠϧ͓ΑͼͦͷαΠζ͕ଟ͚Ε ͹ଟ͘ͳΔ΄ͲɺϨϯμϦϯάϒϩοΫ͞ΕΔ͕࣌ؒ௕͘ͳΓɺύϑΥʔ ϚϯεʹଟେͳѱӨڹΛٴ΅͠·͢ɻ

  10. ϨϯμϦϯάϒϩοΫίʔυվળྫᶃ <head> <link rel="preload" href="/common_corporate/asset/css/reset_corporate.css"> <link rel="preload" href="/common_corporate/asset/css/themify-icons.css"> <link rel="preload"

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

  11. ϨϯμϦϯάϒϩοΫίʔυվળྫᶄ <head> <link rel="preload" href=“/common_corporate/asset/css/bundle.css"> <script src=“/common_corporate/asset/js/lib/vendor.bundle.js” defer></script> <script src=“/common_corporate/asset/js/lib/main.js"

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

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

  13. loadCSSͷࢦఆྫ <head> <link rel="preload" href=“/common_corporate/asset/css/bundle.css” onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href=“/common_corporate/asset/css/bundle.css”>

    </noscript> <script> !function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var 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() {t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener? 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(! 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")|| (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() {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} ("undefined"!=typeof global?global:this); </script> </head> loadCSS͸ preload ࢦఆͷରԠϒϥ΢βͰ͋Ε͹ͦͷ··ϒϥ΢βͷ preloadΛར༻͠ɺඇରԠϒϥ΢βͰ͋Ε͹JSʹͯpreload૬౰ͷॲཧΛ࣮ ݱ͢Δ΋ͷʹͳΓ·͢ɻ্هͷྫͷ࠷ޙʹ͋Δscriptλά͕loadCSSͷຊ ମͰɺ͜ΕΛΠϯϥΠϯهड़(ίϐϖ)͠·͢ɻ

  14. preloadࢦఆʹΑΔ໰୊ CSSͷಡΈࠐΈʹ preload Λ࢖༻͢Δ͜ͱͰϨϯμϦϯάϒϩοΫͤͣʹ ඇಉظͰCSSͷಡΈࠐΈ͕Մೳͳ͜ͱΛલͷϖʔδͰ΋঺հ͠·͕ͨ͠ɺ CSS͕ඇಉظͰಡΈࠐ·ΕΔͱɺHTMLඳը࣌ʹը໘ʹCSS͕ॠؒతʹద ༻͞Εͳ͍ঢ়ଶ(ʹը໘่Ε͕ى͖ͯ͠·͏ঢ়ଶ)͕ඳը͞Εͯ͠·͏έʔ ε͕͋Γ·͢ɻ͜ΕΛଏʹ FOUC (Flash

    Of Unstyled Content)ͱݺͼ· ͢ɻ ͱ͸͍͑ɺpreload ࢦఆΛ͠ͳ͚Ε͹ϨϯμϦϯάϒϩοΫ͞Εͯ͠·͍ ·͢ɻͳΜͱ͔͜ͷ̎ͭΛ্ख͘ղܾ͢Δํ๏͸ͳ͍ͷͰ͠ΐ͏͔ɻ

  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λά಺ʹΠϯϥΠϯهड़Λ͓ͯ͘͜͠ͱͰվળՄೳʹͳΓ· ͢ɻ

  16. Critical Path CSSͷࢦఆྫ <head> <link rel="preload" href=“/common_corporate/asset/css/bundle.css"> <style> *,:after,:before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box- sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}

    html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.15; </style> </head>

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

    (ϑΝʔετϏϡʔͷ෯ͱߴ͞͸σϑΥϧτͩͱ 1300x900 ʹͳ͍ͬͯ· ͢ɻجຊతʹ͸ͦͷ··Ͱ΋໰୊ͳ͍Ͱ͢)

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

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

    Insightsʹ͓͚Δࢦఠͷର৅ ͱͳͬͯ͠·͍·͢ɻ

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

  21. 3xղ૾౓࣌୅ͷը૾ͷѻ͍ RetinaσΟεϓϨΠ(2xղ૾౓)͕ొ৔ͯ͠ਵ෼ܦͪ·͕͢ɺ࠷ۙͰ͸͞Β ʹͦͷ্ͷ3xղ૾౓Λ࣋ͭRetina Display͕ొ৔͍ͯ͠·͢ɻ(iPhone Xɺ XSɺXS MaxͳͲ͕͜Εʹ͋ͨΓ·͢) 2x͕ओྲྀͷ࣌୅ͩͱ2xͷը૾͚ͩΛ༻ҙͯͦ͠ΕΛ width ΍

    height ࢦఆ Ͱ 1x αΠζʹͯ͠ίʔσΟϯάΛ͍ͯ͠Δํ΋தʹ͸͍͔ͨͱࢥ͍·͢ ͕ɺ3xαΠζͱͳΔͱ࠷దԽͯ͠΋ͦͦ͜͜େ͖ͳαΠζͰ͢ɻ ͦͷͨΊɺͲͷσΟεϓϨΠʹ͓͍ͯ΋3xΛॖখͯ͠࢖͏ͱ͍ͬͨํ๏ͩ ͱɺ3xղ૾౓Ҏ֎ͷσΟεϓϨΠͰ͸ຊདྷෆཁͳͷʹඞཁҎ্ʹେ͖ͳը ૾ΛಡΈࠐΉඞཁ͕ग़͖ͯͯ͠·͏(ʹ͕͔͔࣌ؒΔ)݁Ռͱͳͬͯ͠·͍ ·͢ɻ ͜ΕΛղܾ͢Δʹ͸Ͳ͏͢Ε͹Α͍Ͱ͠ΐ͏͔ɻ

  22. srcsetଐੑʹ͍ͭͯ imgλάʹ͸srcsetͱ͍͏ଐੑ͕͋Γ·͢ɻ͜Ε͸ը໘ղ૾౓͝ͱʹಡΈ ࠐΉը૾ΛࢦఆͰ͖Δͱ͍͏ଐੑͰ͢ɻҎԼͷΑ͏ʹར༻͠·͢ɻ <img src="./images/display.png" srcset="./images/display@2x.png 2x, ./images/ display@3x.png 3x">

    srcଐੑʹ͸ 1x ͷը૾αΠζɺsrcsetଐੑʹ͸ 2x ͱ 3x ͷը૾αΠζΛ্ هͷΑ͏ʹࢦఆ͢Δ͜ͱͰɺϒϥ΢βଆͰࣗಈతʹը໘ղ૾౓ʹԠͨ͡ը ૾͚ͩΛಡΈࠐΈͯ͘͠Ε·͢ɻ

  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ଐੑͱಉ͡Α͏ʹը૾ύεͷޙʹղ૾౓Λࢦఆ͠·͢ɻ

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

    'picturefill'; picturefill(); JavaScript (Babel)

  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૬౰ͷελΠϧΛ࣮ݱ͢ Δ΋ͷͱͳΓ·͢ɻ

  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 ୯Ґ Ͱࢦఆ͢Δඞཁ͕͋Γ·͢ɻ

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

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

  29. vanilla-lazyloadͷࢦఆྫ HTML <img 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', });

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

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

  32. ·ͱΊ

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

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