ããã¯ãããã³ããšã³ãéçºã«ãããããããçš®é¡ã®ããªãã¯ã«é¢ãã2çªç®ã®æçš¿ã§ãã ãµã€ãã®æé©åãRAMãäžååã§CPUãé
ãããã€ã¹ã§ã®èªã¿èŸŒã¿é床ã®åé¡ã«å¯ŸåŠããŸãã
ãµã€ããšããã«æ¥ç¶ãããŠãããµãŒãããŒãã£è£œã¢ããªã±ãŒã·ã§ã³ã®äœæ¥ãé«éåããå¶åŸ¡ããã®ã«åœ¹ç«ã€ããŒã«ã«ã€ããŠã®åå¥ã®äŒè©±ã ããã«ãã¡ãŒã«ãã¥ãŒã¹ã¬ã¿ãŒã®ã¬ã€ã¢ãŠãã®æ©èœã«ã€ããŠã®ã¹ããŒãªãŒããããŸãã

ãã®è³æã¯ã
HolyJS 2018 Piterã«ã³ãã¡ã¬ã³ã¹ããã®Vitalyã®ã¬ããŒãã®è»¢åã«åºã¥ããŠããŸãã
æåã®éšåã¯æ¬¡ã®ãšããã§ã
ãVitaliyFridmanã§Webãæé©åããŸã-å§çž®ãåçããã©ã³ããæ©èœHTTP / 2ããã³ãªãœãŒã¹ãã³ã ã
第äºéšïŒ
ãã¹ã¿ãŒããšã¹ããŒããã€ã¹
ãã®ããŒãã§ã¯ãããã©ãŒãã³ã¹ã«çŠç¹ãåœãŠãŸãã å¢ããæ¹æ³ã¯ïŒ ãã°ããã®éãããã¹ã¿ãŒããåããææ³ã䜿çšããŸããã ãã®æ¬è³ªã¯ãã¹ããããã®å©ããåããŠãå€ããã©ãŠã¶ãšæ°ãããã©ãŠã¶ã®ã©ã¡ããæ±ã£ãŠãããã調ã¹ãããšã§ãã ããã«å¿ããŠãäžå¿
èŠãªæ©èœã䜿çšããŠããŒãããªãããã«ãããŒãããã¹ã¯ãªãããšã¹ã¿ã€ã«ã決å®ãããŸããã
ãã©ãŠã¶ãŒå®çŸ©ã®ã¹ããããã®äŸ
ãã®åŸãquerySelectorãlocalStorageãaddEventListenerã®ã·ãŒã±ã³ã¹ãå¯èŠæ§ç¶æ
APIã«çœ®ãæããããšãå¯èœã«ãªããŸãããããã¯åºæ¬çã«å°ããªãããžã§ã¯ãã§è¡ã£ãããšã§ãã ãããããã®ãã¯ããã¯ã«ã¯åé¡ããããŸãã-ããªãã䜿çšãããã®ãå«ãä»ã®ãã¹ãŠã®ãã¯ããã¯ã§èµ·ããã®ãšåãã§ãã
åé¡ã¯ãæ°ãããã©ãŠã¶ã«çŸããã¹ã¿ã€ã«ãäžããããšãããããã©ãã ãããŸã衚瀺ããããããããªããšããããšã§ããããã¯ããããå®è¡ãããŠããããã€ã¹ã«äŸåããããã§ãã å®éã«ã¯ãRAMãå°ãªããããã»ããµã匱ãããŒãšã³ãã»ã°ã¡ã³ãïŒMotorola Moto G4ãªã©ïŒã®ããã€ã¹ããããŸãã ãããã圌ãã¯ç§ãã¡ãæã£ãŠããæè¡ã®ãã¹ãŠïŒãŸãã¯ã»ãšãã©ãã¹ãŠïŒããµããŒãããæ°ãããã©ãŠã¶ãã€ã³ã¹ããŒã«ãããŠããŸãã
ãããã£ãŠããã®ææ³ã仿¥äœ¿çšããããšã¯ã§ããªããªããŸããã
Moto G4ããã±ããã«å
¥ããŠGoogleããã©ããŒ
ã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãããããŒããŠã§ã¢ãªãœãŒã¹ã®èгç¹ããããã«ãããããã€ã¹ã«ã®ã¿è¡šç€ºããªãã®ã¯ãªãã§ããã ãã®ããã«ãDevice Memory APIã䜿çšã§ããŸãã ãã®APIãå©çšã§ããªãå Žåã¯ãããã¹ã¿ãŒããåããã«ããŒã«ããã¯ã§ããŸãã
ãããŠãããã«Moto G4èªäœããããŸãïŒ
次ã®å³ã§ã¯ãjavascriptãè§£æãããæéã®åºæºã«ãã£ãŠãé»è©±ã®ã©ã³ãã³ã°ã§Moto G4ãã©ãã«ãããã確èªã§ããŸãã ããã¯å¹³åã§ã-ãããŠããã®ãããªæºåž¯é»è©±ããããããããŸãã è©äŸ¡ã®ãªãŒããŒãšæ¯èŒããŠããã®æºåž¯é»è©±ã¯è§£æã«16åã®æéãå¿
èŠã§ãã

æºåž¯é»è©±ã®ãµã€ãã®ããŒã¿ãèŠããšãã»ãšãã©ã®æéãJSã®è§£æã«è²»ããããŠããããšãããããŸãã
é»è²ã¯ããŒãžè§£ææéã瀺ããŸãå®éãããã¯éåžžã«å€§ããªåé¡ã§ãã 1ã¡ã¬ãã€ãã®ã¹ã¯ãªãããããŒã¯ããããã«ãMoto G4ã¯35ç§ããããŸãã ã»ãšãã©ã®ãµã€ãããµã€ãäžã®ã¹ã¯ãªããå
šäœã®40ïŒ
ãã䜿çšããŠããªãããšãèãããšãè§£æã®æéãççž®ããããã«ãã®ç¶æ³ããæãåºãæ¹æ³ãèŠã€ããããšãã§ããŸãã ããšãã°ãGmailã§ã¯ããã¹ãŠã®ã³ãŒãã«ã³ã¡ã³ããä»ããŠããã¹ã倿°ãšããŠéä¿¡ãããã®ã³ãŒããå¿
èŠã«ãªã£ããšãã«ãã®å€æ°ã¯evalã§ããã
Googleã¯ããããã察話åäºç®ãŸã§ã®æéïŒã»ãšãã©ã®ãŠãŒã¶ãŒããµã€ããšå¯Ÿè©±ããæ©äŒãåŸ
ã€æéïŒãèšããããšãæšå¥šããŠããŸã-ããã¯ããã5ç§ã§ãã 1.6ç§ããããã¯ãŒã¯ã€ã³ã¿ã©ã¯ã·ã§ã³ã«è²»ããããããšãèæ
®ãããšãæ®ãã¯ããã3.4ç§ã§ããã€ãŸãã平忥ç¶é床400kbpsã䜿çšãããšããã®éã«æå€§170KBã®ããŒã¿ãéä¿¡ã§ããŸãã ããã¯ãããã«äœ¿çšããã®ã«é©ãããã®ãéä¿¡ããã®ã«ããã»ã©å€ããããŸããã ããã«ã¯ãã¬ãŒã ã¯ãŒã¯ããŠãŒãã£ãªãã£ãã¯ãªãã£ã«ã«ãã¹ãjsãcssãhtmlãå«ãŸããããããã®ããŒã¿éã¯éåžžã«å°ãªãã§ãã

ã¢ããªã±ãŒã·ã§ã³ã®ã³ã¢ã170 KBã«åããæ¹æ³ã¯ïŒ Googleã¯ã䜿çšå¯èœãªããŸããŸãªã¡ããªãã¯ãæšå¥šããŠããŸããæéããšã«è² è·ã段éã«åããŠããŸããæåã®ãã€ããŸã§ã®æéïŒããã²ãŒã·ã§ã³ãéå§ïŒ-æåã®ãã€ããéä¿¡ãããåãæåã®ãã€ã³ã-æåã®ç»åãããŒãããããŸã§ãæåã®ã³ã³ãã³ããã€ã³ã-ãµã€ãã«ããã²ãŒã·ã§ã³ã衚瀺ããããŸã§ãæåã®æå³ã®ãããã€ã³ã-ã»ãšãã©ãã¹ãŠãã³ã³ãã³ãã®æºåãã§ããŠãèŠèŠçã«æºåãã§ããŠãã-ããŒãžå
šäœãããŒãããåã«ãã€ã³ã¿ã©ã¯ãã£ãã«ãªããŸã§-ããŒãžãšããåãã§ããããã«ãªããŸã§ãå®å
šã«ããŒãããã-ããŒãžãå®å
šã«æºåãã§ãããšã

äžè¬ã«ããã®ãããªã¡ããªãã¯ã¯åãµã€ãã«ç¹å¥ãªãã®ã«ãªãããããããžã§ã¯ãçšã«ç¬èªã®ã¡ããªãã¯ãäœæããå¿
èŠããããŸãã ããã§ã¯ã仿¥ã®æé©ãªããã©ãŒãã³ã¹ããŒã¹ã©ã€ã³ã¯ã©ã®ãããªãã®ã§ããããïŒ

