ããã³ããšã³ãããã©ãŒãã³ã¹ç£èŠã§ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸããããã³ã¢ãŠã§ããã€ã¿ã«ãããŒã«ãæŠç¥ããã¹ããã©ã¯ãã£ã¹ãåŠã³ãããéãé åçãªãŠã§ããµã€ããå®çŸããŸãã
ããã³ããšã³ãããã©ãŒãã³ã¹ç£èŠïŒã³ã¢ãŠã§ããã€ã¿ã«ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹
仿¥ã®ããžã¿ã«ç°å¢ã«ãããŠãé«éã§å¿çæ§ã®é«ããŠã§ããµã€ãã¯æåã«äžå¯æ¬ ã§ãããŠãŒã¶ãŒã¯ã·ãŒã ã¬ã¹ãªäœéšãæåŸ ããŠãããããããªé å»¶ã§ãäžæºãé¢è±ã«ã€ãªããå¯èœæ§ããããŸããããã³ããšã³ãã®ããã©ãŒãã³ã¹ç£èŠãç¹ã«ã³ã¢ãŠã§ããã€ã¿ã«ã«çŠç¹ãåœãŠãããšã¯ãè¯å¥œãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããããžãã¹ç®æšãéæããäžã§éèŠãªåœ¹å²ãæãããŸãã
ããã³ããšã³ãããã©ãŒãã³ã¹ãéèŠãªçç±
ããã³ããšã³ãããã©ãŒãã³ã¹ã¯ããŠã§ããµã€ãã®æåã«ãããããã€ãã®éèŠãªåŽé¢ã«çŽæ¥åœ±é¿ããŸãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ (UX): é«éãªãŠã§ããµã€ãã¯ããŠãŒã¶ãŒã«ã¹ã ãŒãºã§å¿«é©ãªäœéšãæäŸãããšã³ã²ãŒãžã¡ã³ããšæºè¶³åºŠã®åäžã«ã€ãªãããŸããèªã¿èŸŒã¿æéãé ãã£ãããèŠçŽ ãå¿çããªãã£ãããããšããŠãŒã¶ãŒã¯äžæºãæããŠãµã€ããé¢ããŠããŸããŸãã
- æ€çŽ¢ãšã³ãžã³æé©å (SEO): Googleãªã©ã®æ€çŽ¢ãšã³ãžã³ã¯ãããã©ãŒãã³ã¹ã®è¯ããŠã§ããµã€ããåªå ããŸããã³ã¢ãŠã§ããã€ã¿ã«ã¯ã©ã³ãã³ã°èŠå ã§ããããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžãããããšã§ãæ€çŽ¢ãšã³ãžã³ã®ã©ã³ãã³ã°ãäžããããšãã§ããŸãã
- ã³ã³ããŒãžã§ã³ç: ãŠã§ããµã€ããéãã»ã©ã³ã³ããŒãžã§ã³çã¯é«ããªããŸãããŠã§ããµã€ããå¿çæ§ãé«ã䜿ããããå ŽåããŠãŒã¶ãŒã¯è³Œå ¥ãå®äºãããããµãŒãã¹ã«ç»é²ãããããå¯èœæ§ãé«ããªããŸãã
- ãã©ã³ãã®è©å€: é ããŠã§ããµã€ãã¯ãã©ã³ãã®è©å€ãæãªãå¯èœæ§ããããŸãããŠãŒã¶ãŒã¯ãé ããŠã§ããµã€ãããããã§ãã·ã§ãã«ã§ãªãããŸãã¯ä¿¡é Œã§ããªããšèªèãããããããŸããã
- ã¢ãã€ã«ããã©ãŒãã³ã¹: ã¢ãã€ã«ããã€ã¹ã®å©çšãå¢å ããã«ã€ããŠãã¢ãã€ã«åãã®ããã³ããšã³ãããã©ãŒãã³ã¹ã®æé©åãäžå¯æ¬ ã«ãªã£ãŠããŸããã¢ãã€ã«ãŠãŒã¶ãŒã¯ã€ã³ã¿ãŒãããæ¥ç¶ãé ããç»é¢ãå°ããããšãå€ããããããã©ãŒãã³ã¹ã¯ããã«éèŠã«ãªããŸãã
ã³ã¢ãŠã§ããã€ã¿ã«ã®ç޹ä»
ã³ã¢ãŠã§ããã€ã¿ã«ã¯ããŠã§ãäžã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã枬å®ããããã«Googleãéçºããäžé£ã®æšæºåãããææšã§ãããããã¯ãããã©ãŒãã³ã¹ã®3ã€ã®éèŠãªåŽé¢ã«çŠç¹ãåœãŠãŠããŸãïŒ
- èªã¿èŸŒã¿: ããŒãžã¯ã©ããããéãèªã¿èŸŒãŸãããïŒ
- ã€ã³ã¿ã©ã¯ãã£ãæ§: ããŒãžã¯ãŠãŒã¶ãŒã®æäœã«ã©ããããéãå¿çãããïŒ
- èŠèŠçãªå®å®æ§: èªã¿èŸŒã¿äžã«ããŒãžãäºæãããããããšã¯ãªããïŒ
3ã€ã®ã³ã¢ãŠã§ããã€ã¿ã«ã¯æ¬¡ã®ãšããã§ãïŒ
Largest Contentful Paint (LCP)
LCPã¯ããã¥ãŒããŒãå ã§æå€§ã®ã³ã³ãã³ãèŠçŽ ïŒäŸïŒç»åãããã¹ããããã¯ïŒã衚瀺ããããŸã§ã«ãããæéãæž¬å®ããŸããããã¯ãããŒãžã®ã¡ã€ã³ã³ã³ãã³ããã©ãã ãéãèªã¿èŸŒãŸãããã瀺ããŸãã
- è¯å¥œãªLCP: 2.5ç§æªæº
- èŠæ¹å: 2.5ç§ãã4ç§ã®é
- äžè¯ãªLCP: 4ç§è¶
äŸ: ãã¥ãŒã¹ãµã€ããæ³åããŠã¿ãŠãã ãããLCPã¯ãäž»èŠãªèšäºã®ç»åãšèŠåºããå®å šã«èªã¿èŸŒãŸãããŸã§ã«ãããæéã«ãªããŸãã
First Input Delay (FID)
FIDã¯ããã¿ã³ã®ã¯ãªãã¯ããã©ãŒã ãžã®ããã¹ãå ¥åãªã©ããŠãŒã¶ãŒã®æåã®æäœã«å¯ŸããŠãã©ãŠã¶ãå¿çãããŸã§ã«ãããæéãæž¬å®ããŸããããã¯ããŒãžã®å¿çæ§ãå®éåãããã®ã§ãã
- è¯å¥œãªFID: 100ããªç§æªæº
- èŠæ¹å: 100ããªç§ãã300ããªç§ã®é
- äžè¯ãªFID: 300ããªç§è¶
äŸ: eã³ããŒã¹ãµã€ãã§ã¯ãFIDã¯ãã«ãŒãã«è¿œå ããã¿ã³ãã¯ãªãã¯ããŠãããååãã·ã§ããã³ã°ã«ãŒãã«è¿œå ããããŸã§ã®é å»¶æéã«ãªããŸãã
泚: FIDã¯2024幎3æã«ã³ã¢ãŠã§ããã€ã¿ã«ãšããŠInteraction to Next Paint (INP)ã«çœ®ãæããããŸããINPã¯ããŒãžãšã®ãã¹ãŠã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã®å¿çæ§ã枬å®ããã€ã³ã¿ã©ã¯ãã£ãæ§ã«é¢ããããå æ¬çãªãã¥ãŒãæäŸããŸãã
Cumulative Layout Shift (CLS)
CLSã¯ãããŒãžã®èªã¿èŸŒã¿ããã»ã¹äžã«çºçããã衚瀺ã³ã³ãã³ãã®äºæãã¬ã¬ã€ã¢ãŠãã·ãããæž¬å®ããŸããããã¯ãããŒãžãèŠèŠçã«ã©ãã ãå®å®ããŠããããå®éåãããã®ã§ãã
- è¯å¥œãªCLS: 0.1æªæº
- èŠæ¹å: 0.1ãã0.25ã®é
- äžè¯ãªCLS: 0.25è¶
äŸ: ããã°èšäºã§åºåãçªç¶èªã¿èŸŒãŸããããã¹ããäžã«æŒãããããŠãŠãŒã¶ãŒãèªãã§ããå ŽæãèŠå€±ãã±ãŒã¹ãèããŠã¿ãŠãã ããããã®äºæãã¬ãºã¬ãé«ãCLSã¹ã³ã¢ã®åå ãšãªããŸãã
ããã³ããšã³ãããã©ãŒãã³ã¹ç£èŠã®ããã®ããŒã«
ããã³ããšã³ãããã©ãŒãã³ã¹ãã³ã¢ãŠã§ããã€ã¿ã«ãç£èŠã»åæããããã«ãããã€ãã®ããŒã«ãå©çšå¯èœã§ãïŒ
- Google PageSpeed Insights: ãã®ç¡æããŒã«ã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåæããæ¹åã®ããã®æšå¥šäºé ãæäŸããŸããã³ã¢ãŠã§ããã€ã¿ã«ããã®ä»ã®ããã©ãŒãã³ã¹ææšã枬å®ããŸãã
- Lighthouse: ãŠã§ãããŒãžã®å質ãåäžãããããã®ãªãŒãã³ãœãŒã¹ã®èªååããŒã«ã§ããChrome DevToolsã«çµ±åãããŠãããã³ãã³ãã©ã€ã³ãããå®è¡ã§ããŸãã
- Chrome DevTools: Chromeãã©ãŠã¶ã«çŽæ¥çµã¿èŸŒãŸããäžé£ã®éçºè åãããŒã«ã§ããããã©ãŒãã³ã¹åæãã³ãŒãã®ãããã°ããããã¯ãŒã¯ãªã¯ãšã¹ãã®æ€æ»ãªã©ãããŸããŸãªããŒã«ãæäŸããŸãã
- WebPageTest: äžçäžã®è€æ°ã®å ŽæãããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ããã¹ãããããã®ç¡æããŒã«ã§ãã詳现ãªããã©ãŒãã³ã¹ã¬ããŒããšèŠèŠåãæäŸããŸãã
- GTmetrix: 人æ°ã®ãããŠã§ããµã€ãé床ã»ããã©ãŒãã³ã¹åæããŒã«ã§ãããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ã«é¢ããè©³çŽ°ãªæŽå¯ãæäŸããæé©åã®ããã®æšå¥šäºé ãæç€ºããŸãã
- ãªã¢ã«ãŠãŒã¶ãŒã¢ãã¿ãªã³ã° (RUM) ããŒã«: RUMããŒã«ã¯ããŠã§ããµã€ãã蚪ããå®éã®ãŠãŒã¶ãŒããããã©ãŒãã³ã¹ããŒã¿ãåéããŸããããã«ããããŠãŒã¶ãŒãå®éã«ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãã©ã®ããã«äœéšããŠãããã«ã€ããŠã貎éãªæŽå¯ãåŸãããšãã§ããŸããäŸãšããŠãNew RelicãDatadogãSpeedCurveãªã©ããããŸãã
ããã³ããšã³ãããã©ãŒãã³ã¹ãæ¹åããããã®æŠç¥
ç£èŠããŒã«ã䜿çšããŠããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããããããã³ããšã³ãããã©ãŒãã³ã¹ãæ¹åããããã«ããŸããŸãªæŠç¥ãå®è£ ã§ããŸãïŒ
ç»åã®æé©å
ç»åã¯ãŠã§ããµã€ãã§æã倧ããªã¢ã»ããã§ããããšãå€ãããããã®æé©åã¯éåžžã«éèŠã§ããç»è³ªãæãªãããšãªããã¡ã€ã«ãµã€ãºãåæžããããã«ãç»åå§çž®æè¡ã䜿çšããŸããåç»åã«é©ããç»å圢åŒïŒäŸïŒWebPãJPEGãPNGïŒãéžæããŸãããã¥ãŒããŒãã«è¡šç€ºããããšãã«ã®ã¿ç»åãèªã¿èŸŒãé å»¶èªã¿èŸŒã¿ïŒlazy loadingïŒãå®è£ ããŸãã
äŸ: æ è¡ãµã€ãã§ã¯ãç®çå°ã®é«å質ãªåçã«WebPç»åã䜿çšããããšã§ãJPEGãšæ¯èŒããŠãã¡ã€ã«ãµã€ãºãå€§å¹ ã«åæžã§ããŸãã
ã³ãŒãã®æå°åãšå§çž®
HTMLãCSSãJavaScriptã³ãŒããæå°åïŒMinifyïŒããŠãäžèŠãªæåïŒäŸïŒç©ºçœãã³ã¡ã³ãïŒãåé€ããŸããGzipãBrotliã䜿çšããŠã³ãŒããå§çž®ãããããã¯ãŒã¯çµç±ã§è»¢éãããããŒã¿éãåæžããŸãã
ãã©ãŠã¶ãã£ãã·ã¥ã®æŽ»çš
ãŠã§ããµãŒããŒãèšå®ããŠãã©ãŠã¶ãã£ãã·ã¥ãå©çšããéçã¢ã»ããïŒäŸïŒç»åãCSSãJavaScriptïŒããŠãŒã¶ãŒã®ãã©ãŠã¶ã«ä¿åããŸããããã«ãããå蚪åæã«ãã©ãŠã¶ããããã®ã¢ã»ããããã£ãã·ã¥ããèªã¿èŸŒãããšãã§ããèªã¿èŸŒã¿æéãççž®ãããŸãã
HTTPãªã¯ãšã¹ãã®åæž
ãã©ãŠã¶ãè¡ãHTTPãªã¯ãšã¹ãã®æ°ãæå°éã«æããŸããè€æ°ã®CSSãŸãã¯JavaScriptãã¡ã€ã«ã1ã€ã®ãã¡ã€ã«ã«çµåããŸããCSSã¹ãã©ã€ãã䜿çšããŠãè€æ°ã®ç»åã1ã€ã®ç»åãã¡ã€ã«ã«ãŸãšããŸãã
ã¬ã³ããªã³ã°ã®æé©å
ã¬ã³ããªã³ã°ããã»ã¹ãæé©åããŠããŠã§ããµã€ãã®äœæããã©ãŒãã³ã¹ãåäžãããŸãããã¡ãŒã¹ããã¥ãŒïŒabove-the-foldïŒã®ã³ã³ãã³ããåªå ããŠè¿ éã«èªã¿èŸŒã¿ãŸããéèŠã§ãªããªãœãŒã¹ã«ã¯éåæèªã¿èŸŒã¿ã䜿çšããŸããã¬ã³ããªã³ã°ããã»ã¹ããããã¯ããå¯èœæ§ã®ããåæçãªJavaScriptã®äœ¿çšãé¿ããŸãã
ã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ (CDN) ã®äœ¿çš
CDNã¯ãäžçäžã«åæ£ããããµãŒããŒã®ãããã¯ãŒã¯ã§ããCDNã䜿çšããããšã§ããŠãŒã¶ãŒã«å°ççã«è¿ããµãŒããŒãããŠã§ããµã€ãã®ã¢ã»ãããé ä¿¡ã§ãããããé å»¶ãæžãããèªã¿èŸŒã¿æéãæ¹åã§ããŸãã
äŸ: ã°ããŒãã«ãªeã³ããŒã¹äŒæ¥ã¯ãCDNã䜿çšããŠãããŸããŸãªåœã®ãŠãŒã¶ãŒã«å¯ŸããŠé«éãªèªã¿èŸŒã¿æéã確ä¿ã§ããŸããäŸãã°ããšãŒãããã®ãŠãŒã¶ãŒã«ã¯ãšãŒãããã®CDNãµãŒããŒãããã¢ãžã¢ã®ãŠãŒã¶ãŒã«ã¯ã¢ãžã¢ã®CDNãµãŒããŒããã³ã³ãã³ããé ä¿¡ãããŸãã
ãã©ã³ãã®æé©å
ãŠã§ããã©ã³ãã¯æ éã«äœ¿çšããŸãããŠã§ãçšã«æé©åããããã©ã³ããéžæããŸããããã¹ãã衚瀺ãããªãïŒFOITïŒãŸãã¯ã¹ã¿ã€ã«ãé©çšãããªãïŒFOUTïŒãšãã£ãçŸè±¡ãé¿ããããã«ããã©ã³ãã®èªã¿èŸŒã¿æŠç¥ã䜿çšããŸãããã¡ã€ã«ãµã€ãºãåæžããããã«å¯å€ãã©ã³ãã®äœ¿çšãæ€èšããŸãã
ãµãŒãããŒãã£ã¹ã¯ãªããã®ç£èŠ
ãµãŒãããŒãã£ã¹ã¯ãªããïŒäŸïŒåæãã©ãã«ãŒããœãŒã·ã£ã«ã¡ãã£ã¢ãŠã£ãžã§ãããåºåã¹ã¯ãªããïŒã¯ãããã©ãŒãã³ã¹ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãããããã®ã¹ã¯ãªããã®ããã©ãŒãã³ã¹ãç£èŠããé ããŸãã¯äžèŠãªãã®ã¯åé€ããŸãããµãŒãããŒãã£ã¹ã¯ãªããã¯éåæã§èªã¿èŸŒã¿ãŸãã
ã³ãŒãåå²ã®å®è£
ã³ãŒãåå²ãšã¯ãJavaScriptã³ãŒããããå°ããªãã£ã³ã¯ã«åå²ããå¿ èŠã«å¿ããŠèªã¿èŸŒããããã«ããããšã§ããããã«ããããŠã§ããµã€ãã®åæèªã¿èŸŒã¿æéãççž®ããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããReactãAngularã®ãããªãã¬ãŒã ã¯ãŒã¯ã¯ãã³ãŒãåå²ãçµã¿èŸŒã¿ã§ãµããŒãããŠããŸãã
ã¢ãã€ã«åãæé©å
ãŠã§ããµã€ããã¢ãã€ã«ããã€ã¹åãã«æé©åããŸããã¬ã¹ãã³ã·ããã¶ã€ã³æè¡ã䜿çšããŠããŠã§ããµã€ããããŸããŸãªç»é¢ãµã€ãºã«é©å¿ããããã«ããŸããç»åãã¢ãã€ã«ããã€ã¹çšã«æé©åããŸããã¢ãã€ã«åºæã®ãã£ãã·ã³ã°æŠç¥ã䜿çšããŸãã
ç¶ç¶çãªç£èŠãšæ¹å
ããã³ããšã³ãããã©ãŒãã³ã¹ç£èŠã¯äžåºŠããã®äœæ¥ã§ã¯ãããŸãããç¶ç¶çãªç£èŠãšæ¹åãå¿ èŠãšããé²è¡äžã®ããã»ã¹ã§ããåè¿°ã®ããŒã«ã䜿çšããŠããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ã宿çã«ç£èŠããŸããã³ã¢ãŠã§ããã€ã¿ã«ããã®ä»ã®ããã©ãŒãã³ã¹ææšãæç³»åã§è¿œè·¡ããŸããçºçããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ãã察åŠããŸããæ°ããæé©åæè¡ãå©çšå¯èœã«ãªã£ããå®è£ ããŸãã
äŸ: ãããã¯ãããžãŒäŒæ¥ã¯ãã³ãŒãã®ãããã€ããšã«ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããããã©ãŒãã³ã¹ã®äœäžãè¿ éã«ç¹å®ããŠä¿®æ£ããŠããŸãã
ã±ãŒã¹ã¹ã¿ãã£
ããã€ãã®äŒæ¥ããã³ã¢ãŠã§ããã€ã¿ã«ã«çŠç¹ãåœãŠãæé©åæŠç¥ãå®è£ ããããšã§ãããã³ããšã³ãããã©ãŒãã³ã¹ã®æ¹åã«æåããŠããŸãïŒ
- Pinterest: Pinterestã¯ãç»åã®æé©åãšé å»¶èªã¿èŸŒã¿ã®å®è£ ã«ãããLCPã40%ãCLSã15%æ¹åããŸãããããã«ããããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããšã³ã³ããŒãžã§ã³çãå€§å¹ ã«åäžããŸããã
- Tokopedia: ã€ã³ããã·ã¢ã®eã³ããŒã¹ãã©ãããã©ãŒã ã§ããTokopediaã¯ãJavaScriptã³ãŒãã®æé©åãšCDNã®äœ¿çšã«ãããLCPã45%ãFIDã50%æ¹åããŸãããããã«ãããã¢ãã€ã«ã®ã³ã³ããŒãžã§ã³çãå€§å¹ ã«åäžããŸããã
- Yahoo! Japan: Yahoo! Japanã¯ãç»åã®æé©åãšCDNã®äœ¿çšã«ãããLCPã400msæ¹åããŸãããããã«ãããããŒãžãã¥ãŒãšåçãå€§å¹ ã«å¢å ããŸããã
çµè«
ããã³ããšã³ãããã©ãŒãã³ã¹ç£èŠã¯ãè¯å¥œãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããSEOãåäžãããããžãã¹ç®æšãéæããããã«äžå¯æ¬ ã§ããã³ã¢ãŠã§ããã€ã¿ã«ã«çŠç¹ãåœãŠãæé©åæŠç¥ãå®è£ ããããšã§ããŠãŒã¶ãŒãåã°ããçµæãåºããããéãé åçãªãŠã§ããµã€ããäœæã§ããŸããç¶ç¶çãªç£èŠãšæ¹åããé·æã«ããã£ãŠæé©ãªããã©ãŒãã³ã¹ãç¶æããããã®éµã§ããããšãå¿ããªãã§ãã ãããããã©ãŒãã³ã¹ç¬¬äžã®èãæ¹ãåãå ¥ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåªå ããããšã§ã仿¥ã®ç«¶äºã®æ¿ããããžã¿ã«ç°å¢ã§åªäœã«ç«ã€ããšãã§ããŸãã
ãããã®æŠç¥ãäžè²«ããŠé©çšãããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãç£èŠããããšã§ãã³ã¢ãŠã§ããã€ã¿ã«ãå€§å¹ ã«æ¹åããäžçäžã®ãªãŒãã£ãšã³ã¹ã«åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸãã