æ£çŽãªãšããããã®ãµãŒãã¹ã¯å éšäœ¿çšã§ãããå ¬éãããŠããªãããšãç¥ãããããšããç§ã¯å°ãè ¹ãç«ãŠãŸãããããã¯ãWebããã©ãŒãã³ã¹ãè©äŸ¡ããããã®ç§ã®éåžžã®gotoããŒã«ãå©çšã§ããªãã£ãããšãæå³ããŸãããããªãã¡ïŒ
ããã¯ç§ã«ã¢ã€ãã¢ãäžããŸããïŒã©ã®ããã«å éšãµãŒãã¹ãšè£œåããã¹ãã§ããŸããïŒãã®èšäºã§ç§ã¯èŠã€ããããšããŸãã
é«éå éšã·ã¹ãã ã®æãéèŠãªæ¡ä»¶
ãåç¥ã®ããã«ãäžçç倧æµè¡ã«ããäžçã¯å€§ããå€åããŸãã ãåºç¯å²ã«ãããå°éã®ãããæ©äŒããã£ããã¹ãŠã®äººãèªå® ã§ä»äºãå§ããŸãããããã¯ãäžçäžã®ã€ã³ã¿ãŒãããã®ããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžãã ãã©ãã£ãã¯ãå€ããªããããŠã³ããŒãæéãé·ããªããŸããããã®ãããåŸæ¥å¡ãä»äºãéè¡ããããã«å¿ èŠãªãã¹ãŠã®ããŒã«ã¯ããã°ããããŒããããã€ã³ã¿ã©ã¯ãã£ãã§ããå¿ èŠããããŸãã
以åã¯ãå éšãŠãŒã¶ãŒããªãã£ã¹ããäœæ¥ããããŒã«ã«ãšãªã¢ãããã¯ãŒã¯ïŒLANïŒã䜿çšããŠããããããã®ãããªããã©ãŒãã³ã¹ã®åé¡ã¯ãããŸããã§ãããåé¡ã¯ãå€ãã®äººãäœéã§äžå®å®ãªã€ã³ã¿ãŒãããæ¥ç¶ã®ããå°ããªéœåžã«äœãã§ãããšããäºå®ã«ãã£ãŠæªåããŠããŸãããŸãã¯ãéã«ã競äºä¿æ°ïŒç«¶åçïŒãé«ãéœåžã§ã¯ ãå éšã·ã¹ãã ã«ã€ããŠè©±ããŠããã®ã§ãã»ãšãã©ã®å ŽåãåŸæ¥å¡ã¯VPNã䜿çšããŠãªãã£ã¹ãããã¯ãŒã¯ã«ã¢ã¯ã»ã¹ããå¿ èŠããã ãŸãããããããããããŸã䟿å©ã§ã¯ãããŸãããVPNã¯ã€ã³ã¿ãŒãããã®é床ãé ãããããšããããããŸã ã
åŸæ¥å¡ããŠãŒã¶ãŒã§ããããšãèŠããŠããããšãéèŠã§ãããããã£ãŠãWebã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã®äœäžã¯åŸæ¥å¡ã®äœæ¥ã«æªåœ±é¿ãäžãããããå éšã·ã¹ãã ãæé©åããããã«ããŠãã ãã ãå éšã·ã¹ãã ãéåžžãã©ã€ããŒãã§ããå Žåãã©ã®ããŒã«ã䜿çšããŸããïŒããã«ã€ããŠã¯ããã«è©±ããŸãã
WebPageTest
æåã«æ確ã«ããŠããããã®ã¯ãå éšã·ã¹ãã ããã¹ãããŠãããšãã¯ããªãŒãã³ãœãŒã¹ããŒãžã§ã³ã®WebPageTestãäœ¿çš ã§ããªããšããããšã§ãããã ãããã©ã€ããŒããèšå®ããããšã¯ã§ããŸããããã«ãããå éšãããã¯ãŒã¯ã§ã®äœ¿çšãå¯èœã«ãªããŸãã
èµ·ååŸããã¹ãŠã®å éšã·ã¹ãã ã®èšå€§ãªéã®ããŒã¿ãžã®ã¢ã¯ã»ã¹ãéããŸããå¿ ãã¬ã€ããèªã㧠ãWebPageTestããã§ããã ãå€ãã®æ å ±ãå ¥æããŠãã ãããç¬èªã®ããŒãžã§ã³ãèšå®ããããšã¯ãæã£ãã»ã©é£ããã¯ãããŸãããæ°åã§AWSã«èªåã§ã»ããã¢ããããæ¹æ³ã«é¢ããããã€ãã®çŽ æŽããããã¥ãŒããªã¢ã«ããããŸãïŒ
- 5åã§WebPagetestãã©ã€ããŒãã€ã³ã¹ã¿ã³ã¹-PatrickMeenan
- èªåã¹ã±ãŒãªã³ã°ãã©ã€ããŒãWebPageTestã€ã³ã¹ã¿ã³ã¹ãèšå®ããã¹ããããã€ã¹ãããã¬ã€ã-ããã³ã»ãªãºããŒã³
- AWSã®ãã©ã€ããŒãWebPageTestã€ã³ã¹ã¿ã³ã¹-PeterHedenskog
- ããªãŒã«ã€ã³ã¯ã³ãWebPageTestãã©ã€ããŒãã€ã³ã¹ã¿ã³ã¹ãèšå®ãã-ã¢ã³ãã£ã»ãã€ãŽã£ã¹
ãã®ãªãã·ã§ã³ã«ãããWebPageTestãèªåçã«å®è¡ã§ããããã«ãªããŸããããã¯ããã€ãã®æ¹æ³ã§è¡ãããšãã§ããŸãã
- Falco-ãªãŒãã³ãœãŒã¹ã®WebPageTestã©ã³ããŒ
- WebPageTest APIçµç±ã§WebPageTestãèªååãã-ããã³ã»ãªãºããŒã³
- WebPageTestãã«ã¯ãã¹ã¿ãŒ-ã¢ã³ãã£ã»ãã€ãŽã£ã¹
ãã®ããã«ããŠãæ°ããã·ã¹ãã å€æŽã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ïŒãã©ã¹ãŸãã¯ãã€ãã¹ïŒã远跡ã§ããŸãã
ç¯å°
ããªãããããããã§ã«æã£ãŠãã次ã®gotoããŒã«ã¯ Googleã®ç¯å°ã§ããã³ã³ãã¥ãŒã¿ãŒã«
GoogleChromeã®ã³ããŒãã€ã³ã¹ããŒã«ããŠããå ŽåãLighthouseã䜿çšããŠå éšã·ã¹ãã ãç£æ»ããã®ã¯éåžžã«ç°¡åã§ãã [DevTools]ã¿ãã§[Lighthouse]ãèŠã€ãã[Generatereport]ãã¯ãªãã¯ããŸãã
èµ·åãã1ååŸãäžã®å³ã«ç€ºãããã«ãç£æ»ã«ãã£ãŠçµæãè¿ãããŸãããã©ãŠã¶æ¡åŒµæ©èœã¯ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããããLighthouseã®ãã¹ãå°çšã«æ°ããChromeãããã¡ã€ã«ãèšå®ããããšã匷ããå§ãããŸã ïŒããŒãžã§ã®åäœã«ãã£ãŠç°ãªããŸãïŒã
ããããLighthouseã¯åãªãç£æ»ããã·ã¥ããŒãã§ã¯ãããŸããããã®ããŒã«ã䜿çšã§ãããã®ä»ã®æ¹æ³ã¯æ¬¡ã®ãšãã
ã§ããã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ã€ã¹ïŒCLIïŒ ã䜿çšããŠLighthouseã
å®è¡ã§ããŸãããµã€ãã®ãã¹ãŠã®ããŒãžã§Lighthouseãç°¡åã«å®è¡ã§ã ãŸãã
ããã©ãŒãã³ã¹ã®ååŸãLighthouseCI Diff ãšæ¯èŒãã ãã¹ã
ãå®è¡ããããšã«ãããè€æ°ã®ãµã€ãã§å®æçã«Lighthouseãèªåçã«å®è¡ ããŸãã ç¬èªã®ç£æ»ã
è¿œå ã ãŠããµã€ãã®ç¹å®ã®éšåãç£èŠããŸã
GithubGistãš LighthouseReportViewerãä»ããŠçµæãå ±æããŸã ã
Sitespeed.io
å€ãã®äººãéå°è©äŸ¡ããŠããã®ã§ãSitespeed.ioããã®ãªã¹ãã®ãããã®1ã€ã«å ¥ã ãŸãããããã¯ãWebãµã€ãã®ããã©ãŒãã³ã¹ãåäžãããããã®ãã°ãããããŒã«ã»ããã§ããç°¡åãªã³ãã³ã
docker
ãŸã㯠ã§ãã°ããç°¡åã«æ§æã§ããŸã
npm
ããŸããSitespeed.ioã¯ããŒã«ã«ãã·ã³ã§ç°¡åã«å®è¡ã§ãããã°ãããã¹ãã§ããŸãã
sitespeed.ioã䜿çšãããšãGraphite / Grafanaã«ããŒã¿ãéä¿¡ããŠãã®ãããªããã·ã¥ããŒããååŸããããšã«ãããå¿ èŠãªæ°ã®ããŒãžãç¶ç¶çã«è¿œè·¡ã§ããŸã ãåºæ¬çã«ãSitespeed.ioã¯æ¬¡ã®ããŒã«ã»ããã§ãã
- Coachã¯ãããŒãžã®èªã¿èŸŒã¿é床ãäžããã®ã«åœ¹ç«ã€èªååããŒã«ã§ãã
- Browsertimeã¯Sitespeedã®äž»èŠãªããŒã«ã§ãããã¹ããã©ãŠã¶ïŒChromeãFirefoxãiOS Safariãªã©ïŒãšçžäºäœçšããããã©ãŒãã³ã¹ã¡ããªãã¯ãç»åããããªãªã©ãåéããŸãã
- PageXrayã¯ãHTTPã¢ãŒã«ã€ãïŒHARïŒãã¡ã€ã«ãJSONã«å€æããŠãèªã¿ãããã䜿ããããããããã«äœ¿çšãããŸããïŒä»¥äžã®HARãã¡ã€ã«ã®è©³çŽ°ããèªã¿ãã ããïŒ
- Throttleã¯ãããã©ãŒãã³ã¹ãã¹ãã®ããã«ãããã¯ãŒã¯æ¥ç¶ã調æŽããããã®ã³ãã³ãã©ã€ã³ããŒã«ã§ãã
æ³šïŒ ã¹ãããã«ã¯ã³ã³ãã¥ãŒã¿ãŒå šäœã®ã€ã³ã¿ãŒãããæ¥ç¶ããããã¯ãããããã·ã£ããããŠã³ãããšãã¯å¿ ããªãã«ããŠãã ããã
- Compareã¯ãHARãã¡ã€ã«ããã°ããç°¡åã«æ¯èŒããããã®ãªã³ã©ã€ã³ããŒã«ã§ãïŒäŸïŒååŸïŒã
Chromeã®DevTools
ææ°ã®ãã©ãŠã¶ã«ã¯ãã¹ãŠãéçºè ããŒã«ããã§ã«çµã¿èŸŒãŸããŠããŸããFirefoxã®Firebug以æ¥ãç§ãã¡ã¯é·ãéã®ããæ©ãã§ããŸãã ãæãéèŠãªããšã¯ãDevToolsã¯ããã©ãŠã¶ãŒã®æ°ããããŒãžã§ã³ããšã«ããã匷åã«ãªã£ãŠããããšã§ããããã¯éçºè ãšãŠãŒã¶ãŒã®äž¡æ¹ã«ãšã£ãŠäŸ¿å©ã§ãããµã€ãã®ãã°ãå°ãªããªãã¯ãã ããã§ãããïŒãïŒ
äžã®ç»åã¯ãWebããŒãžã®ããã©ãŒãã³ã¹ç£æ»ãæäŸã§ãã詳现æ å ±ã瀺ããŠããŸãïŒ [ããã©ãŒãã³ã¹]ã¿ãïŒããã ããChrome DevToolsã«ã¯ãããã©ãŒãã³ã¹æž¬å®ã¿ãã®ä»ã«ãä»ã«ãå€ãã®æ©èœããããŸãã
- [ãããã¯ãŒã¯]ã¿ãã«ã¯ããã©ãŠã¶å ã®ãã¹ãŠã®èŠæ±ïŒããã³å¿çïŒã«é¢ãã詳现æ å ±ã衚瀺ãããŸãã
- ã¡ã¢ãªäœ¿çšéã«é¢ããå®å šãªæ å ±ãšããã®ãã°ãä¿®æ£ããæ¹æ³ãåéã§ããŸãã
- [ã«ãã¬ããž]ã¿ãã䜿çšããŠãããŒãžäžã®æªäœ¿çšã®CSSãšJavaScriptãæ€çŽ¢ããŸãã
- ä»ã®å€ãã®åŽé¢ãã«ããŒããDevToolsã®ããã©ãŒãã³ã¹åæã«é¢ãã詳现ãªæçš¿ãèªãã§ãã ããã
ãŸãããã®ãããã¯ã«é¢ããGoogle以å€ã®èšäºããæ¢ãã®å Žåã¯ã以äžãã芧ãã ããã
- 16ãšChromeããããããŒããŒã«ã«åå¿ããŠãããã©ãŒãã³ã¹ãåå¿ãããã¡ã€ãªã³ã°-ãã³ã»ã·ã¥ã¯ã«ã
- ChromeDevToolsãããã¯ãŒã¯ã¿ãã䜿çšããWebããã©ãŒãã³ã¹ã®ãããã°-DebugBear
- ChromeDevToolsã䜿çšããJavaScriptã¡ã¢ãªãªãŒã¯ã®ãããã°-DebugBear
Firefoxã®DevTools
DevToolsã䜿çšããŠããã©ãŒãã³ã¹ã®åé¡ãè©äŸ¡ããã®ã«åœ¹ç«ã€ãã©ãŠã¶ã¯ä»ã«ããããŸããç§ã¯FirefoxãŠãŒã¶ãŒãªã®ã§ããã®ãã©ãŠã¶ã®ããŒã«ãå®æçã«äœ¿çšããŠããŸããFirefoxã«ã¯ããµã€ãã®åé¡ãèŠã€ããããã«äœ¿çšã§ããã¿ãã®ãã«ã»ããããããŸãã
次ã®ããŒã«ã䜿çšããŠæ¬¡ã®ããšãã§ããŸãã
- ããŒãžäžã®è€éãªJavaScriptãèå¥ããŠãããã°ããŸãã
- ã³ãŒã«ããã£ãã·ã¥ãšãŠã©ãŒã ãã£ãã·ã¥ã®äž¡æ¹ãåããããŒãžäžã®ãªãœãŒã¹ã¿ã€ããç°¡åã«èŠèŠåã§ããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®åé¡ã«ã€ããŠãµã€ãããã§ãã¯ããŸãïŒFirefoxã«ã¯äŸ¿å©ãªããŒã«ã®çŽ æŽãããã»ããããããŸãïŒã
åæããŒã¿ãæ¡åŒµããããã®ã©ã€ãã©ãª
ããã¯å éšããŒã«ã§ã¯æ©èœããªãå¯èœæ§ããããŸãããåæïŒGoogle AnalyticsãFathomãMatomoãªã©ïŒã䜿çšããŠäœ¿çšç¶æ³ã远跡ããå Žåã¯ãåéããããŒã¿ãæ¡åŒµããŠãWebããã©ãŒãã³ã¹ã«é¢ããããå®å šãªæ å ±ãå«ããããšãã§ããŸãã
䜿çšã§ããããã€ãã®ã©ã€ãã©ãªïŒ
- Perfume.jsã¯ãåæããŒã«ã«è»¢éããããã«å€§éã®RUMããŒã¿ãåéããããã«æ§æã§ããŸãã
- 解æ- Perfume.jsãã©ã°ã€ã³ç°¡åã«æ§ã ãªåæããŒã«ã«Webããã©ãŒãã³ã¹ããŒã¿ãããã·ã¥ããPerfume.jsã®ã©ãããŒã§ãã
- web-vitalsã¯ãä»ã®Web Vitalãšåãããã«ãCore WebVitalsæ å ±ãæ£ç¢ºã«ãã£ããã£ããŸãã
Perfume.jsã¯ãåéãããããŒã¿ã®éã«é¢ããŠä»ã®ããŒã«ãšã¯äžç·ãç»ããŠããŸããRealUserMonitoringïŒRUMïŒãå¿ èŠãªã ãåéããããã«å®å šã«ã«ã¹ã¿ãã€ãºã§ããŸãããããè¡ãæ¹æ³ã«é¢ããããã€ãã®ãã¥ãŒããªã¢ã«ããããŸãïŒ
- éŠæ°ŽïŒ.jsïŒã®ã¿ããã§æåã®ïŒæºè¶³ã®ããïŒãã€ã³ã-Leonardo Zizzamia
- RUMãšå¯Ÿè©±ããæé-LeonardoZizzamia
- ãããªïŒPerfume.js + Analyticsã䜿çšãããµã€ãWebããã©ãŒãã³ã¹ã®æ¹å
JavaScriptã¢ããªãã£ã¯ã¹
ãã®èšäºã§ã¯JavaScriptã®å éšã«ã€ããŠã¯èª¬æããŠããŸããããJavaScriptã®äœ¿çšãæå°éã«æããããšã§ãWebã®ããã©ãŒãã³ã¹ãšå šäœçãªå®å®æ§ãåäžãããããšãã§ãã ãšæããŸã ããã ããJavaScriptã䜿çšããå Žåã¯ãå¯èœãªéãæé©åããããã«ããŠãã ããã
幞ããªããšã«ãããã«ã¯å€ãã®ããŒã«ããããŸãã
- bundle-wizard -JavaScriptãã³ãã«ã®èŠèŠåãäœæããããã®CLIããŒã«ïŒäžã®ç»åãåç §ïŒãããã«ãããäžèŠãªãã®ããã¹ãŠåé€ã§ããŸãã
- ãã³ãã«ææç-npmããã±ãŒãžããã³ãã«ã«è¿œå ããã®ã«ãããè²»çšã調ã¹ãŠãã ããã
- Webpack Bundle Analyzer-ãã®ã€ã³ã¿ã©ã¯ãã£ããªã¹ã±ãŒã©ãã«ãªãããããŒã«ã䜿çšããŠãWebpackåºåãã¡ã€ã«ã®å éšæ§é ãèŠèŠåããŸãã
- source-map-explorer-ãœãŒã¹ãããã䜿çšããŠè¥å€§åããJavaScriptã³ãŒãã解æããŸãïŒãã®ããŒã«ã¯Sassããã³LESSãšé£æºããŠCSSã解æããŸãïŒã
ããŒã«ãèšäºãåæããããã®ç¹å¥ãªãã¬ãŒã ã¯ãŒã¯ãå©çšã§ããŸãã
- reactopt - Reactã®CLIããã©ãŒãã³ã¹æé©åããŒã«-ããŒãžãåã¬ã³ããªã³ã°ããå¿ èŠããããã©ãããå€æããŸãã
- TracerBenchã¯ãWebã¢ããªã±ãŒã·ã§ã³çšã®ç£èŠãããããã©ãŒãã³ã¹ãã¹ãããŒã«ã§ããããã©ãŒãã³ã¹ã®éããæ確ã§å®çšçãã€äŸ¿å©ã«åæã§ããŸãã
- Reactããã©ãŒãã³ã¹ã¢ããª-DebugBear
CSSåæ
Chrome DevToolsã§åè¿°ãã[ã«ãã¬ããž]ã¿ãã®ä»ã«ãã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ã€ã¹ïŒCLIïŒããå®è¡ã§ããããŒã«ããããŸãã圌ãã¯ãã®è€éããèæ ®ããŠCSSã解æããWebãµã€ãå šäœã§æªäœ¿çšã®ã»ã¬ã¯ã¿ãŒãèå¥ããŸãã
- analysis-cssã¯ãã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ã€ã¹ããå®è¡ãããCSSã»ã¬ã¯ã¿ãŒã®è€éããšããã©ãŒãã³ã¹ã®ã¢ãã©ã€ã¶ãŒã§ãã
- uCSS-ãµã€ãå šäœããã©ããŒã¹ããŠãåé€ã§ããæªäœ¿çšã®CSSã»ã¬ã¯ã¿ãŒãæ¢ããŸãã
ãµãŒããŒããã©ãŒãã³ã¹æž¬å®
ããã©ãŒãã³ã¹ã®é»éåŸã¯æ¬¡ã®ãšããã§ãããŠãŒã¶ãŒãããã³ããšã³ãã«è²»ããæéã®80ã90ïŒ ã
ããã¯ãšã³ã/ãµãŒããŒãæé©åãããŠããããšã確èªããããšããå§ãããŸããçµå±ã®ãšããã ãæåã®ãã€ããŸã§ã®æéã¯éèŠã§ããã
ãŸãããµãŒããŒãé«è² è·ã§å®è¡ãç¶ããããšãã§ããããã«ããããšãéèŠã§ãããããã®äž¡æ¹ãè¡ãã®ã«åœ¹ç«ã€ããŒã«ãããã€ããããŸãã
- httpstatã¯ãcurlããè¿ãããæ¥ç¶æéããŒã¿ãèŠèŠåããããã®å°ããªPythonã¹ã¯ãªããã§ãïŒäžã®ç»åãåç §ïŒã
- h2loadã¯ãHTTP / 2ããã³HTTP / 1.1ããã¹ãããããã®ã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ã€ã¹ããŒã«ã§ãã
- Hey â .
- k6 â , JavaScript. API CLI.
- Server- â , -. - .
Puppeteer
Puppeteerã¯ãDevToolsãããã³ã«ã䜿çšããŠChromeãŸãã¯Chromiumãå¶åŸ¡ããããã®é«ã¬ãã«APIãæäŸããããŒãã©ã€ãã©ãªã§ãããã©ãŠã¶ã§æåã§è¡ãããšã®ã»ãšãã©ã¯ãPuppeteerã§åçŸã§ããŸãããããWebããã©ãŒãã³ã¹ãã¹ãã«ã©ã®ããã«äœ¿çšã§ããŸããïŒ Addy Osmaniã¯ãWebããã©ãŒãã³ã¹ãã¹ãã«Pupperteerã䜿çšããããšã«ã€ããŠããã°ã«æçš¿ããGithubã§ã³ãŒããå ±æããŸããããããã®ãã¹ãã¯ãCLIãä»ããŠç°¡åã«å®è¡ããå éšWebãµã€ããšå€éšWebãµã€ãã®äž¡æ¹ããã¹ãã§ããŸãã
- Puppeteerã䜿çšããWebããã©ãŒãã³ã¹æž¬å®ã®èªåå
- Puppeteerã䜿çšããWebããã©ãŒãã³ã¹ã¬ã·ã
ãã©ãŠã¶æ¡åŒµæ©èœ
Webããã©ãŒãã³ã¹ã®æž¬å®ã«äœ¿çšã§ãããã©ãŠã¶æ¡åŒµæ©èœã¯ãããããããŸããèµ·åæã«ãæå°éã®æ¡åŒµæ©èœãåããå¥ã®ãããã¡ã€ã«ã䜿çšããããšããå§ãããŸããããã¯ãäžéšã®ãã©ãŠã¶æ¡åŒµæ©èœãããŒãžãšçžäºäœçšããããã©ãŒãã³ã¹ãäœäžããã誀ã£ãçµæãããããå¯èœæ§ãããããã§ãã次ã®æ¡åŒµæ©èœã䜿çšã§ããŸãã
- slothã¯ããã©ãŠã¶ã®CPUãšãããã¯ãŒã¯ã®é床ãäœäžãããæ¡åŒµæ©èœã§ãããäœéã®ããã€ã¹ã§ããŒãžã®ããã©ãŒãã³ã¹ãç°¡åã«ã·ãã¥ã¬ãŒãã§ããŸãã
- Perfmap-ãã®æ¡åŒµæ©èœã䜿çšãããšããã©ãŠã¶ãŒã¯ããã©ãŠã¶ãŒã«ããŒãããããªãœãŒã¹ã®ããŒãããããšãResource TimingAPIã«åŸã£ãŠåã ã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ãäœæããŸãã
- Web Vitals Chromeæ¡åŒµæ©èœã¯ãã¢ã¯ã»ã¹ãããã¹ãŠã®ããŒãžã®Web Vitalsã³ã¢ã¡ããªãã¯ïŒLCPãCLSãFIDïŒã衚瀺ããChromeæ¡åŒµæ©èœã§ãã泚ïŒããã¯ãŸããªãChrome DevToolsã«çµã¿èŸŒãŸããCanaryã§å©çšã§ããããã«ãªããŸãã
- perf-diagnostics.cssã¯å®éã«ã¯ãã©ãŠã¶ã®æ¡åŒµæ©èœã§ã¯ãªããäžè¬çãªããã©ãŒãã³ã¹ã®åé¡ãä¿®æ£ããããã«ããŒãžã«è¿œå ã§ããäžé£ã®CSSã§ããå¹ /é«ãã®å±æ§ãªãã§ç»åã匷調衚瀺ããç°¡åã§å¹æçãªæ¹æ³ã
ç¹å®ã®JavaScriptãã¬ãŒã ã¯ãŒã¯ã䜿çšããéã®ããã©ãŒãã³ã¹ãåäžãããããã«ç¹å¥ã«èšèšãããæ¡åŒµæ©èœããããŸãã
- React Developer Tools â «Profiler» DevTools, React.
- Angular Augury â Chrome Firefox, Angular.
- Ember Inspector â -, Ember.
Network Throttling
ãããã¯ãŒã¯ã¹ããããªã³ã°ã¯ããããã¯ãŒã¯æ¥ç¶ãé ãããæ¹æ³ã§ãã倧éœåžã§ã¯ãå€ãã®ãŠãŒã¶ãŒãé«éã§å®å®ãããããŒããã³ãæ¥ç¶ãå©çšã§ããªãããšãç解ããããšãéèŠã§ããäžæ¹ããããŒããã³ãã貧匱ã§ã¢ãã€ã«ä¿¡å·åŒ·åºŠãéåžžã«åŒ±ãå°æ¹ã«ãã人ãããŸããç¬èªã®ãããã¯ãŒã¯æ¥ç¶ã調æŽããããšã«ããããã®ç¹å®ã®ãããã¯ãŒã¯ç°å¢ã§ã®ãŠãŒã¶ãŒã®ãµã€ãã®ããã©ãŒãã³ã¹ã«é¢ããæŽå¯ãåŸãããšãã§ããŸãã
ãChromeDevToolsã«çµã¿èŸŒãŸããŠããã®ã«ããªããããã¯ãŒã¯ããããã¯ãããã®ã§ããïŒããšè³ªåãããããããŸããããã¹ãŠã®ãããã¯ãŒã¯èŠå¶æ¹æ³ããã¹ãŠã§ã¯ãªãããšãç解ããããšãéèŠ ã§ãåãããã«åäœããŸããChrome DevToolsã䜿çšããã¹ããããªã³ã°ã§ã¯ãå¿çããšã«ãã©ãŠã¶ã¬ãã«ã®é 延ãé©çšãããŸããLighthouseã¯ãã¹ãããã«ã¹ããŒãã§å®è¡ããŠãããæ¥ç¶é床ãã·ãã¥ã¬ãŒãããã¡ãã»ãŒãžé床ã®ç²ŸåºŠãç ç²ã«ããŸãã次ã®ããŒã«ã¯ã¯ããã«æ£ç¢ºã§ãããããã¯ãã¯ããã«äœãã¬ãã«ã§æ©èœããOSã¬ãã«ã®ãããã¯ãŒã¯ã¹ããããªã³ã°ã䜿çšããŸãã
泚ïŒä»¥äžã®ãããã®ããŒã«ã¯ãã³ã³ãã¥ãŒã¿ãŒå šäœã®æ¥ç¶ãèŠå¶ããããããã¹ãæã«ã¯äžèŠãªã¢ããªã±ãŒã·ã§ã³ãéããå®äºãããã¹ãããã«ãç¡å¹ã«ããŠãã ããã
throttle
ãšãŠãã·ã³ãã«ãªã®ã§ãã€ã䜿ã£ãŠããŸã ã
# Enable 3G Slow
throttle 3gslow
# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250
# Disable throttle
throttle --stop
HARãã¡ã€ã«ã®åæ
ãã®èšäºã®ååã§ãHTTPã¢ãŒã«ã€ãïŒHARïŒãã¡ã€ã«ã«ã€ããŠèª¬æããŸããããããã®ãã¡ã€ã«ã䜿çšãããšãWebãã©ãŠã¶ãšWebãµã€ãã®ãããã¯ãŒã¯çžäºäœçšãèšé²ã§ããŸãããããã®ãã¡ã€ã«ã®åªããŠããç¹ã¯ããã©ãŠã¶ãŒïŒå éšãŸãã¯å€éšïŒããã¢ã¯ã»ã¹ã§ãããã¹ãŠã®ãµã€ãã§äœ¿çšã§ããããšã§ããããããèŠã€ããããšã®FirefoxãšChromeã®éçºããŒã«ã§ã¯éåžžã«ç°¡åã§ãïŒ
Firefoxã®
ã¯ããŒã
ããªãã衚瀺ããåæã«äœ¿çšã§ããä»ã®ããŒã«ããããŸãã
- HARã¢ãã©ã€ã¶ãŒã¯ãGoogleã®ãã©ãŠã¶ãŒããŒã¹ã®HARåæããŒã«ã§ãã
- YSlowã³ãã³ãã©ã€ã³HARã¢ãã©ã€ã¶ãŒã¯ããªãå€ããµãŒãã¹ã§ãããHARãã¡ã€ã«ãåæããŠããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
- PageXray â HAR JSON, ( Sitespeed.io).
- Compare â -, HAR (, ââ ââ).
- HAR Viewer â - HAR .
- Charles Proxy â HTTP- / HTTP-, HAR .
- Fiddler â -, , -. HAR.
Web APIs
ãã©ãŠã¶ãã©ãŠã¶ã®ãã€ãã£ãæ©èœã«æ»ããšãã©ã€ãã©ãªã䜿çšããã«ãµã€ãã®ããã©ãŒãã³ã¹ãèªåã§æž¬å®ããããã«äœ¿çšã§ããAPIãããã€ããããŸãã
- performance.nowïŒïŒ -ãã©ãŠã¶ã®ããã©ãŒãã³ã¹
now()
ã€ã³ã¿ãŒãã§ã€ã¹ã¡ãœããã¯ãã¡ãœãããåŒã³åºããããšãããã®é«ç²ŸåºŠã®ã¿ã€ã ã¹ã¿ã³ããè¿ããŸãã2åã®é話éã®æéãéåžžã«ç°¡åã«æž¬å®ã§ããŸããç¹å®ã®ã³ãŒãã®ååŸã«ããããè¿œå ãããšãããã枬å®ããŠæé©åããããšãã§ããŸãã - ããã²ãŒã·ã§ã³ã¿ã€ãã³ã°-ãã®APIã䜿çšãããšãéçºè ã¯ããã¥ã¡ã³ãããã²ãŒã·ã§ã³ã«é¢é£ããã¿ã€ãã³ã°ããŒã¿ãåéã§ããŸãã
- ãªãœãŒã¹ã®ã¿ã€ãã³ã°-ãã®APIã䜿çšãããšãéçºè ã¯ããã¥ã¡ã³ãã«ãã£ãŠããŒããããŠãããªãœãŒã¹ã®å®å šãªã¿ã€ãã³ã°æ å ±ãåéã§ããŸãã
- ããã²ãŒã·ã§ã³ãšãªãœãŒã¹ã®ã¿ã€ãã³ã°ãšå®éã®ç掻ã®äžã§ã®ããŒãæ§èœè©äŸ¡-ãžã§ã¬ããŒã»ã¯ãŒã°ããŒ- 2ã€ã®APIäžã§ã®ãŠã§ãããŒãžã®èªã¿èŸŒã¿æ§èœã枬å®ããããã«äœ¿çšããããšãã§ããæ¹æ³ã«ã€ããŠã®Aéåžžã«è©³çŽ°ãªèšäºãã
çµæ
ããŸãããã°ããã®èšäºã«ãªã¹ããããŠããããŒã«ã§ãå éšã·ã¹ãã ã®æ¹åã«åœ¹ç«ã€ããŒã«ãèŠã€ããã§ãããããµãŒãã¹ããŠã§ããµã€ãã瀟å ã®åŸæ¥å¡ã ãã䜿çšããŠããå Žåã§ããæé©åããå¿ èŠããªããšããæå³ã§ã¯ãããŸãããæè¿ã¯å€ãã®äººããªã¢ãŒãã§äœæ¥ããŠããã«ããããããã誰ããé«éã§å®å®ããæ¥ç¶ãæã£ãŠããããã§ã¯ãããŸããããããã£ãŠãããªããšããªãã®ååããŠãŒã¶ãŒã§ããããšãå¿ããªãã§ãã ããïŒ