ãã®ç»åã¯ãã¡ããªãã¯ãéçºãããšãã«èæ
®ãã¹ãåŽé¢ãšç®æšã瀺ããŠããŸãã
ããŠã³ããŒãé床ãäžããæ¹æ³ã¯ïŒ
èªã¿èŸŒã¿æéã®æŠãã§äœ¿çšãããšäŸ¿å©ãªãã®ã¯äœã§ããïŒ ããšãã°ãã³ãŒãã«ãã¬ããžããŒã«-ããŒãžã³ãŒãã®ã«ãã¬ããžãç£èŠããŸãã ãŸãã䜿çšãããŠããªãã³ãŒãã®å²åã瀺ããŸãã

JavaScriptãã³ãã«ç£æ»ãåŒãç¶ã䜿çšã§ããŸãã 3çªç®ã®ã©ã€ãã©ãªã䜿çšããå Žåãããšãã°webpack-libs-optimizationsã䜿çšããŠã©ã³ã¿ã€ã ããåé€ã§ããŸãã ãããŠããã¡ãããgifãæŸæ£ããå¿
èŠããããŸãã ãããªã³ã³ããèªäœã®è§£æã«ãæéããããããããããªãæåŠããããšãã§ããŸãã ãããªãæåŠã§ããªãå Žåã¯ã<
img src
>ã³ã³ãããŒã䜿çšããŠé
眮ããŸãã
ããŒãžã«ã¬ã¹ãã³ã·ãç»åãããå Žåã§ããã¬ã¹ãã³ã·ãç»åãã¬ãŒã¯ãã€ã³ããžã§ãã¬ãŒã¿ãŒã䜿çšã§ããŸãã ã¬ã¹ãã³ã·ãã¬ã€ã¢ãŠãçšã®ã¬ã¹ãã³ã·ãç»åãŸãã¯ç»åã®ã°ã«ãŒãããç»åãçæããã®ã«åœ¹ç«ã¡ãŸãã ãžã§ãã¬ãŒã¿ãŒãšã³ãžã³ã䜿çšããŠãåçãå¿
èŠãªãããã€ãæ°ãæå®ã§ããŸãã ãŸããããŒã«ã¯ãµã€ãäžã§ããŒã¯ã¢ããèªäœãçæããŸãã

ç»åã«éèŠãªéšåïŒé¡ããªããžã§ã¯ããªã©ïŒãããå Žåãå¿
èŠã«å¿ããŠåãæããè¡ããããããéåžžã«äŸ¿å©ã§ãã
ããããã®åçããããšããŸãããã ãã®åŸãLazySizesã®å©ãã«é Œãããšãã§ããŸãã ããã¯ãåã®ããŒã«ãšåãããšãè¡ããŸãããJavaScriptã®ã¿ã䜿çšããã©ã€ãã©ãªã§ãã

è§£æãè¡ããããšãã®æéã®çµéã確èªã§ããŸãã
è峿·±ãããŒã«ã¯åªå
é äœã®ãã³ãã§ãããã®ããŒã«ã§ã¯ããã©ãŠã¶ã«äœãæ©ãããŠã³ããŒãããããšãéèŠã§ãäœãåŸã§ããŠã³ããŒãããããå°ããããšãã§ããŸãã
ããããéèŠãªCSSãã©ããããïŒ é©åãªãµãŒããŒãšCDNãããã°ããã©ãŠã¶ã¯HTTP / 1ã§ããã°å¥ã®æ¥ç¶ãéãããšããŸãã ãŸããHTTP / 2ã®å Žåãã©ã®CSSãå¿
èŠã§ãã©ã®CSSãå¿
èŠã§ãªããããæšæž¬ãããããšããŸãã ãããã£ãŠãéèŠãªCSSããŒãžã§ã³ãã©ã®ããã«æ©èœããããããã³éèŠãªCSSãã«ãŒãã«å¥ã®ãã¡ã€ã«ãšããŠä¿åãããŠããå Žåã¯ãã©ã®ããã«ãã¹ãããã®ã䟡å€ããããŸãã
Guess.js
ã¯ããwebpackããã³ãã«ããã£ã³ã¯ããããŸãã ããããäºæž¬ã¢ã«ãŽãªãºã ãšæ©æ¢°åŠç¿ã®å©ããåããŠããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã®æ¬¡ã®å埩ã§ã©ã®ãã£ã³ã¯ãå¿
èŠã«ãªãããäºæž¬ããã®ã«åœ¹ç«ã€ããŒã«ããããšãããã©ãã§ããããã Googleã¢ããªãã£ã¯ã¹ããŒã¿ã«åºã¥ãäºæž¬åæã®å©ããåããŠGuess.jsã¯ããŠãŒã¶ãŒã次ã«å®è¡ããã¢ã¯ã·ã§ã³ãçè§£ãããã®å¯Ÿè©±ã«å¿
èŠãªã³ãŒããæ£ç¢ºã«ããŠã³ããŒãã§ããŸãã
Webpackçšã®Guessãã©ã°ã€ã³ã詊ããŠã¿ãŠãã ããã

