Performance Observer APIãæ·±ãæãäžãã广çãªããã«ããã¯åæãšæé©åã®ããã®éèŠãªã©ã³ã¿ã€ã ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ããã£ããã£ããæ¹æ³ãåŠã³ãŸããããä»ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããŸãããïŒ
Performance Observer API: ã©ã³ã¿ã€ã ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ãè§£ãæãããããã«ããã¯åæããã¹ã¿ãŒãã
仿¥ã®èŠæ±ã®å³ããããžã¿ã«ç°å¢ã«ãããŠãã·ãŒã ã¬ã¹ã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšã¯æãéèŠã§ããèªã¿èŸŒã¿æéãé ãã£ãããããã¡ãªãã€ã³ã¿ã©ã¯ã·ã§ã³ããã£ãããããšãããã«ãŠãŒã¶ãŒã®äžæºãé¢è±ã«ã€ãªããå¯èœæ§ããããŸããPerformance Observer APIã¯ãã©ã³ã¿ã€ã ããã©ãŒãã³ã¹ãç£èŠããã³åæããããã®åŒ·åãªã¡ã«ããºã ãæäŸããéçºè ãããã«ããã¯ãç¹å®ããã¢ããªã±ãŒã·ã§ã³ãæé«ã®ããã©ãŒãã³ã¹ã«æé©åã§ããããã«ããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãPerformance Observer APIã®å šäœåãæ¢ãããã®æœåšèœåãæå€§éã«åŒãåºãããã®å®è·µçãªäŸãšå®çšçãªç¥èŠãæäŸããŸãã
Performance Observer APIãšã¯ïŒ
Performance Observer APIã¯ããã©ãŠã¶ã§ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ãçºçãããšãã«ããã賌èªã§ããJavaScript APIã§ããäºåŸåæãå¿ èŠãšããããšãå€ãåŸæ¥ã®ããã©ãŒãã³ã¹ç£èŠããŒã«ãšã¯ç°ãªããPerformance Observer APIã¯ããã©ãŒãã³ã¹ããŒã¿ãžã®ãªã¢ã«ã¿ã€ã ã¢ã¯ã»ã¹ãæäŸããããã©ãŒãã³ã¹ã®åé¡ãçºçãããšãã«ããã«å¯Ÿå¿ã§ããããã«ããŸãããã®ãªã¢ã«ã¿ã€ã ã®ãã£ãŒãããã¯ã«ãŒãã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«åœ±é¿ãäžããåã«ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ãã察åŠããããã«éåžžã«è²Žéã§ãã
ããã¯ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåžžã«ç£èŠãããªã¹ãã³ã°ããã€ã¹ã®ãããªãã®ã ãšèããŠãã ãããç¹å®ã®ããã©ãŒãã³ã¹ã€ãã³ãïŒäŸïŒãã³ã°ã¿ã¹ã¯ããªãœãŒã¹ã®èªã¿èŸŒã¿ãã¬ã€ã¢ãŠãã·ããïŒãçºçãããšããªãã¶ãŒããŒã«éç¥ããããã®ã€ãã³ãããŒã¿ãåŠçããŠã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã«é¢ããæŽå¯ãåŸãããšãã§ããŸãã
äž»èŠãªæŠå¿µãšçšèª
å®è·µçãªå®è£ ã«å ¥ãåã«ãããã€ãã®äž»èŠãªæŠå¿µãšçšèªãå®çŸ©ããŸãããïŒ
- PerformanceEntry: åäžã®ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ãŸãã¯ã€ãã³ãã衚ãåºæ¬ã€ã³ã¿ãŒãã§ãŒã¹ã
nameãentryTypeãstartTimeãdurationãªã©ã®å ±éããããã£ãå«ã¿ãŸãã - PerformanceObserver: ããã©ãŒãã³ã¹ãšã³ããªã®éç¥ã賌èªããåä¿¡ãã圹å²ãæ ãã³ã¢ã€ã³ã¿ãŒãã§ãŒã¹ã
- entryTypes: ãªãã¶ãŒããŒãç£èŠãã¹ãããã©ãŒãã³ã¹ãšã³ããªã®ã¿ã€ããæå®ããæååã®é
åãäžè¬çãªãšã³ããªã¿ã€ãã«ã¯
'longtask'ã'resource'ã'layout-shift'ã'paint'ã'navigation'ãªã©ããããŸãã - buffered: ãªãã¶ãŒããŒãäœæãããåã«çºçããããã©ãŒãã³ã¹ãšã³ããªã®éç¥ãåãåãã¹ããã©ããã瀺ãããŒã«å€ãã©ã°ã
- observe(): ããã©ãŒãã³ã¹ãšã³ããªã®ç£èŠãéå§ããããã«äœ¿çšãããã¡ãœããã
entryTypesãšbufferedãã©ã°ãæå®ãããªãã·ã§ã³ãªããžã§ã¯ããåããŸãã - disconnect(): ããã©ãŒãã³ã¹ãšã³ããªã®ç£èŠã忢ããããã«äœ¿çšãããã¡ãœããã
Performance Observerã®èšå®
Performance Observerã®äœæã¯ç°¡åã§ãã以äžã¯ããã³ã°ã¿ã¹ã¯ãç£èŠããæ¹æ³ã瀺ãåºæ¬çãªäŸã§ãïŒ
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Long Task:', entry);
// ãã³ã°ã¿ã¹ã¯ãšã³ããªãåŠç
});
});
observer.observe({ entryTypes: ['longtask'] });
ãã®äŸã§ã¯ãæ°ããPerformanceObserverã€ã³ã¹ã¿ã³ã¹ãäœæããŸããã³ã³ã¹ãã©ã¯ã¿ã¯ãæå®ãããã¿ã€ãã®æ°ããããã©ãŒãã³ã¹ãšã³ããªãç£èŠããããã³ã«å®è¡ãããã³ãŒã«ããã¯é¢æ°ãåãåããŸããlist.getEntries()ã¡ãœããã¯ãç£èŠå¯Ÿè±¡ã®ãšã³ããªã¿ã€ãã«äžèŽããPerformanceEntryãªããžã§ã¯ãã®é
åãè¿ããŸããæåŸã«ãobserve()ã¡ãœãããåŒã³åºããŠãã³ã°ã¿ã¹ã¯ã®ç£èŠãéå§ããŸãã
ã³ãŒãã®è§£èª¬ïŒ
new PerformanceObserver((list) => { ... }): ã³ãŒã«ããã¯é¢æ°ãæã€æ°ãããªãã¶ãŒããŒã€ã³ã¹ã¿ã³ã¹ãäœæããŸããã³ãŒã«ããã¯ã¯`list`åŒæ°ãåãåããŸããlist.getEntries().forEach((entry) => { ... }): `list`ãããã¹ãŠã®PerformanceEntryãªããžã§ã¯ããååŸããããããå埩åŠçããŸããconsole.log('Long Task:', entry);: ãã³ã°ã¿ã¹ã¯ãšã³ããªãã³ã³ãœãŒã«ã«åºåããŸãããããç¬èªã®åŠçããžãã¯ã«çœ®ãæããŸããobserver.observe({ entryTypes: ['longtask'] });: 'longtask'ã¿ã€ãã®ããã©ãŒãã³ã¹ãšã³ããªã®ç£èŠãéå§ããŸãã
äžè¬çãªããã©ãŒãã³ã¹ãšã³ããªã¿ã€ããšãã®çšé
Performance Observer APIã¯ããŸããŸãªãšã³ããªã¿ã€ãããµããŒãããŠããããããããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã«é¢ããç°ãªãæŽå¯ãæäŸããŸãã以äžã¯ãæãäžè¬çã«äœ¿çšããããšã³ããªã¿ã€ããšãã®å¿çšäŸã®äžéšã§ãïŒ
1. ãã³ã°ã¿ã¹ã¯ (Long Tasks)
ãšã³ããªã¿ã€ã: 'longtask'
ãã³ã°ã¿ã¹ã¯ãšã¯ãã¡ã€ã³ã¹ã¬ããã50ããªç§ä»¥äžãããã¯ããã¿ã¹ã¯ã®ããšã§ãããããã®ã¿ã¹ã¯ã¯ãé¡èãªé å»¶ãã«ã¯ã€ããåŒãèµ·ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãããã³ã°ã¿ã¹ã¯ãç£èŠããããšã§ãéå¹çãªã³ãŒããéå°ãªåŠçã«ãã£ãŠåŒãèµ·ããããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ãã察åŠããããšãã§ããŸãã
䜿çšäŸïŒ
- èšç®éã®å€ãJavaScript颿°ã®ç¹å®ã
- é·æéã®é å»¶ãåŒãèµ·ãããŠãããµãŒãããŒãã£è£œã¹ã¯ãªããã®æé©åã
- 倧ããªã¿ã¹ã¯ãããå°ããªéåæãŠãããã«åå²ã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Long Task:', entry.duration);
// ãã³ã°ã¿ã¹ã¯ã®ç¶ç¶æéãåæããæœåšçãªããã«ããã¯ãç¹å®ããŸãã
});
});
observer.observe({ entryTypes: ['longtask'] });
2. ãªãœãŒã¹ã¿ã€ãã³ã° (Resource Timing)
ãšã³ããªã¿ã€ã: 'resource'
ãªãœãŒã¹ã¿ã€ãã³ã°APIã¯ãç»åãã¹ã¯ãªãããã¹ã¿ã€ã«ã·ãŒããªã©ã®åã ã®ãªãœãŒã¹ã®èªã¿èŸŒã¿ã«é¢ããè©³çŽ°ãªæ å ±ãæäŸããŸãããªãœãŒã¹ã¿ã€ãã³ã°ãç£èŠããããšã§ãèªã¿èŸŒã¿ãé ããªãœãŒã¹ãç¹å®ãããã®é ä¿¡ãæé©åããŠããŒãžã®èªã¿èŸŒã¿ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
䜿çšäŸïŒ
- ããŒãžã®èªã¿èŸŒã¿ãé ãããŠãã倧ããªç»åã®ç¹å®ã
- ç»åå§çž®ãšãã©ãŒãããã®æé©åã
- ãã©ãŠã¶ã®ãã£ãã·ã¥ã掻çšããŠãªãœãŒã¹ã®èªã¿èŸŒã¿æéãççž®ã
- ãµãŒãããŒãã£è£œã¹ã¯ãªãããããŒãžã®èªã¿èŸŒã¿ããã©ãŒãã³ã¹ã«äžãã圱é¿ã®åæã
- DNS解決ãTCPæ¥ç¶ãTLSããŽã·ãšãŒã·ã§ã³ã®ããã«ããã¯ã®ç¹å®ã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Resource:', entry.name, entry.duration);
// ãªãœãŒã¹ã®èªã¿èŸŒã¿æéãåæãããªãœãŒã¹é
ä¿¡ãæé©åããŸãã
});
});
observer.observe({ entryTypes: ['resource'] });
3. ã¬ã€ã¢ãŠãã·ãã (Layout Shifts)
ãšã³ããªã¿ã€ã: 'layout-shift'
ã¬ã€ã¢ãŠãã·ããã¯ããŠã§ãããŒãžäžã®èŠçŽ ãäºæããäœçœ®ãå€ããããšã§çºçãããŠãŒã¶ãŒã«ãšã£ãŠäžå¿«ã§éªéãªäœéšãåŒãèµ·ãããŸãããããã®ã·ããã¯ãå€ãã®å Žåã寞æ³ã®æå®ããªãç»åãåçã«æ¿å ¥ãããã³ã³ãã³ãããŸãã¯é ããŠèªã¿èŸŒãŸãããã©ã³ãã«ãã£ãŠåŒãèµ·ããããŸããã¬ã€ã¢ãŠãã·ãããç£èŠããããšã§ããããã®äºæãã¬å€æŽã®æ ¹æ¬åå ãç¹å®ããŠå¯ŸåŠããã¢ããªã±ãŒã·ã§ã³ã®èŠèŠçãªå®å®æ§ãåäžãããããšãã§ããŸãã
䜿çšäŸïŒ
- ã¬ã€ã¢ãŠãã·ãããåŒãèµ·ãããŠããã寞æ³ã®æå®ããªãç»åã®ç¹å®ã
- ã¬ã€ã¢ãŠãã·ãããæå°éã«æããããã®åçæ¿å ¥ã³ã³ãã³ãã®èªã¿èŸŒã¿æé©åã
- ãã©ã³ãã®èªã¿èŸŒã¿ã«ããã¬ã€ã¢ãŠãã·ãããé²ãããã®ãã©ã³ã衚瀺æŠç¥ã®äœ¿çšã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Layout Shift:', entry.value);
// ã¬ã€ã¢ãŠãã·ããã®ã¹ã³ã¢ãåæããã·ãããåŒãèµ·ãããŠããèŠçŽ ãç¹å®ããŸãã
});
});
observer.observe({ entryTypes: ['layout-shift'] });
4. ãã€ã³ãã¿ã€ãã³ã° (Paint Timing)
ãšã³ããªã¿ã€ã: 'paint'
ãã€ã³ãã¿ã€ãã³ã°APIã¯ãFirst Paint (FP) ãš First Contentful Paint (FCP) ã®ã¡ããªã¯ã¹ãæäŸããŸãããããã¯ããŠãŒã¶ãŒãäœæããèªã¿èŸŒã¿ããã©ãŒãã³ã¹ã®éèŠãªææšã§ãããã€ã³ãã¿ã€ãã³ã°ãç£èŠããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®ã¬ã³ããªã³ã°ãæé©åããããéãèŠèŠçã«é åçãªäœéšãæäŸã§ããŸãã
䜿çšäŸïŒ
- ã¯ãªãã£ã«ã«ã¬ã³ããªã³ã°ãã¹ãæé©åããŠãFirst PaintãŸã§ã®æéãççž®ã
- éèŠã§ãªããªãœãŒã¹ãé å»¶èªã¿èŸŒã¿ãããŠãFirst Contentful PaintãŸã§ã®æéãæ¹åã
- ã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿ã䜿çšããŠãåæJavaScriptãã³ãã«ãµã€ãºãåæžã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Paint:', entry.name, entry.startTime);
// ãã€ã³ãã¿ã€ãã³ã°ãåæããã¬ã³ããªã³ã°ãã€ãã©ã€ã³ãæé©åããŸãã
});
});
observer.observe({ entryTypes: ['paint'] });
5. ããã²ãŒã·ã§ã³ã¿ã€ãã³ã° (Navigation Timing)
ãšã³ããªã¿ã€ã: 'navigation'
ããã²ãŒã·ã§ã³ã¿ã€ãã³ã°APIã¯ãæåã®ãªã¯ãšã¹ãããããŒãžã®èªã¿èŸŒã¿å®äºãŸã§ã®ãããŒãžããã²ãŒã·ã§ã³ããã»ã¹ã®ããŸããŸãªæ®µéã«é¢ããè©³çŽ°ãªæ å ±ãæäŸããŸããããã²ãŒã·ã§ã³ã¿ã€ãã³ã°ãç£èŠããããšã§ãããã²ãŒã·ã§ã³ããã»ã¹ã®ããã«ããã¯ãç¹å®ããããŒãžå šäœã®èªã¿èŸŒã¿äœéšãæé©åã§ããŸãã
䜿çšäŸïŒ
- DNS解決æéãTCPæ¥ç¶æéãTLSããŽã·ãšãŒã·ã§ã³æéã®åæã
- ãµãŒããŒãµã€ãã®åŠçããã«ããã¯ã®ç¹å®ã
- HTMLã³ã³ãã³ãã®é ä¿¡ãæé©åããŠãTime to First Byte (TTFB) ãççž®ã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Navigation:', entry.duration);
// ããã²ãŒã·ã§ã³ã¿ã€ãã³ã°ãåæããããŒãžã®èªã¿èŸŒã¿ããã»ã¹ãæé©åããŸãã
});
});
observer.observe({ entryTypes: ['navigation'] });
å®äžçã§ã®äŸãšãŠãŒã¹ã±ãŒã¹
Performance Observer APIã¯ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããã«å¹ åºãã·ããªãªã§å¿çšã§ããŸãã以äžã¯ãå®äžçã§ã®äŸãšãŠãŒã¹ã±ãŒã¹ã§ãïŒ
1. Eã³ããŒã¹ãµã€ãïŒååç»åã®èªã¿èŸŒã¿æé©å
Eã³ããŒã¹ãµã€ãã¯ããªãœãŒã¹ã¿ã€ãã³ã°APIã䜿çšããŠååç»åã®èªã¿èŸŒã¿æéãç£èŠã§ããŸããããŒãžã®èªã¿èŸŒã¿ãé ãããŠãã倧ããªç»åãç¹å®ããããšã§ããµã€ãã¯ç»åã®å§çž®ãæé©åããã¬ã¹ãã³ã·ãç»åã䜿ãããã©ãŠã¶ã®ãã£ãã·ã¥ã掻çšããŠã·ã§ããã³ã°äœéšãåäžãããããšãã§ããŸããäŸãã°ãæ¥æ¬ã®ãªã³ã©ã€ã³å°å£²æ¥è ã¯ããã€ãšã³ãããã€ã¹ã§ã¯å®ç§ã«ã¬ã³ããªã³ã°ãããé«è§£å床ã®ç»åããå°æ¹ã®äœéæ¥ç¶ãŠãŒã¶ãŒã«ãšã£ãŠã¯èš±å®¹ã§ããªãèªã¿èŸŒã¿æéãåŒãèµ·ãããŠããããšãèŠã€ãããããããŸããããªãœãŒã¹ã¿ã€ãã³ã°APIã䜿çšããããšã§ããã®åé¡ãç¹å®ãããããã¯ãŒã¯ç¶æ³ã«å¿ããé©å¿çãªç»åé ä¿¡ãå®è£ ã§ããŸãã
2. ãã¥ãŒã¹ãµã€ãïŒåºåèªã¿èŸŒã¿ã«ããã¬ã€ã¢ãŠãã·ããã®åæž
ãã¥ãŒã¹ãµã€ãã¯ãã¬ã€ã¢ãŠãã·ããAPIã䜿çšããŠãåçã«æ¿å ¥ãããåºåã«ãã£ãŠåŒãèµ·ããããã¬ã€ã¢ãŠãã·ãããç£èŠã§ããŸããåºåçšã®ã¹ããŒã¹ã確ä¿ããåºåã³ã³ãã³ãã®èªã¿èŸŒã¿ãæé©åããããšã§ããµã€ãã¯ã¬ã€ã¢ãŠãã·ãããæå°éã«æããããå®å®ãããŠãŒã¶ãŒãã¬ã³ããªãŒãªèªæžäœéšãæäŸã§ããŸããã€ã³ãã®ãã¥ãŒã¹ã¡ãã£ã¢ã¯ã倿§ãªããã€ã¹ãæã€åºç¯ãªèªè ã«ãµãŒãã¹ãæäŸããŠããããã®APIã䜿çšããŠãããŸããŸãªãœãŒã¹ããã®åºåãç°ãªãé床ã§èªã¿èŸŒãŸããå Žåã§ãäžè²«ããèªæžäœéšãä¿èšŒã§ããŸããçªç¶ã®ã³ã³ãã³ãã®ãžã£ã³ããé¿ããããšã§ããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããåäžããçŽåž°çãæžå°ããŸãã
3. ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ïŒJavaScriptãã¬ãŒã ã¯ãŒã¯ã«ãããã³ã°ã¿ã¹ã¯ã®åæ
ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã¯ããã³ã°ã¿ã¹ã¯APIã䜿çšããŠãé å»¶ãã«ã¯ã€ããåŒãèµ·ãããŠããèšç®éã®å€ãJavaScript颿°ãç¹å®ã§ããŸãããããã®é¢æ°ãæé©åããããããå°ããªéåæãŠãããã«åå²ãããããããšã§ããã©ãããã©ãŒã ã¯ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®å¿çæ§ãåäžãããããã¹ã ãŒãºãªãã©ãŠãžã³ã°äœéšãæäŸã§ããŸããäŸãã°ãã¢ã¡ãªã«ã«æ¬ç€Ÿã眮ããœãŒã·ã£ã«ã¡ãã£ã¢äŒæ¥ã¯ãç¹å®ã®JavaScriptãã¬ãŒã ã¯ãŒã¯ã«å€§ããäŸåããäžéšã®æ©èœããæ±åã¢ãžã¢ã®ãŠãŒã¶ãŒã䜿çšããå€ãã¢ãã€ã«ããã€ã¹ã§ãã³ã°ã¿ã¹ã¯ãåŒãèµ·ãããŠããããšãçºèŠãããããããŸããããããã®ããã«ããã¯ãç¹å®ããããšã§ãæé©åã®åãçµã¿ãåªå ãããã代æ¿ã®ãã¬ãŒã ã¯ãŒã¯å®è£ ãæ€èšãããã§ããŸãã
4. ãŠã§ãããŒã¹ã®ã²ãŒã ïŒãã¬ãŒã ã¬ã³ããªã³ã°æéã®ç£èŠ
ãŠã§ãããŒã¹ã®ã²ãŒã ã¯ããã€ã³ãã¿ã€ãã³ã°APIã䜿çšããŠãã¬ãŒã ã®ã¬ã³ããªã³ã°æéãç£èŠããã²ãŒã ã®æ»ãããã«åœ±é¿ãäžããŠããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ã§ããŸããã¬ã³ããªã³ã°ãã€ãã©ã€ã³ãæé©åããåãã¬ãŒã ã§å®è¡ãããäœæ¥éãæžããããšã§ãã²ãŒã ã¯ããæµåçã§é åçãªã²ãŒã äœéšãæäŸã§ããŸãããšãŒãããã®ã²ãŒã éçºè ã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãã¿ãŒã²ããã«ããŠããããã®APIã䜿çšããŠãå¹ åºãããŒããŠã§ã¢æ§æã§ã²ãŒã ãã¹ã ãŒãºã«åäœããããšã確èªã§ããŸããç°ãªãå°ççå°åã§ã®ã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ã®ã°ãã€ããç¹å®ããããšã§ãã©ãã§ãæé©ãªããã©ãŒãã³ã¹ãçºæ®ã§ããããã«ã²ãŒã ã®ã¢ã»ãããšã³ãŒããæé©åã§ããŸãã
5. ãªã³ã©ã€ã³åŠç¿ãã©ãããã©ãŒã ïŒããã²ãŒã·ã§ã³ãšããŒãžé·ç§»ã®æ¹å
ãªã³ã©ã€ã³åŠç¿ãã©ãããã©ãŒã ã¯ãããã²ãŒã·ã§ã³ã¿ã€ãã³ã°APIã䜿çšããŠããŒãžããã²ãŒã·ã§ã³ããã»ã¹ã®ããŸããŸãªæ®µéãåæããããŒãžå šäœã®èªã¿èŸŒã¿äœéšã«åœ±é¿ãäžããŠããããã«ããã¯ãç¹å®ã§ããŸãããµãŒããŒãµã€ãã®åŠçãæé©åããHTMLã³ã³ãã³ãã®é ä¿¡ãæ¹åãããã©ãŠã¶ã®ãã£ãã·ã¥ã掻çšããããšã§ããã©ãããã©ãŒã ã¯ããéããããã·ãŒã ã¬ã¹ãªåŠç¿äœéšãæäŸã§ããŸããäŸãã°ãã«ããã«æ ç¹ã眮ãæè²ãã©ãããã©ãŒã ã¯ãäžçäžã®åŠçã«ãµãŒãã¹ãæäŸããŠãããããã²ãŒã·ã§ã³ã¿ã€ãã³ã°ãåæããŠãã€ã³ã¿ãŒãããã€ã³ãã©ãéãããŠããåœã®åŠçãã¬ãã¹ã³éãç§»åããéã«èš±å®¹ã§ããèªã¿èŸŒã¿æéãäœéšã§ããããã«ä¿èšŒã§ããŸããç¹å®ã®å°åã§ã®ãµãŒããŒå¿çã®é ããç¹å®ããããšã§ãã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒCDNïŒã®èšå®ãæé©åã§ããŸãã
Performance Observer APIã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
Performance Observer APIã广çã«æŽ»çšããããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- åæã«é¢é£ãããšã³ããªã¿ã€ãã®ã¿ãç£èŠããã ããŸãã«ãå€ãã®ãšã³ããªã¿ã€ããç£èŠãããšãããã©ãŒãã³ã¹ã®ãªãŒããŒãããã«ã€ãªãããæãéèŠãªããã©ãŒãã³ã¹åé¡ãç¹å®ããã®ãé£ãããªããŸãã
- ããã©ãŒãã³ã¹ãšã³ããªãå¹ççã«åŠçããã ãªãã¶ãŒããŒã®ã³ãŒã«ããã¯é¢æ°å ã§èšç®éã®å€ãæäœãè¡ããšãããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ãããããé¿ããŠãã ãããWeb Workerã䜿çšããŠåŠçãå¥ã®ã¹ã¬ããã«ãªãããŒãããããšãæ€èšããŠãã ããã
- ãµã³ããªã³ã°æè¡ã䜿çšããŠåéããããŒã¿éãæžããã å Žåã«ãã£ãŠã¯ãåéããããŒã¿éãæžãããããã©ãŒãã³ã¹ã®ãªãŒããŒããããæå°éã«æããããã«ãããã©ãŒãã³ã¹ãšã³ããªããµã³ããªã³ã°ããå¿ èŠããããŸãã
- å ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããã Performance Observer APIã¯æ¯èŒçå®å®ããŠããŸãããäºæãã¬ãšã©ãŒãã¢ããªã±ãŒã·ã§ã³ãäžæãããªãããã«ãå ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããããšãéèŠã§ãã
- ããã©ãŒãã³ã¹ããŒã¿åéã®ãã©ã€ãã·ãŒãžã®åœ±é¿ãèæ ®ããã åéããŠããããã©ãŒãã³ã¹ããŒã¿ã«ã€ããŠãŠãŒã¶ãŒã«éææ§ãæã¡ãé©çšããããã¹ãŠã®ãã©ã€ãã·ãŒèŠå¶ãéµå®ããŠããããšã確èªããŠãã ãããããã¯ã欧å·é£åã®GDPRã®ãããªå³æ ŒãªããŒã¿ä¿è·æ³ãããå°åã§ç¹ã«éèŠã§ãã
- `buffered`ãªãã·ã§ã³ãè³¢ã䜿çšããã åæã®ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ããã£ããã£ããã®ã«åœ¹ç«ã¡ãŸããã`buffered: true`ã䜿çšãããšãç¹ã«å€æ°ã®ã€ãã³ããç£èŠããå Žåã«ã¡ã¢ãªäœ¿çšéãå¢å ããå¯èœæ§ãããããšã«æ³šæããŠãã ãããæ éã«äœ¿çšããç¹ã«äœã¹ããã¯ã®ããã€ã¹ã§ã®ããã©ãŒãã³ã¹ãžã®æœåšçãªåœ±é¿ãèæ ®ããŠãã ããã
- ããŒã¿åŠçããããŠã³ã¹ãŸãã¯ã¹ãããã«ããã ããã©ãŒãã³ã¹ããŒã¿ãåæã®ããã«ãªã¢ãŒããµãŒããŒã«éä¿¡ããå Žåãç¹ã«ã¢ã¯ãã£ããã£ãå€ãæéã«ãããã¯ãŒã¯ãå§è¿«ããªãããã«ãããŒã¿éä¿¡ããããŠã³ã¹ãŸãã¯ã¹ãããã«ããããšãæ€èšããŠãã ããã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. ããã©ãŒãã³ã¹ããŒã¿åŠçã®ããã®Web Workerã®äœ¿çš
åè¿°ã®éããPerformance Observerã®ã³ãŒã«ããã¯å ã§çŽæ¥è€éãªèšç®ãè¡ããšãã¡ã€ã³ã¹ã¬ããã®å¿çæ§ã«åœ±é¿ãäžããå¯èœæ§ããããŸãããã¹ããã©ã¯ãã£ã¹ã¯ããã®åŠçãWeb Workerã«ãªãããŒãããããšã§ããWeb Workerã¯å¥ã®ã¹ã¬ããã§å®è¡ããããããã¡ã€ã³ã¹ã¬ããããããã¯ãããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãç¶æã§ããŸãã
以äžã¯ãç°¡åãªäŸã§ãïŒ
- Web Workerã¹ã¯ãªãããäœæãã (äŸ: `performance-worker.js`):
// performance-worker.js
self.addEventListener('message', (event) => {
const performanceData = event.data;
// ããã§è€éãªåæãå®è¡
const processedData = processPerformanceData(performanceData); // å®éã®é¢æ°ã«çœ®ãæããŠãã ãã
self.postMessage(processedData);
});
function processPerformanceData(data) {
// ããã«è€éãªåŠçããžãã¯
return data; // åŠçæžã¿ã®ããŒã¿ã«çœ®ãæããŠãã ãã
}
- ã¡ã€ã³ã¹ã¯ãªããã§:
const worker = new Worker('performance-worker.js');
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
// åŠçã®ããã«ãšã³ããªãã¯ãŒã«ãŒã«éä¿¡
worker.postMessage(entries);
});
worker.addEventListener('message', (event) => {
const processedData = event.data;
// ã¯ãŒã«ãŒããã®åŠçæžã¿ããŒã¿ãåŠç
console.log('Processed Data from Worker:', processedData);
});
observer.observe({ entryTypes: ['longtask'] });
ãã®ã¢ãããŒãã«ãããã¡ã€ã³ã¹ã¬ããã®å¿çæ§ã«åœ±é¿ãäžããããšãªãè€éãªåæãå®è¡ã§ããããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããŸãã
2. ããã©ãŒãã³ã¹ããŒã¿ãšãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ã®çžé¢ä»ã
ããæ·±ãæŽå¯ãåŸãããã«ãããã©ãŒãã³ã¹ããŒã¿ãç¹å®ã®ãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãšçžé¢ãããŸããäŸãã°ãã©ã®ãã¿ã³ã¯ãªãã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ããã³ã°ã¿ã¹ã¯ãã¬ã€ã¢ãŠãã·ãããåŒãèµ·ãããã远跡ããŸããããã«ãããããã©ãŒãã³ã¹ã®ããã«ããã¯ã®åå ãšãªã£ãŠããæ£ç¢ºãªã³ãŒããã³ã³ããŒãã³ããç¹å®ããã®ã«åœ¹ç«ã¡ãŸããã«ã¹ã¿ã ã€ãã³ããã¿ã€ã ã¹ã¿ã³ãã䜿çšããŠãããã©ãŒãã³ã¹ãšã³ããªãšãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãé¢é£ä»ããããšãã§ããŸãã
// äŸïŒãã¿ã³ã¯ãªãã¯ã远跡ãããã³ã°ã¿ã¹ã¯ãšçžé¢ããã
document.getElementById('myButton').addEventListener('click', () => {
const clickTimestamp = Date.now();
// ããã«ãã¿ã³ã¯ãªãã¯ã®ããžãã¯
performSomeAction();
// ã¯ãªãã¯åŸã®ãã³ã°ã¿ã¹ã¯ãç£èŠ
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.startTime >= clickTimestamp) {
console.log('Long Task after button click:', entry);
// ãã³ã°ã¿ã¹ã¯ããŒã¿ãšclickTimestampãåæãµãŒãã¹ã«éä¿¡
}
});
});
observer.observe({ entryTypes: ['longtask'] });
});
ããã©ãŒãã³ã¹ããŒã¿ãšãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãçžé¢ãããããšã§ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ãã詳现ãªçè§£ãåŸãŠãããã«å¿ããŠæé©åã®åãçµã¿ãåªå é äœä»ãããããšãã§ããŸãã
3. Performance MarkãšMeasureã®æŽ»çš
Performance APIã¯ãperformance.mark()ãšperformance.measure()ã¡ãœãããæäŸããŠãããããã«ããã¢ããªã±ãŒã·ã§ã³å
ã«ã«ã¹ã¿ã ã®ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ãå®çŸ©ã§ããŸããMarkã¯ã³ãŒãã®ç¹å®ã®ãã€ã³ãã«æ¿å
¥ã§ããã¿ã€ã ã¹ã¿ã³ãã§ãããMeasureã¯2ã€ã®ããŒã¯éã®æéãèšç®ããŸããããã¯ãã«ã¹ã¿ã ã³ã³ããŒãã³ããç¹å®ã®ã³ãŒããããã¯ã®ããã©ãŒãã³ã¹ã枬å®ããã®ã«ç¹ã«äŸ¿å©ã§ãã
// äŸïŒã«ã¹ã¿ã ã³ã³ããŒãã³ãã®ããã©ãŒãã³ã¹ã枬å®ãã
performance.mark('componentStart');
// ããã«ã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããžãã¯
renderMyComponent();
performance.mark('componentEnd');
performance.measure('componentRenderTime', 'componentStart', 'componentEnd');
const measure = performance.getEntriesByName('componentRenderTime')[0];
console.log('Component Render Time:', measure.duration);
ãã®åŸã'measure'ãšã³ããªã¿ã€ããç£èŠããããšã§ãPerformance Observer APIã䜿çšããŠãããã®ã«ã¹ã¿ã ã¡ãžã£ãŒãç£èŠã§ããŸãã
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'measure') {
console.log('Custom Measure:', entry.name, entry.duration);
}
});
});
observer.observe({ entryTypes: ['measure'] });
Performance Observer APIã®ä»£æ¿ææ®µ
Performance Observer APIã¯åŒ·åãªããŒã«ã§ãããããã©ãŒãã³ã¹ç£èŠã®å¯äžã®éžæè¢ã§ã¯ãããŸããã以äžã«ããã€ãã®ä»£æ¿ææ®µãæããŸãïŒ
- Google Lighthouse: 詳现ãªããã©ãŒãã³ã¹ã¬ããŒããšæ¹åã®ããã®æšå¥šäºé ãæäŸããå æ¬çãªç£æ»ããŒã«ã
- WebPageTest: ããŸããŸãªå Žæããã©ãŠã¶ãããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ããã¹ãããããã®åŒ·åãªãªã³ã©ã€ã³ããŒã«ã
- ãã©ãŠã¶éçºè ããŒã«: Chrome DevToolsãFirefox Developer Toolsãªã©ã®ãã©ãŠã¶éçºè ããŒã«ã¯ããããã¡ã€ãªã³ã°ãã¿ã€ã ã©ã€ã³èšé²ããããã¯ãŒã¯åæãªã©ãè±å¯ãªããã©ãŒãã³ã¹åææ©èœãæäŸããŸãã
- ãªã¢ã«ãŠãŒã¶ãŒã¢ãã¿ãªã³ã° (RUM) ããŒã«: RUMããŒã«ã¯å®éã®ãŠãŒã¶ãŒããããã©ãŒãã³ã¹ããŒã¿ãåéããå®éã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«é¢ãã貎éãªæŽå¯ãæäŸããŸããäŸãšããŠãNew RelicãDatadogãSentryããããŸãã
- ã·ã³ã»ãã£ãã¯ã¢ãã¿ãªã³ã°ããŒã«: ã·ã³ã»ãã£ãã¯ã¢ãã¿ãªã³ã°ããŒã«ã¯ããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãã·ãã¥ã¬ãŒãããŠãå®éã®ãŠãŒã¶ãŒã«åœ±é¿ãäžããåã«ããã©ãŒãã³ã¹ã®åé¡ãç©æ¥µçã«ç¹å®ããŸãã
çµè«
Performance Observer APIã¯ã髿§èœãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®æäŸã«çå£ã«åãçµããŠã§ãéçºè ã«ãšã£ãŠäžå¯æ¬ ãªããŒã«ã§ããããã©ãŒãã³ã¹ã¡ããªã¯ã¹ãžã®ãªã¢ã«ã¿ã€ã ã¢ã¯ã»ã¹ãæäŸããããšã§ãAPIã¯ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç©æ¥µçã«ç¹å®ããŠå¯ŸåŠããã¢ããªã±ãŒã·ã§ã³ãæé«ã®ããã©ãŒãã³ã¹ã«æé©åãããŠãŒã¶ãŒãã¹ã ãŒãºã§é åçãªäœéšã確å®ã«åŸãããããã«ããŸããPerformance Observer APIãä»ã®ããã©ãŒãã³ã¹ç£èŠããŒã«ãæè¡ãšçµã¿åãããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã®å šäœåãææ¡ããç¶ç¶çã«ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãã
ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠãåæãæé©åããæä»£ã®å ãè¡ããã¯ã©ã¹æé«ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšãå¿ããªãã§ãã ãããPerformance Observer APIã¯ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãå¶åŸ¡ãã仿¥ã®ããžã¿ã«äžçã®çµ¶ãéãªãå¢å€§ããèŠæ±ã«å¿ããåãäžããŠãããŸãã
ãã®å æ¬çãªã¬ã€ãã¯ãPerformance Observer APIãçè§£ããæŽ»çšããããã®åŒ·åºãªåºç€ãæäŸããŸããããããããªãã®ç¥èãå®è·µã«ç§»ãããã®åŒ·åãªããŒã«ã®å¯èœæ§ãæå€§éã«åŒãåºãæã§ãïŒ