Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
Kou
February 01, 2019
Programming
6
4.4k
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
Kou
February 01, 2019
Tweet
Share
More Decks by Kou
See All by Kou
kkoudev
2
710
kkoudev
1
1.8k
kkoudev
19
8.6k
kkoudev
4
1.6k
kkoudev
0
140
Other Decks in Programming
See All in Programming
grapecity_dev
0
170
grapecity_dev
0
190
temoki
2
210
vixentael
0
300
oleindesign
1
200
layzee
1
180
grapecity_dev
0
160
kgmyshin
1
440
dbrumann
0
100
zwass
0
340
yoshinoriiiii
0
110
danilop
0
260
Featured
See All Featured
schacon
145
6.6k
bkeepers
321
53k
morganepeng
18
1.2k
kastner
54
1.9k
swwweet
206
6.9k
trishagee
23
2.4k
chrislema
173
14k
danielanewman
200
20k
cherdarchuk
71
260k
morganepeng
93
14k
mza
80
4.1k
danielanewman
1
510
Transcript
ϑϩϯτΤϯυίʔσΟϯάʹ͓͚Δ PageSpeed Insightsରࡦ WEBΤϯδχΞษڧձ #11 Koichi Nagaoka
ࣗݾհ Ԭ ߒҰ (@kkoudev) ϛΫγΟͰΤϯδχΞͬͯ·͢ɻ
Google PageSpeed Insightsͱ Google͕ఏڙ͍ͯ͠ΔϞόΠϧύιίϯ͔ΒαΠτΞΫηεͨ͠ࡍͷ ύϑΥʔϚϯε͓ΑͼύϑΥʔϚϯεͷ՝ͱͳΔͷվળํ๏ΛϨ ϙʔτͯ͘͠ΕΔπʔϧͰ͢ɻ ύϑΥʔϚϯε݁Ռͷྨʹ͍ͭͯɺҎԼͷ̏ͭͷྨʹͳΓ·͢ɻ ͍ … είΞ
90 Ҏ্ɻຆͲͷ࠷దԽ͕͞Εͨཧతͳঢ়ଶ ฏۉ … είΞ 50ʙ89 ͷൣғɻ·ͩҰ෦࠷దԽՄೳͳΛؚΉ ͍ … είΞ 0ʙ49 ͷൣғɻ࠷దԽ͖͕͔͢ͳΓଟ͋͘Δ ύιίϯߴείΞΛग़͍͕͢͠ɺ ϞόΠϧʹ͍ͭͯ3GճઢఆͷείΞͱͳ͓ͬͯΓɺ͔ͳΓݫ͠Ίͷ ධՁͱͳΓ·͢ɻ(20191݄ݱࡏ)
PageSpeed InsightsͰ ܭଌͨ͠ͱ͖ͷ݁Ռྫ
None
ࠓճɺPageSpeed InsightsͰ Α͘ࢦఠ͞Ε͍͢ύϑΥʔϚϯε্ ͷͱɺͦͷ۩ମతͳվળํ๏ʹ ͍ͭͯҰ෦հ͠·͢ɻ
ϨϯμϦϯάϒϩοΫ ͷվળ 1
ϨϯμϦϯάϒϩοΫͱ ϨϯμϦϯάϒϩοΫͱɺJavaScriptCSSͷϑΝΠϧͷಡΈࠐΈத ʹɺฒߦͯ͠ϒϥβ͕HTMLͷಡΈࠐΈॲཧΛ࣮ߦͰ͖ͳ͘ͳͬͯ͠· ͏ঢ়ଶΛࢦ͠·͢ɻ PageSpeed InsightsͰଟ͘ͷαΠτ͕ࢦఠ͞ΕΔͱͯ͠ɺ͜ͷϨϯ μϦϯάϒϩοΫΛҾ͖ى͜͢ script λάͷࢦఆ link
λάͷࢦఆ͕ڍ͛ ΒΕ·͢ɻͰɺͲͷΑ͏ͳಡΈࠐΈࢦఆ͕ϨϯμϦϯάϒϩοΫΛҾ͖ ى͜͢ͷͰ͠ΐ͏͔ɻ
ϨϯμϦϯάϒϩοΫίʔυྫ <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ͰಡΈࠐΈࢦఆ͢ΔϑΝΠϧ͓ΑͼͦͷαΠζ͕ଟ͚Ε ଟ͘ͳΔ΄ͲɺϨϯμϦϯάϒϩοΫ͞ΕΔ͕࣌ؒ͘ͳΓɺύϑΥʔ ϚϯεʹଟେͳѱӨڹΛٴ΅͠·͢ɻ
ϨϯμϦϯάϒϩοΫίʔυվળྫᶃ <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 ͚ͭͳ͍ྫ͕ଟ͍Ͱ͢ɻ
ϨϯμϦϯάϒϩοΫίʔυվળྫᶄ <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> preloaddefer, asyncͰඇಉظʹϩʔυͤ͞Δ͚ͩͰϒϩοΩϯάվ ળ͠·͕͢ɺ͞ΒͳΔߴԽʹಡΈࠐΉϑΝΠϧΛݮΒ͢ඞཁ͕͋Γ ·͢ɻվળલͩͱଟͷCSSͱJSΛಡΈࠐΜͰ͍·͕ͨ͠ɺCSSJS ̍ͭʹͰ͖Δͷ̍ͭʹ·ͱΊͨํ͕ϩʔυ࣌ؒݮগ͠·͢ɻ ͜Εϒϥβ͕1ͭͷυϝΠϯʹରͯ͠ҰʹฒྻॲཧՄೳͳଓ͕ ܾ·͓ͬͯΓɺͦͷΛ͑Δͱ݁ہಡΈࠐΈʹ͕͔͔࣌ؒΔͨΊͰ͢ɻ CSSJSΛ1ͭʹ·ͱΊΔʹPostCSSɺwebpackɺParcelɺFuseBoxͳ ͲͷόϯυϥʔΛ͏ͱ؆୯ʹͰ͖·͢ɻ
preloadࢦఆͷओཁϒϥβରԠ ࣮ preload IEͱFirefoxͰରԠ͍ͯ͠·ͤΜɻ(ChromeɺSafariɺ EdgeରԠ͍ͯ͠Δ) ͦΕ͡Ό͑ͳ͍͡ΌΜʂͱࢥΘΕΔ͔͠Ε·ͤ Μ͕ɺʮfg-loadcssʯ(loadCSS) ͱ͍͏ϞδϡʔϧΛ͏͜ͱͰ؆୯ʹର Ԡ͕ՄೳʹͳΓ·͢ɻ https://www.npmjs.com/package/fg-loadcss
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ͷຊ ମͰɺ͜ΕΛΠϯϥΠϯهड़(ίϐϖ)͠·͢ɻ
preloadࢦఆʹΑΔ CSSͷಡΈࠐΈʹ preload Λ༻͢Δ͜ͱͰϨϯμϦϯάϒϩοΫͤͣʹ ඇಉظͰCSSͷಡΈࠐΈ͕Մೳͳ͜ͱΛલͷϖʔδͰհ͠·͕ͨ͠ɺ CSS͕ඇಉظͰಡΈࠐ·ΕΔͱɺHTMLඳը࣌ʹը໘ʹCSS͕ॠؒతʹద ༻͞Εͳ͍ঢ়ଶ(ʹը໘่Ε͕ى͖ͯ͠·͏ঢ়ଶ)͕ඳը͞Εͯ͠·͏έʔ ε͕͋Γ·͢ɻ͜ΕΛଏʹ FOUC (Flash
Of Unstyled Content)ͱݺͼ· ͢ɻ ͱ͍͑ɺpreload ࢦఆΛ͠ͳ͚ΕϨϯμϦϯάϒϩοΫ͞Εͯ͠·͍ ·͢ɻͳΜͱ͔͜ͷ̎ͭΛ্ख͘ղܾ͢Δํ๏ͳ͍ͷͰ͠ΐ͏͔ɻ
Critical Path CSSͷࢦఆ Critical Path CSSͱCritical Rendering PathΛվળ͢ΔͨΊͷCSSʹͳ Γ·͢ɻCritical Rendering
Pathͱϒϥβʹ࣮ࡍʹը໘Λඳը͢Δͨ Ίʹඞཁͳॲཧγʔέϯεͷ͜ͱΛࢦ͠·͢ɻCritical Path CSSCritical Rendering PathͷCSSʹؔ͢Δ෦Λࢦ͠·͢ɻ Θ͔Γ͍͑͘͢ɺϑΝʔετϏϡʔͷඳըʹඞཁͳCSSͱ͍ͬͨͱ͜ ΖʹͳΓ·͢ɻ preload࣌ͷFOUCΛվળ͢Δʹɺ͜ͷCritical Path CSSΛ͋Β͔͡Ί HTMLͷstyleλάʹΠϯϥΠϯهड़Λ͓ͯ͘͜͠ͱͰվળՄೳʹͳΓ· ͢ɻ
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>
Critical Path CSSͷࣗಈੜ ຖճΠϯϥΠϯཁૉͱͯ͠खಈͰهड़͢Δʹແཧ͕͋ΔͷͰɺCritical Path CSSݩͷCSS͔Βࣗಈੜ͢Δͷ͕ओྲྀͰ͢ɻ ࣗಈੜΛߦ͏ʹɺʮcriticalʯͱ͍͏NPMϞδϡʔϧΛར༻͠·͢ɻ https://www.npmjs.com/package/critical criticalϑΝʔετϏϡʔͷ෯ͱߴ͞Λࢦఆ͠ɺͦͷൣғͰඞཁͱͳΔε λΠϧใΛݩͷCSSϑΝΠϧ͔Βग़ྗ͢ΔΈʹͳ͍ͬͯ·͢ɻ
(ϑΝʔετϏϡʔͷ෯ͱߴ͞σϑΥϧτͩͱ 1300x900 ʹͳ͍ͬͯ· ͢ɻجຊతʹͦͷ··Ͱͳ͍Ͱ͢)
ը૾ಡΈࠐΈ ͷվળ 2
ը૾ͷಡΈࠐΈͷվળʹ͍ͭͯ ϨϯμϦϯάϒϩοΫͷ࣍ɺը૾ͷಡΈࠐΈͷվળʹ͍ͭͯʹͳΓ· ͢ɻPageSpeed InsightsͰଟ͘ͷαΠτ͕ࢦఠ͞ΕΔ߲ͷ̍ͭͱͯ͠ ʮը૾αΠζͷ࠷దԽ͕͞Ε͍ͯͳ͍ʯͱ͍͏ͷ͕͋Γ·͢ɻ PageSpeed InsightsͰείΞΛ্͛ΔͨΊʹɺՄೳͳݶΓը૾ͷαΠζ খ͍ͯ͘͘͞͠ඞཁ͕͋Γ·͢ɻجຊతʹPhotoshopΛ͡Ίͱͨ͠π ʔϧͰԿࢦఆͤͣpngjpegը૾Λग़ྗͨ͠ͷը૾αΠζ͕࠷దԽ ͞Ε͍ͯͳ͍ͨΊɺͦͷ··ͩͱPageSpeed
Insightsʹ͓͚Δࢦఠͷର ͱͳͬͯ͠·͍·͢ɻ
ը૾αΠζͷ࠷దԽํ๏ ҰൠతʹΑ͘ΘΕ͍ͯΔϞδϡʔϧͱͯ͠ʮimageminʯͱ͍͏NPMϞ δϡʔϧ͕͋Γ·͢ɻ͜Εͱ࠷దԽ͍ͨ͠ը૾͝ͱʹ༻ҙ͞Ε͍ͯΔϓϥ άΠϯϞδϡʔϧ(ʮimagemin-pngquantʯʮimagemin-mozjpegʯͱ͍ ͏Ϟδϡʔϧ)Λ͑؆୯ʹ࠷దԽ͕ՄೳͱͳΓ·͢ɻ https://www.npmjs.com/package/imagemin
3xղ૾࣌ͷը૾ͷѻ͍ RetinaσΟεϓϨΠ(2xղ૾)͕ొͯ͠ਵܦͪ·͕͢ɺ࠷ۙͰ͞Β ʹͦͷ্ͷ3xղ૾Λ࣋ͭRetina Display͕ొ͍ͯ͠·͢ɻ(iPhone Xɺ XSɺXS MaxͳͲ͕͜Εʹ͋ͨΓ·͢) 2x͕ओྲྀͷ࣌ͩͱ2xͷը૾͚ͩΛ༻ҙͯͦ͠ΕΛ width
height ࢦఆ Ͱ 1x αΠζʹͯ͠ίʔσΟϯάΛ͍ͯ͠Δํதʹ͍͔ͨͱࢥ͍·͢ ͕ɺ3xαΠζͱͳΔͱ࠷దԽͯͦͦ͜͜͠େ͖ͳαΠζͰ͢ɻ ͦͷͨΊɺͲͷσΟεϓϨΠʹ͓͍ͯ3xΛॖখͯ͠͏ͱ͍ͬͨํ๏ͩ ͱɺ3xղ૾Ҏ֎ͷσΟεϓϨΠͰຊདྷෆཁͳͷʹඞཁҎ্ʹେ͖ͳը ૾ΛಡΈࠐΉඞཁ͕ग़͖ͯͯ͠·͏(ʹ͕͔͔࣌ؒΔ)݁Ռͱͳͬͯ͠·͍ ·͢ɻ ͜ΕΛղܾ͢ΔʹͲ͏͢ΕΑ͍Ͱ͠ΐ͏͔ɻ
srcsetଐੑʹ͍ͭͯ imgλάʹsrcsetͱ͍͏ଐੑ͕͋Γ·͢ɻ͜Εը໘ղ૾͝ͱʹಡΈ ࠐΉը૾ΛࢦఆͰ͖Δͱ͍͏ଐੑͰ͢ɻҎԼͷΑ͏ʹར༻͠·͢ɻ <img src="./images/display.png" srcset="./images/display@2x.png 2x, ./images/ display@3x.png 3x">
srcଐੑʹ 1x ͷը૾αΠζɺsrcsetଐੑʹ 2x ͱ 3x ͷը૾αΠζΛ্ هͷΑ͏ʹࢦఆ͢Δ͜ͱͰɺϒϥβଆͰࣗಈతʹը໘ղ૾ʹԠͨ͡ը ૾͚ͩΛಡΈࠐΈͯ͘͠Ε·͢ɻ
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ଐੑͱಉ͡Α͏ʹը૾ύεͷޙʹղ૾Λࢦఆ͠·͢ɻ
srcsetଐੑͷIE11ରԠ ྫʹΑͬͯ IE11 srcsetଐੑʹରԠ͍ͯ͠·ͤΜɻ໘Ͱ͕͢PolyfillͰର Ԡ͢Δඞཁ͕͋Γ·͢ɻIE11ͰsrcsetଐੑΛར༻͢Δʹʮpicturefillʯͱ ͍͏NPMϞδϡʔϧΛར༻͠·͢ɻҎԼ͕ࢦఆྫʹͳΓ·͢ɻ https://www.npmjs.com/package/picturefill import picturefill from
'picturefill'; picturefill(); JavaScript (Babel)
image-setؔͷओཁϒϥβରԠ ͜Ε·ͨྫʹΑͬͯimage-setؔChromeͱSafari͔͠ओཁϒϥβͰ ରԠ͓ͯ͠ΒͣɺIEFirefoxͰରԠ͍ͯ͠·ͤΜɻ ͜ͷʹର͢ΔରԠͱͯ͠ PostCSS ͷϓϥάΠϯͰ͋Δʮpostcss- image-set-polyfillʯϞδϡʔϧΛར༻͢Δ͜ͱͰճආͰ͖·͢ɻ https://www.npmjs.com/package/postcss-image-set-polyfill ͜ͷPolyfillJSΛར༻͢ΔͷͰͳ͘ɺCSSͷmedia queryΛར༻ͯ͠ը
໘ղ૾Λఆ͢Δ͜ͱͰɺٖࣅతʹimage-set૬ͷελΠϧΛ࣮ݱ͢ ΔͷͱͳΓ·͢ɻ
image-setؔͷIE11ରԠ ʮpostcss-image-set-polyfillʯΛར༻͢Δʹ͋ͨͬͯ̍ҙ͕͋Γ· ͢ɻͦΕIE11ͷରԠͰ͢ɻલड़ͷ௨Γɺʮpostcss-image-set-polyfillʯ CSSͷmedia queryʹΑٖͬͯࣅతʹimage-setΛ࣮ݱ͢ΔͷͰ͕͢ɺ IE11ͰͳΜͱ1x2xͱ͍ͬͨղ૾୯ҐΛmedia queryͰαϙʔτ͠ ͍ͯͳ͍ͷͰ͢ɻͭͮ͘͘खͷ͔͔ΔϒϥβͰ͢Ͷɻճආࡦͱͯ͠ผ ͷ୯Ґ(dpi)Λར༻͠·͢ɻdpiΛར༻ͨ࣌͠ͷը໘ղ૾ͷࢦఆҎԼͷ ௨ΓʹͳΓ·͢ɻ
1x … 96dpi 2x … 192dpi 3x … 288dpi ͦͷͨΊɺIE11ʹରԠ͢Δʹɺimage-setʹ͓͚Δղ૾ dpi ୯Ґ Ͱࢦఆ͢Δඞཁ͕͋Γ·͢ɻ
ը૾ͷԆಡΈࠐΈͷར༻ʹ͍ͭͯ ը໘ղ૾ผʹ࠷దͳը૾Λϩʔυ͢ΔॲཧΛೖΕͨͱ͜ΖͰɺͲͪΒʹ ͤΑಡΈࠐΈ͢Δը૾͕ଟա͗ͨΓαΠζ͕େ͖͍ͱ݁ہಡΈࠐΈʹ࣌ ͕͔͔ؒΔ݁Ռͱͳͬͯ͠·͍·͢ɻ ͦͷͨΊΑ͘ར༻͞ΕΔख๏ͱͯ͠ɺը໘ʹ·ͩදࣔ͞Ε͍ͯͳ͍ը૾ Λޙ͔ΒಡΈࠐΉը૾ԆಡΈࠐΈ(lazyload)Λར༻͠·͢ɻ PageSpeed InsightsͷϞόΠϧධՁʹ͓͍ͯϑΝʔετϏϡʔʹදࣔ͞ Ε͍ͯͳ͍ը૾ʹlayzloadΛద༻͠ͳ͍ͱࢦఠͷରͱͳͬͯ͠·͍· ͢ɻ
ը૾ԆಡΈࠐΈͷରԠ ը૾ԆಡΈࠐΈͷϥΠϒϥϦଟ͋Γ·͕͢ɺલड़ͷsrcsetଐੑʹର Ԡͨ͠ͷݶΒΕ͍ͯ·͢ɻ͓͢͢Ίͳͷ͕ʮvanilla-lazyloadʯͱ͍͏ NPMϞδϡʔϧͰ͢ɻ͜ΕΛ͏ͱ src ଐੑ͚ͩͰͳ͘ srcset ଐੑͷ lazyloadʹରԠ͕ՄೳͰ͢ɻ https://www.npmjs.com/package/vanilla-lazyload
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', });
αʔόαΠυ ͷվળ 3
αʔόαΠυͷվળʹ͍ͭͯ PageSpeed Insightsʹ͓͍ͯCSSJSɺը૾ͷѹॖظݶ(Expires)ͷ ࢦఆʹ͍ͭͯͷࢦఠ͋Γ·͢ɻ ͜ΕΒαʔόαΠυଆͰͷ৴࣌ͷઃఆͱͳΓɺϑϩϯτΤϯυଆͷΈ Ͱ੍ޚ͕Ͱ͖·ͤΜɻ ؆୯ʹݴ͑ɺNginxApacheͳͲͷHTTPαʔόʔɺ·ͨCloudFront ͳͲͷCDNΛͬͯgzipѹॖͷࢦఆͱExpiresͷࢦఆΛߦ͏͜ͱͰվળՄ ೳͰ͢ɻ (͜͜Ͱ֓ཁͷΈͷհͱ͠·͢)
·ͱΊ
WebαΠτͷύϑΥʔϚϯεϢʔβ ʔମݧͷվળ͚ͩͰͳ͘ɺSEOʹ͋ ΔఔӨڹΛٴ΅͠·͢ɻԿΑΓ PageSpeed InsightsͰߴείΞΛୟ͖ ग़͢ͱͦΕ͚ͩͰྑ͍αΠτײ͕ग़ͯ ͘ΔͷͰੋඇͱରࡦ͢Δ͜ͱΛ͓͢ ͢Ί͠·͢ʂ
THANK YOU ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