ãããã¯ãã¹ãŠã°ããŒãã«ã¬ãã«ã§çºçããŸãããŠãŒã¶ãŒã ãã§ãªãéçºè
ã®çæŽ»ãæ¹åã§ããæ©æ¢°åŠç¿ãšäººå·¥ç¥èœã«åºã¥ããµãŒãã¹ããŸããŸãå¢ããŠããŸãã ãã®ãããªããŒã«ã¯ãããšãã°AirbnbïŒair / shotsã«ããããã®äŒç€Ÿã®èšèšè
ãšéçºè
ã䜿çšã§ããæ€çŽ¢ãšã³ãžã³ã§ãã ãã®äžã§ãã¿ã°ã§ã³ã³ããŒãã³ããèŠã€ãããããã®æ¥ç¶ãç£èŠãããããžã§ã¯ãã«å¿
èŠãªãã®ãéžæã§ããŸãã
ãã¶ã€ããŒã«ãšã£ãŠã®æ©èœã¯éåžžã«å°è±¡çã§ãããã¶ã€ããŒã¯çŽã«ã¹ã±ãããæãããããã«ã¡ã©ã«æã¡èŸŒã¿ãäºåã«èšèšãããã³ã³ããŒãã³ãããå¿
èŠãªã€ã³ã¿ãŒãã§ãŒã¹ãèªåçã«èšèšãããŸãã äœæ¥ã¯ã»ãŒå®å
šã«èªååãããŠããŸãã

ãã1ã€ã®ãã³ãïŒéçºçšã®ãã¬ãŒã ã¯ãŒã¯ãæ
éã«éžæããŸãã æ¬¡ã®ããšãèæ
®ããå¿
èŠããããšããŸãïŒãããã¯ãŒã¯è»¢éãè§£æ/ã³ã³ãã€ã«ãå®è¡æã³ã¹ãã ãã¡ããããã®ããã®ããŒã«ããããŸããããšãã°ã2Gã3GãWi-Fiãªã©ãããŸããŸãªããŒã¿ãããã¯ãŒã¯ã§ã¢ããªã±ãŒã·ã§ã³ãã©ã®ããã«æ©èœãããããã¹ãã§ããŸãã
åé¡ã¯ããã¡ãããHTTP / 2ã¯è¯ãæ°ããæšæºã§ãããHTTP / 1ãããåžžã«é«éã§ãããšããããšã§ãã2çªç®ã«ãç¹ã«ã¢ãã€ã«ããã€ã¹ã®å Žåãäœéæ¥ç¶ã§ã¯éåžžã«äœéã§ãã ãã1ã€ã®åé¡ã¯ãµãŒããŒããã·ã¥ã§ãããµãŒããŒããã·ã¥ãããå ŽåãéèŠãªCSSã®çæ³çãªä»£æ¿åã«ãªããŸãã ãã®å Žåãindex.htmlãèŠæ±ãããŠãŒã¶ãŒã¯critical.cssã¢ãã³ããŒãžã§ååŸããŸãã ãããããµãŒããŒã«ããŒãžãèŠæ±ãããšããã«ãåŸè
ã¯æ¢ã«ãã£ãã·ã¥å
ã«ãããã©ãããåžžã«ç¥ããšã¯éããŸããã
ãããã£ãŠããã£ãã·ã¥ãã€ãžã§ã¹ããšåŒã°ããã¡ã«ããºã ãéçºãããŠããŸããåããŠããŒãžã«ã¢ã¯ã»ã¹ããå ŽåããµãŒããŒããã·ã¥ãçºçããŸãã ãããããŒãžãžã®æåã®èšªåã§ã¯ãªãå ŽåããµãŒããŒã¯åŒãç¶ãããã·ã¥ããŸãã ããã¯ãQUICã䜿çšããŠä¿®æ£ããããšãGoogleãæ±ºå®ããåé¡ã§ãã ããã¯HTTPãä»ããã¢ããªã³ã§ãããã¡ã«ããºã ãããææ
®æ·±ããããã®ã§ãããUDPãããã³ã«ã§TCPã®ä»£ããã«æ©èœããŸãã

QUICã«ã¯å€ãã®è峿·±ãç¹ããããŸãã4Gã®é«éæ¥ç¶ã§ã¯é«éã§ãã åæã«ãæ¥ç¶ãé
ãå Žåã¯é
ããªããŸãã ããã«ãUDPã䜿çšãããããJavaScriptã®å Žåã¯å€§ããªCPUãªãœãŒã¹ãå¿
èŠã§ãã ããã¯æ¬¡ã®ç»åãåæ ããŠããŸãã

ãµãŒãã¹åŽåè
ãã¶ã圌ãã¯ç§ãã¡ãå©ããããšãã§ããŸããïŒ çµ±èšãã倿ãããšããã£ãã·ã³ã°ã«äœ¿çšãããšãå
·äœçãªããã©ãŒãã³ã¹ãåäžããŸãã 1ã€ç®ã¯ãã©ã³ãã®æé©åã2ã€ç®ã¯ãµãŒãã¹ã¯ãŒã«ãŒã®ã«ã¹ã¿ãã€ãºã§ãã

Service Workerãäœæããæ¹æ³ã¯ïŒ PWA Builderã䜿çšã§ããŸããã¢ããªã±ãŒã·ã§ã³ããã鲿©çã«ããããã®ã¢ã€ã³ã³ãšãããã§ã¹ããçæããŸãã

PWAã®äœ¿çšã«é¢ããããŸããŸãªã¹ããŒãªãŒãäºäŸãåéããçŽ æŽãããPWA Statsãµã€ãããããŸãã
ãµãŒãããŒãã£ã®ã¹ã¯ãªãã-æªãžã®äžæ©ïŒ
ãµãŒãããŒãã£ã®ã¹ã¯ãªããããµã€ãã«ã€ã³ã¹ããŒã«ããå Žåãããã©ãŒãã³ã¹ãæ¹åããæå³ã¯ãããŸããïŒãµã€ããã远å ã®ã¹ã¯ãªãããããŒãããæçµçã«ãŠãŒã¶ãŒã®ããã€ã¹ãéè² è·ã«ããŸãããïŒ
ãããã®ã¹ã¯ãªãããåéããããŒã¿ãããããŸããã 圌ãã¯ããŒãžã®èªã¿èŸŒã¿éã§å€æŽã§ããåçãªãœãŒã¹ãèªã¿èŸŒãããšãã§ããŸãã ãããã£ãŠããµãŒãããŒãã£ã®ã¢ããªã±ãŒã·ã§ã³ã䜿çšãããã¹ãããªãœãŒã¹ãäžæã§ãã ãŸããã¹ã¯ãªããã¿ã°ã«èªã¿èŸŒããšããµã€ãäžã®ãã¹ãŠã®æ
å ±ã«ã¢ã¯ã»ã¹ã§ããŸãã
ãã®æ
å ±ãèŠã€ããããã«ããªã¯ãšã¹ããããããŒã«ããããŸãã

ãªã¯ãšã¹ãã®éä¿¡å
ã衚瀺ããããããã®ãªã¯ãšã¹ãã«å²ãåœãŠãããŠãããªãœãŒã¹ã確èªã§ããŸãã ãµãŒãããŒãã£ã®ã¹ã¯ãªãããããã€ã¹ã®CPUã䜿çšããŠãããã³ã€ã³ããã€ãã³ã°ããŠããããšã倿ããå Žåãç¹ã«é©ãã§ãããã ãµãã©ã€ãºïŒ
Chromeã¯ãç¬èªã®åºåãããã«ãŒã§äžå
¬å¹³ãªåºåããããã¯ããããšããŸãã æé«ã®åºåé£åã«åºã¥ããŠããŸãã
GDPRã®ãããªãã®ããããŸã-å人ããŒã¿ã®åŠçã«é¢ããåæã ãµã€ãã®ãªãŒãã£ãšã³ã¹ã«ãšãŒããã人ãããå Žåãå人ããŒã¿ã®åŠçã«é¢ããåæãéµå®ããèŠæ±ã«å¿ããŠããããåé€ããä¿åããåCookieã説æããå¿
èŠããããšè¿°ã¹ãŠããŸãã ãµãŒãããŒãã£ã®ã¹ã¯ãªããããã®å¥çŽã«éåããåé¡ãçºçããå Žå-ããªãã¯å¿çãã責任ãè² ããŸãã
ã§ã¯ããµãŒãããŒãã£ã®ã¹ã¯ãªãããèŠãŠããªããšãã«ããµãŒãããŒãã£ã®ã¹ã¯ãªãããäœãããŠããã®ããã©ã®ããã«çè§£ããŠããŸããïŒ ããŒã«ã䜿çšããŠããããå¶åŸ¡ããŸããããšãã°ãrequestmap.webperf.toolsã䜿çšããŠããµã€ãããã³ãµãŒãããŒãã£ã®ã¹ã¯ãªãããç£æ»ã§ããŸãã åŸã§çµ±èšæ
å ±ãIDã§ç¢ºèªã§ããŸãïŒrequestmap.webperf.tools/render/[ID]
以äžã®ããŒãžã«ã¯ãã¬ããŒããå«ãCSVãã¡ã€ã«ãããŠã³ããŒãããããã®ãªã³ã¯ããããŸãã

