ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã§æé©ãªWebäœéšãè§£ãæŸã¡ãŸããããã°ããŒãã«ã§é«æ§èœãªWebãµã€ãã®ããã®äž»èŠã¡ããªã¯ã¹ãåæãå®è¡å¯èœãªæŽå¯ãæ¢æ±ããŸãã
ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒïŒå æ¬çãªã¡ããªã¯ã¹ããã·ã¥ããŒã
仿¥ã®è¶ ç«¶äºçãªããžã¿ã«ã©ã³ãã¹ã±ãŒãã«ãããŠãããã³ããšã³ãã®é床ãšå¿çæ§ã¯ãã¯ãåãªããããã°å¬ããããã®ã§ã¯ãªãããŠãŒã¶ãŒæºè¶³åºŠãã³ã³ããŒãžã§ã³çããããŠå šäœçãªããžãã¹æåã®åºæ¬çãªæ±ãšãªã£ãŠããŸããäžçäžã®ãŠãŒã¶ãŒã¯ãã·ãŒã ã¬ã¹ã§è¶ é«éãªã€ã³ã¿ã©ã¯ã·ã§ã³ãæåŸ ããŠããããã以äžã®ãã®ã¯ããã©ã¹ãã¬ãŒã·ã§ã³ãé¢è±ããããŠé倧ãªåçæå€±ã«ã€ãªããå¯èœæ§ããããŸããçã«åªããææãäžããããã«ã¯ãããã©ãŒãã³ã¹åé¡ãžã®èªè以äžã®ãã®ãå¿ èŠã§ããå ç¢ãªããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã«ã«ãã»ã«åããããããã¢ã¯ãã£ãã§ããŒã¿é§ååã®ã¢ãããŒããå¿ èŠã§ãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãããã³ããšã³ãã®å¥å šæ§ãšããã©ãŒãã³ã¹ã®å šäœåãæäŸãã匷åãªã¡ããªã¯ã¹ããã·ã¥ããŒãã®æ§ç¯ãšæŽ»çšã«é¢ãã詳现ã«è¿«ããŸããäžå¯æ¬ ãªã¡ããªã¯ã¹ãããããåéããããã®ããŒã«ããããŠã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«äŸå€çãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããããã«ããããã®ããŒã¿ãè§£éããããã«åºã¥ããŠè¡åããããã®æŠç¥ãæ¢æ±ããŸãã
ããã³ããšã³ã ããã©ãŒãã³ã¹ã®å¿ èŠæ§
ããã·ã¥ããŒãèªäœã«é£ã³èŸŒãåã«ãããã³ããšã³ã ããã©ãŒãã³ã¹ããªãæãéèŠãªã®ããæç¢ºã«ããŸããããé ãããŸãã¯æé©åãããŠããªãWebãµã€ãã¯ã以äžã®ãããªçµæãããããå¯èœæ§ããããŸãã
- ãŠãŒã¶ãŒã®ææ¬²æžéïŒWebãµã€ãã®èªã¿èŸŒã¿ã«æéããããããããšããŠãŒã¶ãŒã¯é¢è±ãããšããç ç©¶çµæãäžè²«ããŠç€ºãããŠããŸããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠããã® impatience ã¯ãç°ãªããããã¯ãŒã¯æ¡ä»¶ãããã€ã¹ã®æ©èœã«ãã£ãŠå¢å¹ ãããŸãã
- ãã©ã³ãè©å€ã®äœäžïŒåå¿ã®é ãWebãµã€ãã¯ãããªãã®ãã©ã³ãã«æªåœ±é¿ãäžãããããã§ãã·ã§ããªãºã ãšé æ ®ã®æ¬ åŠãäŒããŸãã
- ã³ã³ããŒãžã§ã³çã®äœäžïŒããªç§åäœãéèŠã§ããèªã¿èŸŒã¿æéã®é å»¶ã¯ãeã³ããŒã¹ãµã€ãããªãŒããžã§ãã¬ãŒã·ã§ã³ãã©ãŒã ãããã³ããããéèŠãªãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ã®ã³ã³ããŒãžã§ã³çã®äœäžãšçŽæ¥çžé¢ããŠããŸãã
- SEOãžã®æªåœ±é¿ïŒGoogleã®ãããªæ€çŽ¢ãšã³ãžã³ã¯ãã©ã³ãã³ã°ã«ãããŠé«éã§èªã¿èŸŒãŸããWebãµã€ããåªå ããŸããããã©ãŒãã³ã¹ãæªããšããµã€ããæ€çŽ¢çµæã®äžäœã«æŒããããããªãŒã¬ããã¯ãã©ãã£ãã¯ãæžå°ããå¯èœæ§ããããŸãã
- çŽåž°çã®å¢å ïŒæåã®äœéšããã©ã¹ãã¬ãŒã·ã§ã³ã®å€ãã»ã©é ãå ŽåããŠãŒã¶ãŒã¯ããä»¥äžæ¢çŽ¢ããããšããªãå¯èœæ§ãé«ããªããŸãã
ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã¯ããŠãŒã¶ãŒã«åœ±é¿ãäžããåã«ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ã蚺æãããã³è§£æ±ºã§ããäžå€®ã³ãã³ãã»ã³ã¿ãŒãšããŠæ©èœããŸãã
ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã®èšèšïŒäž»èŠã¡ããªã¯ã¹ã«ããŽãª
çã«å æ¬çãªããã·ã¥ããŒãã¯ãåæããŒãããç¶ç¶çãªã€ã³ã¿ã©ã¯ãã£ããã£ãŸã§ãããŸããŸãªåŽé¢ãç¶²çŸ ããããã©ãŒãã³ã¹ã®å€è§çãªãã¥ãŒãæäŸããã¹ãã§ãããããã®ã¡ããªã¯ã¹ã¯ã次ã®äž»èŠãªé åã«å€§å¥ã§ããŸãã
1. ã³ã¢ Web ãã€ã¿ã« (CWV)
Googleã«ãã£ãŠå°å ¥ãããã³ã¢ Web ãã€ã¿ã«ã¯ãèªã¿èŸŒã¿ããã©ãŒãã³ã¹ãã€ã³ã¿ã©ã¯ãã£ããã£ãããã³èŠèŠçå®å®æ§ã«é¢ããå®éã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã枬å®ããããã«èšèšãããã¡ããªã¯ã¹ã®ã»ããã§ãããããã¯SEOã«ãšã£ãŠéèŠã§ãããããããããã©ãŒãã³ã¹ããã·ã¥ããŒãã®åªããåºçºç¹ãšãªããŸãã
- Largest Contentful Paint (LCP)ïŒèªã¿èŸŒã¿ããã©ãŒãã³ã¹ã枬å®ããŸããããã¯ãããŒãžèªã¿èŸŒã¿ã¿ã€ã ã©ã€ã³ã«ãããŠãæå€§ã®ã³ã³ãã³ãèŠçŽ ïŒäŸïŒç»åãããã¹ããããã¯ïŒããã¥ãŒããŒãå ã«è¡šç€ºãããæç¹ãããŒã¯ããŸããè¯å¥œãªLCPã¯2.5ç§ä»¥äžãšèŠãªãããŸãã
- First Input Delay (FID) / Interaction to Next Paint (INP)ïŒã€ã³ã¿ã©ã¯ãã£ããã£ã枬å®ããŸããFIDã¯ããŠãŒã¶ãŒãããŒãžã«æåã«ã€ã³ã¿ã©ã¯ãããïŒäŸïŒãã¿ã³ãã¯ãªãã¯ããïŒæç¹ããããã©ãŠã¶ããã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã«å¿çããŠã€ãã³ããã³ãã©ã®åŠçãéå§ã§ããããã«ãªã£ãæç¹ãŸã§ã®æéãæž¬å®ããŸããINPã¯ãFIDã眮ãæãããããæ°ãããããå æ¬çãªã¡ããªã¯ã¹ã§ããããã¯ããŠãŒã¶ãŒãããŒãžã«å¯ŸããŠè¡ã£ããã¹ãŠã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã®ã¬ã€ãã³ã·ã枬å®ããæãæªããã®ãå ±åããŸããè¯å¥œãªINPã¯200ããªç§ä»¥äžã§ãã
- Cumulative Layout Shift (CLS)ïŒèŠèŠçå®å®æ§ã枬å®ããŸããããã¯ãããŒãžãèªã¿èŸŒãŸããéã«ããŠãŒã¶ãŒãã³ã³ãã³ãã¬ã€ã¢ãŠãã®äºæããªãã·ãããçµéšããé »åºŠãå®éåããŸããè¯å¥œãªCLSã¯0.1以äžã§ãã
å®è¡å¯èœãªæŽå¯ïŒLCPãæ¹åããããã«ãç»åã®æé©åãéèŠåºŠã®äœãJavaScriptã®é å»¶èªã¿èŸŒã¿ãå¹ççãªãµãŒããŒå¿çã®ç¢ºä¿ã«éç¹ã眮ããŸããFID/INPã«ã€ããŠã¯ãé·æéå®è¡ãããJavaScriptã¿ã¹ã¯ãæå°éã«æããã€ãã³ããã³ãã©ãæé©åããŸããCLSã«ã€ããŠã¯ãç»åãšãããªã®å¯žæ³ãæå®ããæ¢åã®ã³ã³ãã³ãã®äžã«åçã«ã³ã³ãã³ããæ¿å ¥ããããšãé¿ãããã©ã³ããã¡ã€ã«ãããªããŒãããŸãã
2. ããŒãž ããŒãæéã¡ããªã¯ã¹
ãããã¯äŒçµ±çã§ãããäŸç¶ãšããŠäžå¯æ¬ ãªã¡ããªã¯ã¹ã§ãããããŒãžã®ãªãœãŒã¹ãã©ãã ãéãååŸããã³ã¬ã³ããªã³ã°ããããã«ã€ããŠã®è©³çްãªçè§£ãæäŸããŸãã
- DNSã«ãã¯ã¢ããæéïŒãã©ãŠã¶ããã¡ã€ã³åãIPã¢ãã¬ã¹ã«è§£æ±ºããã®ã«ãããæéã
- æ¥ç¶æéïŒãµãŒããŒãšã®æ¥ç¶ã確ç«ããã®ã«ãããæéã
- SSLãã³ãã·ã§ã€ã¯æéïŒHTTPSãµã€ãã®å Žåãã»ãã¥ã¢ãªæ¥ç¶ã確ç«ããã®ã«ãããæéã
- Time to First Byte (TTFB)ïŒãã©ãŠã¶ãããŒãžããªã¯ãšã¹ãããŠããããµãŒããŒããæåã®ãã€ãã®æ å ±ãåä¿¡ãããŸã§ã®æéãããã¯ãµãŒããŒå¿çæéã®éèŠãªææšã§ãã
- First Contentful Paint (FCP)ïŒãã©ãŠã¶ãDOMããæåã®ã³ã³ãã³ãããããã¬ã³ããªã³ã°ãããŠãŒã¶ãŒã«å³åº§ã®ãã£ãŒãããã¯ãæäŸããæç¹ã
- DOMContentLoadedïŒåæHTMLããã¥ã¡ã³ããå®å šã«èªã¿èŸŒãŸããè§£æãããæç¹ïŒã¹ã¿ã€ã«ã·ãŒããç»åããµããã¬ãŒã ã®èªã¿èŸŒã¿å®äºãåŸ ããã«ïŒã
- Load EventïŒããŒãžãšãã®ãã¹ãŠã®äŸåãªãœãŒã¹ïŒç»åãã¹ã¯ãªãããã¹ã¿ã€ã«ã·ãŒãïŒãå®å šã«èªã¿èŸŒãŸããæç¹ã
å®è¡å¯èœãªæŽå¯ïŒä¿¡é Œæ§ã®é«ãDNSãããã€ããŒã䜿çšãããã©ãŠã¶ã®DNSãã£ãã·ã¥ã掻çšããŠãDNSã«ãã¯ã¢ããæéãççž®ããŸããHTTP/2ãŸãã¯HTTP/3ã䜿çšãããªãã€ã¬ã¯ããæå°éã«æããŠæ¥ç¶æéãæé©åããŸãããµãŒããŒãµã€ãã³ãŒããããŒã¿ããŒã¹ã¯ãšãªãæé©åãããµãŒããŒãµã€ããã£ãã·ã³ã°ã掻çšããŠTTFBãæ¹åããŸããã¯ãªãã£ã«ã«CSSãåªå ããå¿ é ã§ã¯ãªãJavaScriptãé å»¶ãããç»åèªã¿èŸŒã¿ãæé©åããŠFCPãšDOMContentLoadedãåæžããŸãã
3. ã¬ã³ããªã³ã° ããã©ãŒãã³ã¹ ã¡ããªã¯ã¹
ãããã®ã¡ããªã¯ã¹ã¯ããã©ãŠã¶ãã©ãã ãå¹ççã«ãã¯ã»ã«ãç»é¢ã«ãã€ã³ãããæŽæ°ãåŠçããããäžå¿ã«ããŠããŸãã
- Frames Per Second (FPS)ïŒç¹ã«ã¢ãã¡ãŒã·ã§ã³ãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã«é¢é£ããŠãããäžè²«ããŠé«ãFPSïŒçæ³çã«ã¯60 FPSïŒã¯ã¹ã ãŒãºãªããžã¥ã¢ã«ãä¿èšŒããŸãã
- ã¹ã¯ãªããå®è¡æéïŒJavaScriptã®å®è¡ã«è²»ããããåèšæéãããã¯ã¡ã€ã³ã¹ã¬ããããããã¯ããã¬ã³ããªã³ã°ãé å»¶ãããå¯èœæ§ããããŸãã
- ã¹ã¿ã€ã«åèšç®/ã¬ã€ã¢ãŠãïŒå€æŽåŸã«ãã©ãŠã¶ãã¹ã¿ã€ã«ãåèšç®ããããŒãžã¬ã€ã¢ãŠããåã¬ã³ããªã³ã°ããã®ã«è²»ããããæéã
- ãã€ã³ãæéïŒãã©ãŠã¶ããã¯ã»ã«ãç»é¢ã«ãã€ã³ãããã®ã«ãããæéã
å®è¡å¯èœãªæŽå¯ïŒJavaScriptããããã¡ã€ã«ããŠãé·æéå®è¡ãããã¹ã¯ãªãããç¹å®ããŠæé©åããŸããå¹ççãªCSSã»ã¬ã¯ã¿ã䜿çšããé »ç¹ãªåèšç®ã匷å¶ããé床ã«è€éãªã¹ã¿ã€ãªã³ã°ãé¿ããŸããã¢ãã¡ãŒã·ã§ã³ã«ã€ããŠã¯ãããã¹ã ãŒãºãªããã©ãŒãã³ã¹ã®ããã«CSSã¢ãã¡ãŒã·ã§ã³ãŸãã¯`requestAnimationFrame`ãæŽ»çšããŸããã¬ã€ã¢ãŠãã¹ã©ãã·ã³ã°ãããªã¬ãŒããDOMæäœãæå°éã«æããŸãã
4. ãããã¯ãŒã¯ãšãªãœãŒã¹ ã¡ããªã¯ã¹
ãªãœãŒã¹ãã©ã®ããã«ååŸãããé ä¿¡ãããããçè§£ããããšã¯ãç¹ã«å€æ§ãªã°ããŒãã«ãããã¯ãŒã¯æ¡ä»¶äžã§ã®ããŒãæéãæé©åããããã«äžå¯æ¬ ã§ãã
- ãªã¯ãšã¹ãæ°ïŒããŒãžãèªã¿èŸŒãããã«è¡ãããHTTPãªã¯ãšã¹ãã®åèšæ°ã
- ç·ããŒãžãµã€ãºïŒããŒãžãã¬ã³ããªã³ã°ããããã«å¿ èŠãªãã¹ãŠã®ãªãœãŒã¹ïŒHTMLãCSSãJavaScriptãç»åããã©ã³ãïŒã®åèšãµã€ãºã
- ã¢ã»ãããµã€ãºïŒå èš³ïŒïŒJavaScriptãã¡ã€ã«ãCSSãã¡ã€ã«ãç»åããã©ã³ããªã©ã®äž»èŠã¢ã»ããã®åã ã®ãµã€ãºã
- ãã£ãã·ã¥ãããçïŒãªãªãžã³ãµãŒããŒããååŸããããªãœãŒã¹ã«å¯Ÿããããã©ãŠã¶ãŸãã¯CDNãã£ãã·ã¥ããæäŸããããªãœãŒã¹ã®å²åã
- å§çž®çïŒããã¹ãããŒã¹ã®ã¢ã»ããã«å¯ŸãããµãŒããŒãµã€ãå§çž®ïŒäŸïŒGzipãBrotliïŒã®å¹æã
å®è¡å¯èœãªæŽå¯ïŒCSSãšJavaScriptããã³ãã«ãããCSSã¹ãã©ã€ãã䜿çšããã`link rel=preload`ãè³¢ã䜿çšããŠãªã¯ãšã¹ãæ°ãæžãããŸããç»åãå§çž®ããCSS/JSãæå°åããWebPã®ãããªã¢ãã³ãªç»åãã©ãŒãããã䜿çšããããšã§ãã¢ã»ãããµã€ãºãæé©åããŸããé©åãªãã£ãã·ã¥å¶åŸ¡ããããŒãèšå®ããã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒCDNïŒã掻çšããŠãã£ãã·ã¥ãããçãæ¹åããŸãããµãŒããŒã§å¹ççãªå§çž®ãæå¹ã«ãªã£ãŠããããšã確èªããŸãã
5. ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšãšã³ã²ãŒãžã¡ã³ã ã¡ããªã¯ã¹
å³å¯ã«ã¯ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã§ã¯ãããŸãããããããã¯ããã³ããšã³ãããã©ãŒãã³ã¹ã«çŽæ¥åœ±é¿ãããå æ¬çãªãã¥ãŒã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ããŒãžæ»åšæé/ã»ãã·ã§ã³æéïŒãŠãŒã¶ãŒããµã€ãã«è²»ããæéã
- çŽåž°çïŒãµã€ãã1ããŒãžããèŠãã«é¢è±ãã蚪åè ã®å²åã
- ã³ã³ããŒãžã§ã³çïŒæå®ãããã¢ã¯ã·ã§ã³ãå®äºãã蚪åè ã®å²åã
- ãŠãŒã¶ãŒãã£ãŒãããã¯/ã»ã³ãã¡ã³ãïŒãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«é¢ãããŠãŒã¶ãŒããã®çŽæ¥çãªãã£ãŒãããã¯ã
å®è¡å¯èœãªæŽå¯ïŒãããã®ã¡ããªã¯ã¹ãããã©ãŒãã³ã¹ããŒã¿ãšäœµããŠç£èŠããŸããèªã¿èŸŒã¿æéãšã€ã³ã¿ã©ã¯ãã£ããã£ã®æ¹åã¯ãããè¯ããšã³ã²ãŒãžã¡ã³ããšã³ã³ããŒãžã§ã³çãšçžé¢ããããšããããããŸããããã©ãŒãã³ã¹æé©åããããã®ãŠãŒã¶ãŒäžå¿ã®ã¡ããªã¯ã¹ã«äžãã圱é¿ãæ€èšŒããããã«A/Bãã¹ãã䜿çšããŸãã
ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã®æ§ç¯ïŒãã¬ãŒã³ããŒã·ã§ã³ãšåæ
ããŒã¿ã®åéã¯æåã®ã¹ãããã«ãããŸãããããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã®çã®åã¯ãããŒã¿ã®æç€ºæ¹æ³ãšè§£éæ¹æ³ã«ãããŸãã
1. ããã·ã¥ããŒãèšèšã®åå
- æç¢ºãªå¯èŠåïŒããŒã¿ãç°¡åã«çè§£ã§ããããã«ããã£ãŒããã°ã©ããããŒããããã䜿çšããŸããæç³»åãã£ãŒãã¯ãããã©ãŒãã³ã¹ã®åŸåã远跡ããã®ã«åªããŠããŸãã
- äž»èŠã¡ããªã¯ã¹ã®çŠç¹ïŒã³ã¢ Web ãã€ã¿ã«ããã³ãã®ä»ã®éèŠãªããã©ãŒãã³ã¹ææšãæäžäœã«åªå ããŸãã
- ã»ã°ã¡ã³ããŒã·ã§ã³ïŒãŠãŒã¶ãŒãå°çãããã€ã¹ããã©ãŠã¶ãããã³æéã§ããŒã¿ãã»ã°ã¡ã³ãåããŠãç¹å®ã®åé¡é åãç¹å®ã§ããããã«ããŸãã
- ãã¬ã³ãåæïŒæé©åã®åœ±é¿ã远跡ãããªã°ã¬ãã·ã§ã³ãç¹å®ããããã«ãããã©ãŒãã³ã¹ãæéãšãšãã«è¡šç€ºããŸãã
- ãªã¢ã« vs. åæïŒåæãã¹ãçµæãšãªã¢ã«ãŠãŒã¶ãŒã¢ãã¿ãªã³ã°ããŒã¿ã®éããæç¢ºã«åºå¥ããŸãã
- ã¢ã©ãŒãïŒäž»èŠã¡ããªã¯ã¹ã蚱容ãããå€ãäžåã£ãå Žåã«èªåã¢ã©ãŒããèšå®ããŸãã
2. ããŒã¿ã®è§£é
æ°åã®æå³ãçè§£ããããšãéèŠã§ãã
- ããŒã¹ã©ã€ã³ã®ç¢ºç«ïŒç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ãšã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã«ãšã£ãŠãè¯ããããã©ãŒãã³ã¹ãã©ã®ãããªãã®ããç¥ããŸãã
- ããã«ããã¯ã®ç¹å®ïŒäžè²«ããŠæªãã¡ããªã¯ã¹ããŸãã¯é«ãã°ãã€ããããã¡ããªã¯ã¹ãæ¢ããŸããããšãã°ãé«ãTTFBã¯ãµãŒããŒãµã€ãã®åé¡ã瀺ããŠããå¯èœæ§ããããé«ãFID/INPã¯éãJavaScriptå®è¡ã瀺ããŠããå¯èœæ§ããããŸãã
- ã¡ããªã¯ã¹ã®çžé¢ïŒããŸããŸãªã¡ããªã¯ã¹ãäºãã«ã©ã®ããã«åœ±é¿ããããçè§£ããŸããããšãã°ã倧ããªJavaScriptãã€ããŒãã¯ãFCPãšFID/INPãå¢å ãããå¯èœæ§ãé«ãã§ãã
- 广çãªã»ã°ã¡ã³ããŒã·ã§ã³ïŒå¹³åå€ã¯èª€è§£ãæãå¯èœæ§ããããŸããã°ããŒãã«ã«é«éãªWebãµã€ãã§ããç¹å®ã®å°åã§ã€ã³ã¿ãŒãããã€ã³ãã©ã貧匱ãªãŠãŒã¶ãŒã«ãšã£ãŠã¯éåžžã«é ãå¯èœæ§ããããŸãã
3. å®è¡å¯èœãªæŽå¯ãšæé©åæŠç¥
ããã·ã¥ããŒãã¯è¡åãä¿é²ããã¯ãã§ããäžè¬çãªæé©åæŠç¥ã次ã«ç€ºããŸãã
a) ç»åæé©å
- ã¢ãã³ãªãã©ãŒãããïŒããå°ããªãã¡ã€ã«ãµã€ãºãšåªããå§çž®ã®ããã«WebPãŸãã¯AVIFã䜿çšããŸãã
- ã¬ã¹ãã³ã·ãç»åïŒ`srcset`ããã³`sizes`屿§ã䜿çšããŠãããŸããŸãªãã¥ãŒããŒããµã€ãºã«é©ãããµã€ãºã®ç»åãæäŸããŸãã
- é å»¶èªã¿èŸŒã¿ïŒ`loading='lazy'`ã䜿çšããŠããªãã¹ã¯ãªãŒã³ã®ç»åãå¿ èŠã«ãªããŸã§èªã¿èŸŒã¿ãé å»¶ãããŸãã
- å§çž®ïŒå質ã®äœäžãã»ãšãã©äŒŽããã«ãç»åãé©åã«å§çž®ããŸãã
b) JavaScriptæé©å
- ã³ãŒãåå²ïŒå€§ããªJavaScriptãã³ãã«ãããªã³ããã³ãã§èªã¿èŸŒããå°ããªãã£ã³ã¯ã«åå²ããŸãã
- Defer/AsyncïŒã¹ã¯ãªããã¿ã°ã«`defer`ãŸãã¯`async`屿§ã䜿çšããŠãJavaScriptãHTMLè§£æããããã¯ããªãããã«ããŸãã
- ããªãŒã·ã§ã€ãã³ã°ïŒJavaScriptãã³ãã«ããæªäœ¿çšã®ã³ãŒããåé€ããŸãã
- ãµãŒãããŒãã£ã¹ã¯ãªããã®æå°åïŒãã¹ãŠã®ãµãŒãããŒãã£ã¹ã¯ãªããïŒäŸïŒåæãåºåããŠã£ãžã§ããïŒã®å¿ èŠæ§ãšããã©ãŒãã³ã¹ãžã®åœ±é¿ãè©äŸ¡ããŸãã
- ã€ãã³ããã³ãã©ã®æé©åïŒéå°ãªé¢æ°åŒã³åºããé¿ããããã«ãã€ãã³ããªã¹ããŒããããŠã³ã¹ããã³ã¹ãããã«ããŸãã
c) CSSæé©å
- ã¯ãªãã£ã«ã«CSSïŒFCPãæ¹åããããã«ãAbove-the-foldã³ã³ãã³ãã«å¿ èŠãªã¯ãªãã£ã«ã«CSSãã€ã³ã©ã€ã³åããŸãã
- æå°åïŒCSSãã¡ã€ã«ããäžèŠãªæåãåé€ããŸãã
- æªäœ¿çšCSSã®åé€ïŒããŒã«ã¯ã䜿çšãããŠããªãCSSã«ãŒã«ãç¹å®ããŠåé€ããã®ã«åœ¹ç«ã¡ãŸãã
d) ãã£ãã·ã¥æŠç¥
- ãã©ãŠã¶ãã£ãã·ã¥ïŒéçã¢ã»ããã«é©åãª`Cache-Control`ããããŒãèšå®ããŸãã
- CDNãã£ãã·ã¥ïŒã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒCDNïŒã掻çšããŠããŠãŒã¶ãŒã«ããè¿ããšããžãã±ãŒã·ã§ã³ããã¢ã»ãããæäŸããŸãã
- ãµãŒããŒãµã€ããã£ãã·ã¥ïŒããŒã¿ããŒã¹ã®è² è·ã軜æžããå¿çæéãççž®ããããã«ããµãŒããŒïŒäŸïŒVarnishãRedisïŒã«ãã£ãã·ã¥ã¡ã«ããºã ãå®è£ ããŸãã
e) ãµãŒããŒãšãããã¯ãŒã¯ã®æé©å
- HTTP/2ãŸãã¯HTTP/3ïŒå€éåãšããããŒå§çž®ã®ããã«ããããã®æ°ãããããã³ã«ãå©çšããŸãã
- Gzip/Brotliå§çž®ïŒããã¹ãããŒã¹ã®ã¢ã»ãããå§çž®ãããŠããããšã確èªããŸãã
- ãµãŒããŒå¿çæéïŒTTFBïŒã®åæžïŒããã¯ãšã³ãã³ãŒããããŒã¿ããŒã¹ã¯ãšãªããµãŒããŒæ§æãæé©åããŸãã
- DNSããªãã§ããïŒ``ã䜿çšããŠããã¡ã€ã³åãããã¯ã°ã©ãŠã³ãã§è§£æ±ºããŸãã
f) ãã©ã³ãæé©å
- ã¢ãã³ãªãã©ãŒãããïŒæé©ãªå§çž®ã®ããã«WOFF2ã䜿çšããŸãã
- ã¯ãªãã£ã«ã«ãã©ã³ãã®ããªããŒãïŒAbove-the-foldã³ã³ãã³ãã«å¿ èŠãªãã©ã³ãã«``ã䜿çšããŸãã
- ãã©ã³ããµãã»ããã£ã³ã°ïŒç¹å®ã®èšèªãšã³ã³ãã³ãã«å¿ èŠãªæåã®ã¿ãå«ããŸãã
ãªãã¶ãŒãããªãŒã®ã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãŒãã£ãšã³ã¹ã®ããã«ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒãæ§ç¯ããã³å©çšããéã¯ããããã®èŠå ã念é ã«çœ®ããŠãã ããã
- 倿§ãªãããã¯ãŒã¯æ¡ä»¶ïŒããŸããŸãªåœã®ãŠãŒã¶ãŒã¯ãããŸããŸãªã€ã³ã¿ãŒãããé床ãšä¿¡é Œæ§ãçµéšããŸããããã§ãRUMããŒã¿ãéèŠã§ãã
- ããã€ã¹ã®æçåïŒå€ãã®å°åã§ã¯ãã¢ãã€ã«ããã€ã¹ãäœã¹ããã¯ã®ããŒããŠã§ã¢ãå€ããã©ãŠã¶ãäžè¬çã§ãããããã®ã·ããªãªããã¹ãããæé©åããŸãã
- ã³ã³ãã³ãã®ããŒã«ã©ã€ãºïŒãµã€ããããŒã«ã©ã€ãºãããã³ã³ãã³ãïŒäŸïŒç°ãªãèšèªãé貚ïŒãæäŸããŠããå Žåããããã®ç¹å®ã®ããŒãžã§ã³ãããã©ãŒãã³ã¹ãè¯å¥œã§ããããšã確èªããŠãã ããã
- CDNæŠç¥ïŒé©åã«èšå®ãããCDNã¯ãäžçäžã®ã¢ã»ãããè¿ éã«é ä¿¡ããããã«äžå¯æ¬ ã§ããã¿ãŒã²ããå°åã§åŒ·åãªãã¬ãŒã³ã¹ãæã€CDNãéžæããŠãã ããã
- ã¿ã€ã ãŸãŒã³ã®éãïŒããŒã¿ãåæããéã¯ãã¿ã€ã ãŸãŒã³ã«æ³šæãæããããŒã¯äœ¿çšæéãšãããã®æéäžã®æœåšçãªããã©ãŒãã³ã¹ãžã®åœ±é¿ãçè§£ããŠãã ããã
- ã¢ã¯ã»ã·ããªãã£æšæºïŒçŽæ¥çãªããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã§ã¯ãããŸãããããµã€ããã¢ã¯ã»ã·ãã«ã§ããããšãä¿èšŒããããšã¯ããã°ãã°ã¯ãªãŒã³ãªã³ãŒããšå¹ççãªãªãœãŒã¹èªã¿èŸŒã¿ã䌎ãã鿥çã«ããã©ãŒãã³ã¹ã«å©çããããããŸãã
ããã©ãŒãã³ã¹æåã®ç¢ºç«
ããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã¯åãªãããŒã«ã§ã¯ãªããçµç¹å ã§ããã©ãŒãã³ã¹äžå¿ã®æåãè²ãè§Šåªã§ããéçºãQAãããã³è£œåããŒã éã®ã³ã©ãã¬ãŒã·ã§ã³ã奚å±ããŸããåæèšèšãšã¢ãŒããã¯ãã£ããç¶ç¶çãªã¡ã³ããã³ã¹ãšæ©èœãªãªãŒã¹ãŸã§ãéçºã©ã€ããµã€ã¯ã«ã®å šäœãéããŠããã©ãŒãã³ã¹ãäž»èŠãªèæ ®äºé ã«ããŸãã
ããã·ã¥ããŒãã宿çã«ã¬ãã¥ãŒããããŒã ããŒãã£ã³ã°ã§ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã«ã€ããŠè°è«ããããã©ãŒãã³ã¹ã®åå©ãç¥ããŸããããããã³ããšã³ã ããã©ãŒãã³ã¹ãåªå ããããšã«ãããããåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ããã匷åãªãã©ã³ããã€ã€ã«ãã£ããããŠæçµçã«ã¯ã°ããŒãã«ãªãŒãã£ãšã³ã¹ã®ããã®ããæåãããªã³ã©ã€ã³ãã¬ãŒã³ã¹ã«æè³ããããšã«ãªããŸãã
çµè«
å æ¬çãªããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒã¯ãã°ããŒãã«ããžã¿ã«ã¢ãªãŒãã§åªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããšãç®æãããããçµç¹ã«ãšã£ãŠäžå¯æ¬ ãªè³ç£ã§ããã³ã¢ Web ãã€ã¿ã«ãããŒãž ããŒãæéãã¬ã³ããªã³ã°ãããã³ãããã¯ãŒã¯ ãªãœãŒã¹ã«ãããäž»èŠã¡ããªã¯ã¹ãå€åã«è¿œè·¡ããå ç¢ãªç£èŠããŒã«ã®ã¹ã€ãŒããæŽ»çšããããšã«ãããããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããŠè§£æ±ºããããã«å¿ èŠãªæŽå¯ãåŸãããšãã§ããŸãã
ç»åãšJavaScriptã®æé©åããé«åºŠãªãã£ãã·ã³ã°ãšãããã¯ãŒã¯ã®æ¹åãŸã§ãæŠèª¬ãããå®è¡å¯èœãªæŠç¥ã¯ãããã³ããšã³ãã埮調æŽããããšãå¯èœã«ããŸããåžžã«ã°ããŒãã«ãŠãŒã¶ãŒããŒã¹ã®å€æ§ãªããŒãºãšæ¡ä»¶ãèæ ®ããããšãå¿ããªãã§ãã ãããããã©ãŒãã³ã¹ç£èŠãšæé©åãéçºDNAã«åã蟌ãããšã«ãããããéããããé åçã§ãããæåããWebãã¬ãŒã³ã¹ãäžçäžã§å±éããããã®éãéãããšã«ãªããŸãã
仿¥ããããã³ããšã³ã ããã©ãŒãã³ã¹ ãªãã¶ãŒãããªãŒãæ§ç¯ããWebãµã€ãã®å¯èœæ§ãæå€§éã«åŒãåºããŸãããïŒ