ãã®åŸãã¿ãŒããã«ãä»ããŠããŒã¿ãè§£æã§ããŸãã

ãŸããWebããŒãžã®ãã¹ããããã¯ã«æ¿å
¥ããå¿
èŠã®ããã³ãŒããååŸãããµãŒãããŒãã£ã®ã¹ã¯ãªããã䜿çšããã¢ããªã±ãŒã·ã§ã³ãšäœ¿çšããªãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã®éããæž¬å®ããŸãã éãã¯æããã§ãã ããã¯ãããããåé€ããå¿
èŠããããšããæå³ã§ã¯ãããŸããã ããããæé©åããæ¹æ³ãçè§£ããå¿
èŠããããŸãã
ãã€ãã®ããã«ããã®ããã®ããŒã«ããããŸãã ãã®CSVãExcelã«æ¿å
¥ãããšã䜿çšããŠãããµãŒãããŒãã£ã¢ããªã±ãŒã·ã§ã³ããããã®ééãããŒãéã®ããªãè©³çŽ°ãªæŠèŠãååŸã§ããŸãã ããã«è峿·±ãã®ã¯ããã©ãã¯ããŒã«ãµãŒããŒã§ããIPã詊ãããšã§ãã

ãã¹ãŠã®ãµãŒãããŒãã£ã¢ããªã±ãŒã·ã§ã³ãã¿ã€ã ã¢ãŠãã«ãªã£ãå Žåã®ã¢ããªã±ãŒã·ã§ã³ã®åäœã調ã¹ãã«ã¯ããã®IPãhostsãã¡ã€ã«ã«è¿œå ããŠãã¢ããªã±ãŒã·ã§ã³ã«äœãèµ·ãããã確èªããŸãã

ãã1ã€ã®ãã³ãïŒscriptã¿ã°ã䜿çšããŠãµãŒãããŒãã£ã®ã¹ã¯ãªããã远å ããªãã§ãã ããã iframeãä»ããŠãããè¡ãããšããå§ãããŸããiframeã䜿çšãããšãããŒãžäžã®DOMã«ã¢ã¯ã»ã¹ã§ããªããªãããã§ãã ãšããã§ãiframeã«ã¯ãµã³ãããã¯ã¹ããããã£ããããããŒãžäžã®ã¹ã¯ãªããã§å®è¡ã§ããããšãšã§ããªãããšãæå®ã§ããŸãã ã»ãŒããã¬ãŒã 仿§ãäœæãããŸãããããã¯ãå€éšã¹ã¯ãªãããã¢ããªã±ãŒã·ã§ã³ããŒã¿ããåé¢ããããã®ã¢ã¯ãã£ããã£ãç£èŠãããŠããããšã瀺ããŠããŸãã ãã®ãããã¯ã«èå³ãããå Žåã¯ãã»ãŒããã¬ãŒã ãããžã§ã¯ãã§ããgithubã§æ
å ±ãå
¥æã§ããŸãã

ãµãŒãã¹ã¯ãŒã«ãŒã䜿çšããŠãããªãŒãºãããµãŒãããŒãã£ã®ã¹ã¯ãªããããããã¯ãŸãã¯åé€ããŸãã
Intersection Observerã䜿çšãããšãåºåããã¥ãŒããŒãã®é£ã«è¡šç€ºããããã©ããã確èªã§ããŸãã ããã«ããããŠãŒã¶ãŒãããŒãžã衚瀺ããŠãããšãã«åºåãŠãããã«è¿ã¥ãããšãã«ãåºåãŠããããèªã¿èŸŒãããšãã§ããŸãã åºåãŠããããŸã§ã®è·é¢ã¯ãã¯ã»ã«åäœã§æå®ã§ããŸãã
ããã«ã€ããŠã¯ãDenis Mishunovã®èšäºãNow You See MeeïŒHow to DeferãLazy-Load and Act with Intersection ObserverããHarry Roberts
ãIt's MyïŒThirdïŒPartyãand I Cry if I want to Iãã§èªãããšãã§ããŸãYoav WeissããµãŒãããŒãã£ã®ã³ã³ãã³ãã®å¶åŸ¡ãåãæ»ããã
ã¬ã¹ãã³ã·ãã¡ãŒã«
ã¡ãŒã«ãã¥ãŒã¹ã¬ã¿ãŒã®ã¬ã€ã¢ãŠãã«ã¯ãç¬èªã®ç¹æ§ãšã«ãŒã«ããããŸãã æåã§åçã衚瀺ããªãã¯ã©ã€ã¢ã³ãã®Imgã¿ã°ã¯ãäœãã倿Žããå¿
èŠããããããalt屿§ããã³ãã®ä»ã®ãã©ãã¯ããžãã¯ã䜿çšãããŸãã

éåžžã®ã¬ã¿ãŒã®ã¬ã€ã¢ãŠãã§ã¯ãtable-header-groupãtable-footer-groupãããã³ãã®ä»ã®ããŒãã«å±æ§ã䜿çšãããŸãã ããããã¡ãã£ã¢ã¯ãšãªãªã©ãäœãæ°ãããã®ãå¿
èŠãªå Žåã¯ã©ãã§ãããããäžéšã®ãã©ãŠã¶ã§ã¯ãŸã ãµããŒããããŠããŸãããã¡ãŒã«ã¯ã©ã€ã¢ã³ãã®ã¢ãã€ã«ããŒãžã§ã³ã§ã¯äºæ
ã¯ããã«æªåããŸãã 䜿çšããå ŽåïŒ
ãã®ãããªéæ³ã®
äŸã次ã«ç€ºããŸãã
ããã¯ã¹ã¯ã©ã¹ã®æçµçãªå€ã¯ïŒ 仿§ã«ãããšãç¶æ³ã«ãã£ãŠç°ãªããŸããwidth-valueãmax-widthããã倧ããå Žåãmax-widthãåªå
ãããŸãã
ãã ããmin-widthãwidthãŸãã¯max-widthãã倧ããå Žåãmin-widthãé©çšãããŸãã
ããã¯ãã¡ãã£ã¢ã¯ãšãªããµããŒããããŠããªãå Žåã«äœ¿çšã§ããŸãã äŸã¯æ¬¡ã®ãšããã§ããã¢ãã€ã«ã§4åã®ãã¡2åãäœæããæ¹æ³ã¯ïŒ çãã¯ïŒ

倧ãŸãã«èšãã°ãå¹
ã®å€ã¯ãæå€§å¹
ãŸãã¯æå°å¹
ã®ã©ã¡ããåã€ããæ±ºå®ããŸãã ããã¯çŽ æŽãããããã¯ã§ãïŒ
ã€ã³ã¿ã©ã¯ãã£ããªæçŽãäœãæ¹æ³ã¯ïŒ ããšãã°ãããã«ã©ã€ãTwitterãã£ãŒãã远å ããŸãã ã¯ããå¯èœã§ãïŒ 2ç§ããšã«ãµãŒããŒäžã§çæããããã¹ãŠã®ãã€ãŒããå«ãç»åãããããããã¢ãã¡ãŒã·ã§ã³åããã ãã§ãã ããã解決çã§ãã
泚æå
šäœãšè£œåéžæãè²»ããããšãã§ããã€ã³ã¿ã©ã¯ãã£ããªé»åã¡ãŒã«ãäœæããæ¹æ³ã¯ïŒ ç»åãèŠããšçè§£ã§ããŸãïŒ

ã©ãã«ããã§ãã¯ãããã³input'ahã«é¢é£ä»ããããããžãã¯ã ããªãé·ããã§ãŒã³ã«ãªããŸãããããã§ãå¯èœã§ãã 䜿çšãããŠããèŠçŽ ã®çµ±èšæ
å ±ã®äŸã次ã«ç€ºããŸãã äŸ¡æ Œã¯ã«ãŠã³ã¿ãŒãšå¢åã§ãèæ
®ãããŸãïŒ

ããã¯çŽ æŽãããããã«æããŸãããé»åã¡ãŒã«ãä»ããŠäººã賌å
¥ã«å°ãããšãã§ããããšãããããŸãã ãããããã¹ãŠãããã»ã©åçŽãªããã§ã¯ãããŸãããã¡ãŒã«ã§ã¯æåæ°ïŒ12000ïŒã«å¶éãããããµããŒãïŒãã§ãã¯ãããŠãããã¡ãã»ãŒãžãµã€ãºã¯102kbã«å¶éãããŠããŸãã
ããã«ããããããããããã¯ä»æ¥ã®ããŒã±ãã£ã³ã°ã®äž»ãªåŸåã§ãããããã¯ã°ã©ãã§èŠãããšãã§ããŸãïŒ

ããããGoogleãAMPãäœæããçç±ã§ãã åžæã«å¿ããŠãã¬ã¿ãŒã«å¿
èŠãªããŒã¯ã¢ãããèªåçã«çæããå¿
èŠããããŸãã
å¯å€ãã©ã³ã
ããŒã¬ã³ã¹ã»ãããŒã¯ãã®ããŒãã«ã€ããŠæçšãªãã¬ãŒã³ããŒã·ã§ã³ãè¡ã£ãŠããŸã ãå¿
ãèŠãŠãã ãã ããã©ã³ã仿§ãæžãã人ã®äžäººãHakon Wium Lieã®ã³ã¡ã³ãã以äžã«ç€ºããŸãã
ããã¯æ¬¡ã®ããã«èãããŸãããå°æ¥çã«äžéå€ããµããŒãããéã«ïŒãã©ã³ããŠã§ã€ãå€ã®ä»æ§ã§ïŒ3æ¡ã®æ°åã䜿çšããããšãéžæããçç±ã®1ã€ã ãããŠãæªæ¥ã¯ãã§ã«æ¥ãŠããŸããã
ã¢ãžã¢ã®ãã©ã³ãã«é¢ããéåžžã«å€§ããªåé¡ïŒå
šäœçãªå€æ°ã®æåãšãããã®ç°ãªãã¹ã¿ã€ã«ãèãããšã 象圢æåã«ç°ãªããã©ã³ããããŒããããšãããã©ãŒãã³ã¹ã®å€§ããªåé¡ã«ãªãå¯èœæ§ããããŸãã 幞ããªããšã«ã仿§ãæžãã人ã話ãã3æ¡ã®å€ã®1ã€ã ããæå®ã§ããå埩å¯èœãªãã©ã³ãããããŸãã

ãã¶ã€ããŒã¯ã2ã€ã®ã¹ã¿ã€ã«ã®ã·ã³ãã«ãäœæããã ãã§ååã§ã-éåžžã«å€ªããå€ã1000ã§ãéåžžã«çްããå€ã1ã§ããä»ã®ãã¹ãŠã®ã¹ã¿ã€ã«ã¯ãå¿
èŠã«å¿ããŠèªåçã«äœæãããŸãã ãã ããããã¯å¹
軞ã ãã§ãªããé«ãã§ãæ©èœããŸãã

ããäžã€ã®é©ãïŒç§ãã¡ã¯å€ãã®å°é£ãªãèªåã§è»è»žãäœæã§ããŸãã ãããè¡ãã«ã¯ãCSSã®font-variation-settingsããããã£ã䜿çšããŸãã font-weightãfont-stretchãªã©ã®é«ã¬ãã«ããããã£ã®å€ãèšå®ããŸãã

ãã©ã³ããã¶ã€ããŒãç®çã®ãã©ã³ããèšå®ããäŸã次ã«ç€ºããŸãã

ããããã©ããã§ãµããŒããããŠããªãå Žåã¯ã©ããªããŸããïŒ å€ãããŒãžã§ã³ã®ãã©ãŠã¶ã§ã¯ãããã€ãã®ãã©ã³ã圢åŒã䜿çšããããŒã«ããã¯ãåŠçããã¬ã¹ãã³ã·ãåäœãèæ
®ããå¿
èŠããããŸã-ããŸããŸãªç»é¢ã«å€ãæ£ããèšå®ããŸãã ãããã£ãŠããã©ã³ãã«ã¯WOFF2圢åŒã䜿çšãããã鲿©çã§ãã å€ãããŒãžã§ã³ã®å Žåããã©ãŠã¶ã¯ç®çã®ãã©ã³ãèªäœãéžæããŸãããããã¯ã¹ã¿ã€ã«ãå¶åŸ¡ã§ããªãããšãæå³ããŸãã
èŠçŽãã
èŠçŽãããšã仿§ã¯ä»¥åãããã¯ããã«éãåãå
¥ãããããšèšããŸãã 2ãæãçµéããæ°ããæšæºãã¢ãããŒããã¢ããªã±ãŒã·ã§ã³ãç»å ŽããŸãã ããããããã¯åœç¶ã®ããšã§ãããåœç¶ã®ããšãªãããããã«çºå±ããæ©äŒã§ãã
ã¬ããŒããæ°ã«å
¥ã£ãå Žåã¯ã泚æããŠãã ããã11æ24ã25æ¥ã«ãæ°ããHolyJSãã¢ã¹ã¯ã¯ã§éå¬ãããŸãããŸããè峿·±ãããšããããããããŸãã ããã°ã©ã ã«é¢ããæ¢ç¥ã®æ
å ±ã¯ãµã€ãã«ããã ãã±ããã¯ããã§è³Œå
¥ã§ããŸãã