CSSããªãã§ãããæŽ»çšããŠããŠã§ããµã€ãã®èªã¿èŸŒã¿é床ãå€§å¹ ã«åäžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšSEOããã©ãŒãã³ã¹ãåäžãããæ¹æ³ãåŠã³ãŸãããããªãœãŒã¹ã®ããªãã§ããã广çã«å®è£ ããŸãã
ããé«éãªãŠã§ããµã€ããå®çŸïŒCSSããªãã§ããã®å æ¬çãªã¬ã€ã
ãŠã§ãéçºã®äžçã§ã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãæãéèŠã§ããèªã¿èŸŒã¿ã®é ããŠã§ããµã€ãã¯ããŠãŒã¶ãŒã®ãã©ã¹ãã¬ãŒã·ã§ã³ãã«ãŒãæŸæ£ããããŠæçµçã«ã¯ããžãã¹ãžã®ãã€ãã¹ã®åœ±é¿ã«ã€ãªããå¯èœæ§ããããŸãããã®åé¡ã解決ããããã®åŒ·åãªãã¯ããã¯ã®1ã€ãCSSããªãã§ããã§ãããã®ã¬ã€ãã§ã¯ãCSSããªãã§ããã®å æ¬çãªæŠèŠãæäŸãããã®å©ç¹ãå®è£ æŠç¥ãããã³ãŠã§ããµã€ãã®èªã¿èŸŒã¿é床ãæé©åãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®ãã¹ããã©ã¯ãã£ã¹ãæ¢ããŸãã
CSSããªãã§ãããšã¯ïŒ
CSSããªãã§ããã¯ããŠãŒã¶ãŒãçŸåšã®ããŒãžãé²èЧããŠããéã«ããã©ãŠã¶ã«CSSãã¡ã€ã«ïŒãŸãã¯JavaScriptãç»åããã©ã³ããªã©ã®ä»ã®ãªãœãŒã¹ïŒãããã¯ã°ã©ãŠã³ãã§ããŠã³ããŒãããããã«æç€ºãããã©ãŠã¶ãã³ãã§ããããã¯ããŠãŒã¶ãŒããã®CSSãã¡ã€ã«ãå¿ èŠãšããããŒãžã«ç§»åãããšãã«ããã§ã«ãã©ãŠã¶ã®ãã£ãã·ã¥ã§å©çšå¯èœã§ãããèªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ãããããšãæå³ããŸãã
ãã®ããã«èããŠã¿ãŠãã ããïŒã²ã¹ããæåŸ ããŠãããšããŸããã²ã¹ãã®å°çãåŸ ã£ãŠããã圌ãã®ãæ°ã«å ¥ãã®é£²ã¿ç©ãäœãå§ããã®ã§ã¯ãªããå°çãäºæž¬ããäºåã«é£²ã¿ç©ãçšæããŸãã圌ããå°çãããšã飲ã¿ç©ã¯æºåå®äºããŠãããåŸ ã€å¿ èŠã¯ãããŸãããCSSããªãã§ãããåæ§ã«æ©èœããŸããå¿ èŠãªãªãœãŒã¹ãäºæž¬ããäºåã«ååŸããŸãã
ãªãCSSããªãã§ããã䜿çšããã®ãïŒ
CSSããªãã§ãããå®è£ ãããšã次ã®ãããªå€ãã®å©ç¹ããããŸãã
- èªã¿èŸŒã¿é床ã®åäžïŒäž»ãªå©ç¹ã¯ãç¹ã«ããªãã§ãããããCSSã«äŸåãããã®åŸã®ããŒãžãã¥ãŒã§ãããŒãžã®èªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ãããããšã§ãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒèªã¿èŸŒã¿é床ãéããªããšãããã¹ã ãŒãºã§æ¥œãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«çŽæ¥ã€ãªãããŸãããŠã§ããµã€ããå¿çæ§ãé«ããé«éã§ããã°ããŠãŒã¶ãŒã¯ãŠã§ããµã€ãã«é·ãé¢äžããå¯èœæ§ãé«ããªããŸãã
- ããåªããSEOããã©ãŒãã³ã¹ïŒGoogleãªã©ã®æ€çŽ¢ãšã³ãžã³ã¯ãããŒãžé床ãã©ã³ãã³ã°èŠå ãšããŠèæ ®ããŠããŸããCSSããªãã§ããã§ãŠã§ããµã€ãã®èªã¿èŸŒã¿é床ãæé©åããããšã§ãæ€çŽ¢ãšã³ãžã³ã®ã©ã³ãã³ã°ãåäžãããããšãã§ããŸãã
- ãµãŒããŒè² è·ã®åæžïŒãªãœãŒã¹ãããŒã«ã«ã«ãã£ãã·ã¥ããããšã§ãCSSããªãã§ããã¯ãµãŒããŒãžã®ãªã¯ãšã¹ãæ°ãæžããããšãã§ãããµãŒããŒè² è·ã軜æžãããŠã§ããµã€ãå šäœã®ããã©ãŒãã³ã¹ãåäžãããŸãã
- ãªãã©ã€ã³ã¢ã¯ã»ã¹ïŒService Workerã䜿çšïŒïŒããªãã§ããããããªãœãŒã¹ã¯ãService Workerãšé£æºããŠãããåªãããªãã©ã€ã³ãšã¯ã¹ããªãšã³ã¹ã«è²¢ç®ãããŠãŒã¶ãŒãå®å®ããã€ã³ã¿ãŒãããæ¥ç¶ããªãå Žåã§ãã³ã³ãã³ãã«ã¢ã¯ã»ã¹ã§ããããã«ããããšãã§ããŸãã
CSSããªãã§ããã®å®è£ æ¹æ³
CSSããªãã§ãããå®è£ ããæ¹æ³ã¯ããã€ããããããããã«ç¬èªã®å©ç¹ã𿬠ç¹ããããŸããæãäžè¬çãªæ¹æ³ãèŠãŠã¿ãŸãããã
1. <link>ã¿ã°ã䜿çšãã
æãç°¡åã§åºããµããŒããããŠããæ¹æ³ã¯ãHTMLããã¥ã¡ã³ãã®<head>ã»ã¯ã·ã§ã³ã§rel="prefetch"屿§ãæã€<link>ã¿ã°ã䜿çšããããšã§ãã
äŸïŒ
<head>
<link rel="prefetch" href="/styles/main.css" as="style">
</head>
説æïŒ
rel="prefetch"ïŒãã©ãŠã¶ã«ãªãœãŒã¹ãããªãã§ããããããã«æå®ããŸããhref="/styles/main.css"ïŒããªãã§ããããCSSãã¡ã€ã«ã®URLãæå®ããŸãããã®ãã¹ãHTMLãã¡ã€ã«ã«å¯ŸããŠæ£ãããã絶察URLã䜿çšããŠããããšã確èªããŠãã ãããas="style"ïŒïŒéèŠïŒïŒãã®å±æ§ã¯ãããªãã§ãããããŠãããªãœãŒã¹ã®ã¿ã€ãããã©ãŠã¶ã«äŒããŸãã`as="style"`ã䜿çšããããšã¯ããã©ãŠã¶ããªãœãŒã¹ãæ£ããåªå é äœä»ãããåŠçããããã«äžå¯æ¬ ã§ããä»ã®å¯èœãªå€ã«ã¯ã`script`ã`image`ã`font`ã`document`ãªã©ããããŸãã
ãã¹ããã©ã¯ãã£ã¹ïŒ
- HTMLããã¥ã¡ã³ãã®
<head>ã»ã¯ã·ã§ã³å ã«<link>ã¿ã°ãé 眮ããŸãã as屿§ã䜿çšããŠããªãœãŒã¹ã¿ã€ããæå®ããŸããhref屿§ã®URLãæ£ããããšã確èªããŸãã
2. HTTPãªã³ã¯ããããŒã䜿çšãã
å¥ã®æ¹æ³ã¯ããµãŒããŒã®å¿çã§Link HTTPããããŒã䜿çšããããšã§ããããã¯ããµãŒããŒåŽã®ããžãã¯ã«åºã¥ããŠãªãœãŒã¹ãåçã«ããªãã§ããããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒApache .htaccessïŒïŒ
<FilesMatch "\.(html|php)$">
<IfModule mod_headers.c>
Header add Link '</styles/main.css>; rel=prefetch; as=style'
</IfModule>
</FilesMatch>
äŸïŒNode.js with ExpressïŒïŒ
app.get('/', (req, res) => {
res.setHeader('Link', '</styles/main.css>; rel=prefetch; as=style');
res.sendFile(path.join(__dirname, 'index.html'));
});
説æïŒ
LinkããããŒã¯ããã©ãŠã¶ã«æå®ããããªãœãŒã¹ãããªãã§ããããããã«æç€ºããŸãã- æ§æã¯
<link>ã¿ã°ãšäŒŒãŠããŸãïŒ<URL>; rel=prefetch; as=styleã
å©ç¹ïŒ
- ãµãŒããŒåŽã®ããžãã¯ã«åºã¥ãåçããªãã§ããã
- ããã¯ãªãŒã³ãªHTMLã³ãŒãã
æ¬ ç¹ïŒ
- ãµãŒããŒåŽã®æ§æãå¿ èŠã§ãã
3. JavaScriptïŒããŸãäžè¬çã§ã¯ãããŸãããæ³šæããŠäœ¿çšããŠãã ããïŒ
åºæ¬çãªCSSããªãã§ããã«ã¯ããŸãäžè¬çã§ã¯ãªããéåžžã¯æšå¥šãããŸããããJavaScriptã䜿çšããŠã<head>ã«<link>ã¿ã°ãåçã«äœæããŠè¿œå ããããšãã§ããŸããããã«ãããæå€§ã®æè»æ§ãæäŸãããŸãããè€éããšæœåšçãªããã©ãŒãã³ã¹ãªãŒããŒããããçºçããŸãã
äŸïŒ
function prefetchCSS(url) {
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = url;
link.as = 'style';
document.head.appendChild(link);
}
prefetchCSS('/styles/main.css');
ïŒå¿ èŠãªå Žåãé€ãïŒé¿ããçç±ïŒ
- JavaScriptã®å®è¡ãªãŒããŒãããã
- ç¹ã«åæããŒãžããŒãäžã«ãã¡ã€ã³ã¹ã¬ããããããã¯ããå¯èœæ§ã
- å®è£ ãšä¿å®ãããè€éã§ãã
ããªãã§ããã«JavaScriptã䜿çšããå ŽåïŒ
- ãŠãŒã¶ãŒã®è¡åãããã€ã¹ã®ç¹æ§ã«åºã¥ãæ¡ä»¶ä»ãããªãã§ããã
- AJAXãéããŠåçã«çæãŸãã¯ããŒãããããªãœãŒã¹ã®ããªãã§ããã
CSSããªãã§ããã®ãã¹ããã©ã¯ãã£ã¹
CSSããªãã§ããã®å©ç¹ãæå€§éã«æŽ»çšããã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããã
- éèŠãªãªãœãŒã¹ãåªå ïŒãŠã§ããµã€ãã®åæã¬ã³ããªã³ã°ã«äžå¯æ¬ ãªCSSãã¡ã€ã«ã®ããªãã§ããã«çŠç¹ãåœãŠãŸããAbove-the-foldã³ã³ãã³ãã«å¿ èŠãªã¹ã¿ã€ã«ãã€ã³ã©ã€ã³åããæ®ãã®ã¹ã¿ã€ã«ãããªãã§ããããã«ã¯ãCritical CSSãªã©ã®ãã¯ããã¯ãæ€èšããŠãã ããã
as屿§ã䜿çšããïŒåžžã«as屿§ãæå®ããŠããã©ãŠã¶ã«ãªãœãŒã¹ã¿ã€ããäŒããŸããããã«ããããã©ãŠã¶ã¯ãªãœãŒã¹ãæ£ããåªå é äœä»ãããåŠçããã®ã«åœ¹ç«ã¡ãŸãã- ãããã¯ãŒã¯ããã©ãŒãã³ã¹ãç£èŠããïŒãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠããããã¯ãŒã¯ãªã¯ãšã¹ããç£èŠããããªãã§ããããããªãœãŒã¹ãæ£ããå¹ççã«ããŒããããŠããããšã確èªããŸãããããã¯ãŒã¯ããã«ã®ãåªå é äœãåã«æ³šæããŠãã ãããããªãã§ããããããªãœãŒã¹ã¯ãæåã¯äœãåªå é äœã§ããå¿ èŠããããŸãã
- ãã£ãã·ã¥æŠç¥ãå®è£ ããïŒãã©ãŠã¶ãã£ãã·ã¥ïŒãã£ãã·ã¥ããããŒã䜿çšïŒã掻çšããŠãããªãã§ããããããªãœãŒã¹ããã®åŸã®èšªåã®ããã«ãã©ãŠã¶ã®ãã£ãã·ã¥ã«ä¿åãããŠããããšã確èªããŸãã
- ãŠãŒã¶ãŒã®è¡åãèæ ®ããïŒãŠãŒã¶ãŒã®è¡åãåæããŠãæãé »ç¹ã«ã¢ã¯ã»ã¹ãããããŒãžãšãªãœãŒã¹ãç¹å®ããŸãããããã®ãªãœãŒã¹ãããªãã§ããããŠããªããŒã¿ãŒã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããŸãã
- éå°ãªããªãã§ãããé¿ããïŒéå°ãªãªãœãŒã¹ãããªãã§ãããããšã垯åå¹ ãæ¶è²»ãããããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸããè¿ãå°æ¥ã«å¿ èŠãšãªãå¯èœæ§ã®ãããªãœãŒã¹ã®ã¿ãããªãã§ããããããšã«çŠç¹ãåœãŠãŸãã
- ããŸããŸãªãã©ãŠã¶ãšããã€ã¹ã§ãã¹ãããïŒCSSããªãã§ããã®å®è£ ããããŸããŸãªãã©ãŠã¶ïŒChromeãFirefoxãSafariãEdgeïŒããã³ããã€ã¹ïŒãã¹ã¯ããããã¢ãã€ã«ãã¿ãã¬ããïŒã§æ£ããæ©èœããŠããããšã確èªããŸãã
- ä»ã®æé©åãã¯ããã¯ãšçµã¿åãããïŒCSSããªãã§ããã¯ãã³ãŒãã®çž®å°ãç»åã®æé©åãé å»¶èªã¿èŸŒã¿ãªã©ã®ä»ã®ãŠã§ããµã€ãæé©åãã¯ããã¯ãšçµã¿åããããšæã广çã§ãã
äžè¬çãªèœãšã穎ãšãã®åé¿æ¹æ³
CSSããªãã§ããã¯åŒ·åãªããŒã«ã§ãããæœåšçãªèœãšã穎ãšãã®åé¿æ¹æ³ãèªèããããšãéèŠã§ãã
- ééã£ãURLïŒ
href屿§ã®URLãæ£ããããšã確èªããããã«ãå確èªããŠãã ãããã¿ã€ããã¹ãééã£ããã¹ã¯ããã©ãŠã¶ããªãœãŒã¹ãååŸããã®ã劚ããå¯èœæ§ããããŸãã as屿§ã®æ¬ èœïŒas屿§ãå«ããã®ãå¿ãããšããã©ãŠã¶ããªãœãŒã¹ã¿ã€ãã誀ã£ãŠè§£éãã誀ã£ãŠåŠçããå¯èœæ§ããããŸãã- éå°ãªããªãã§ããïŒåè¿°ã®ããã«ãéå°ãªãªãœãŒã¹ãããªãã§ãããããšã垯åå¹ ãæ¶è²»ãããããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸããåæããŒã¿ãšãŠãŒã¶ãŒã®è¡åã䜿çšããŠãããªãã§ããæŠç¥ãã¬ã€ãããŸãã
- ãã£ãã·ã¥ç¡å¹åã®åé¡ïŒCSSãã¡ã€ã«ãæŽæ°ããå Žåã¯ããã©ãŠã¶ã«æŽæ°ããããã¡ã€ã«ãããŠã³ããŒããããããã«ãé©åãªãã£ãã·ã¥ç¡å¹åæŠç¥ïŒããšãã°ãããŒãžã§ã³çªå·ãŸãã¯ãã£ãã·ã¥ãã¹ã¿ãŒãã¯ããã¯ã®äœ¿çšïŒãæŽã£ãŠããããšã確èªããŸãã
- ã¢ãã€ã«ãŠãŒã¶ãŒã®ç¡èŠïŒåž¯åå¹ ãšããŒã¿ãã©ã³ãéãããŠããã¢ãã€ã«ãŠãŒã¶ãŒã«æ³šæããŠãã ãããã¢ãã€ã«ããã€ã¹ã§äžå¿ èŠã«å€§ããªãªãœãŒã¹ãããªãã§ããããããšã¯é¿ããŠãã ãããããã€ã¹ã®ç¹æ§ã«åºã¥ããŠç°ãªããªãœãŒã¹ãæäŸããé©å¿åèªã¿èŸŒã¿ãã¯ããã¯ãæ€èšããŠãã ããã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
äžçŽãŠãŒã¶ãŒåãã«ãããã€ãã®è¿œå ã®ãã¯ããã¯ãšèæ ®äºé ã以äžã«ç€ºããŸãã
1. ãªãœãŒã¹ãã³ãïŒpreload vs. prefetch
preloadãšprefetchã®éããçè§£ããããšãéèŠã§ãã
preloadïŒçŸåšã®ããŒãžã«äžå¯æ¬ ãªãªãœãŒã¹ãããŠã³ããŒãããããã«ãã©ãŠã¶ã«æç€ºããŸãããã©ãŠã¶ã¯ãä»ã®ãªãœãŒã¹ãããããªããŒããªã¯ãšã¹ããåªå ããŸããããŒãžã®åæã¬ã³ããªã³ã°ã«ããã«å¿ èŠãªãªãœãŒã¹ïŒããšãã°ããã©ã³ããéèŠãªCSSïŒã«ã¯preloadã䜿çšããŸããprefetchïŒä»åŸã®ããã²ãŒã·ã§ã³ã«å¿ èŠãªå¯èœæ§ã®ãããªãœãŒã¹ãããŠã³ããŒãããããã«ãã©ãŠã¶ã«æç€ºããŸãããã©ãŠã¶ã¯ãä»ã®ãªãœãŒã¹ãæåã«ããŒãã§ããããã«ãããäœãåªå é äœã§ããªãã§ãããªã¯ãšã¹ããããŠã³ããŒãããŸãããã®åŸã®ããŒãžãŸãã¯ã€ã³ã¿ã©ã¯ã·ã§ã³ã«å¿ èŠãªãªãœãŒã¹ã«ã¯prefetchã䜿çšããŸãã
äŸïŒããªããŒãïŒïŒ
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
2. DNSããªãã§ãã
DNSããªãã§ããã䜿çšãããšããã©ãŠã¶ã¯ããã¯ã°ã©ãŠã³ãã§ãã¡ã€ã³åã解決ã§ãããããDNSã«ãã¯ã¢ããã«é¢é£ããã¬ã€ãã³ã·ãåæžãããŸããããã¯ãè€æ°ã®ãã¡ã€ã³ïŒããšãã°ãCDNããµãŒãããŒãã£APIïŒã®ãªãœãŒã¹ã«äŸåãããŠã§ããµã€ãã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒ
<link rel="dns-prefetch" href="//example.com">
ãã®ã¿ã°ãHTMLããã¥ã¡ã³ãã®<head>ã»ã¯ã·ã§ã³ã«é
眮ããŸãã`example.com`ãããªãã§ãããããã¡ã€ã³ã«çœ®ãæããŸãã
3. Preconnect
Preconnectã䜿çšãããšããã©ãŠã¶ã¯äºåã«ãµãŒããŒãžã®æ¥ç¶ã確ç«ã§ããããããªãœãŒã¹ãå®éã«å¿ èŠã«ãªã£ããšãã«ãªã¯ãšã¹ããéå§ããã®ã«ãããæéãççž®ãããŸããããã¯ãå®å šãªæ¥ç¶ïŒHTTPSïŒãå¿ èŠãšãããªãœãŒã¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒ
<link rel="preconnect" href="https://example.com">
Preconnectã¯ãDNSããªãã§ãããšçµã¿åãããŠãããã«ããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://example.com" crossorigin>
4. CDNïŒã³ã³ãã³ãé ä¿¡ãããã¯ãŒã¯ïŒ
CDNã䜿çšãããšãCSSãã¡ã€ã«ããã®ä»ã®ãªãœãŒã¹ãäžçäžã®è€æ°ã®ãµãŒããŒã«åæ£ãããããšã§ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸããããã«ãããããŒã¿ã®ç§»åè·é¢ãççž®ãããããŸããŸãªå°ççå°åã®ãŠãŒã¶ãŒã®èªã¿èŸŒã¿æéãççž®ãããŸãã
5. HTTP/2ããã³HTTP/3
HTTP/2ããã³HTTP/3ã¯ãHTTP/1.1ãããããã€ãã®ããã©ãŒãã³ã¹åäžãæäŸããHTTPãããã³ã«ã®æ°ããããŒãžã§ã³ã§ãããå€éåïŒåäžã®æ¥ç¶ãä»ããŠè€æ°ã®ãªã¯ãšã¹ããéä¿¡ã§ããããã«ããïŒãšããããŒå§çž®ãå«ãŸããŸãããµãŒããŒãHTTP/2ãŸãã¯HTTP/3ããµããŒãããŠããå ŽåãCSSããªãã§ããã¯ããã«å¹æçã«ãªããŸãã
å®éã®äŸãšã±ãŒã¹ã¹ã¿ãã£
CSSããªãã§ããããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžãããããã«ã©ã®ããã«äœ¿çšãããŠãããã®å®éã®äŸãèŠãŠã¿ãŸãããã
- Eã³ããŒã¹ãŠã§ããµã€ãïŒEã³ããŒã¹ãŠã§ããµã€ãã¯ã補åã«ããŽãªããŒãžã«CSSããªãã§ãããå®è£ ããŸããããŠãŒã¶ãŒãããŒã ããŒãžãé²èЧãããšãæã人æ°ã®ããã«ããŽãªããŒãžã®CSSãããªãã§ãããããŸãããããã«ããããããã®ã«ããŽãªããŒãžã«ç§»åãããŠãŒã¶ãŒã®ããŒãžèªã¿èŸŒã¿æéã20ïŒ ççž®ãããŸããã
- ãã¥ãŒã¹ãŠã§ããµã€ãïŒãã¥ãŒã¹ãŠã§ããµã€ãã¯ãèšäºããŒãžã«CSSããªãã§ãããå®è£ ããŸããããŠãŒã¶ãŒãèšäºãèªããšãé¢é£ããèšäºã®CSSãããªãã§ãããããŸãããããã«ãããã»ãã·ã§ã³ããšã«èªãŸããèšäºã®æ°ã15ïŒ å¢å ããŸããã
- ããã°ïŒããã°ã¯ãããã°æçš¿ããŒãžã«CSSããªãã§ãããå®è£ ããŸããããŠãŒã¶ãŒãããŒã ããŒãžãé²èЧãããšãææ°ã®ããã°æçš¿ã®CSSãããªãã§ãããããŸãããããã«ãããçŽåž°çã10ïŒ æžå°ããŸããã
ãããã¯ãCSSããªãã§ããã䜿çšããŠãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããæ¹æ³ã®ã»ãã®äžäŸã§ããå ·äœçãªå©ç¹ã¯ããŠã§ããµã€ããšãã®ãŠãŒã¶ãŒããŒã¹ã«ãã£ãŠç°ãªããŸãã
ããªãã§ããã®ããã©ãŒãã³ã¹ãåæããã³æé©åããããã®ããŒã«
CSSããªãã§ããã®å®è£ ãåæããã³æé©åããã®ã«åœ¹ç«ã€ããŒã«ãããã€ããããŸãã
- ãã©ãŠã¶ã®éçºè ããŒã«ïŒChrome DevToolsãFirefox Developer ToolsïŒïŒãããã¯ãŒã¯ããã«ã䜿çšããŠããããã¯ãŒã¯ãªã¯ãšã¹ããç£èŠããããã«ããã¯ãç¹å®ããããªãã§ããããããªãœãŒã¹ãæ£ããããŒããããŠããããšã確èªããŸãããåªå é äœãåãšãªã¯ãšã¹ãã®ã¿ã€ãã³ã°ã«æ³šæããŠãã ããã
- WebPageTestïŒãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ããã¹ãããããã®äººæ°ã®ãããªã³ã©ã€ã³ããŒã«ã§ããWebPageTestã¯ãCSSããªãã§ããã«é¢ããæŽå¯ãå«ãã詳现ãªããã©ãŒãã³ã¹ã¡ããªãã¯ãšæšå¥šäºé ãæäŸããŸãã
- LighthouseïŒChrome DevToolsïŒïŒLighthouseã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ãããã³SEOãç£æ»ããããã®èªååãããããŒã«ã§ããCSSããªãã§ããã广çã«äœ¿çšããããã®ææ¡ãå«ããèªã¿èŸŒã¿é床ãåäžãããæ©äŒãç¹å®ã§ããŸãã
- Google PageSpeed InsightsïŒãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåæããæé©åã«é¢ããæšå¥šäºé ãæäŸããå¥ã®ãªã³ã©ã€ã³ããŒã«ã§ãã
CSSããªãã§ãããšãŠã§ãããã©ãŒãã³ã¹ã®æªæ¥
CSSããªãã§ããã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåäžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã®è²Žéãªãã¯ããã¯ã§ãããŠã§ããé²åãç¶ãããŠãŒã¶ãŒãããé«éã§å¿çæ§ã®é«ããŠã§ããµã€ããèŠæ±ããããã«ãªãã«ã€ããŠãããªãã§ããã¯ããã«éèŠã«ãªããŸãã
HTTP/3ãQUICãé«åºŠãªãã£ãã·ã¥æŠç¥ãªã©ã®ãã¯ãããžãŒã®å°é ã«äŒŽããããªãã§ããã¯ãã·ãŒã ã¬ã¹ã§é åçãªãŠã§ããšã¯ã¹ããªãšã³ã¹ãæäŸããäžã§éèŠãªåœ¹å²ãæããã§ããããææ°ã®ãã¹ããã©ã¯ãã£ã¹ãšãã¯ããã¯ã«ã€ããŠåžžã«æ å ±ãå ¥æããããšã§ãããªãã§ãããæŽ»çšããŠãé床ãšããã©ãŒãã³ã¹ã®ããã«ãŠã§ããµã€ããæé©åã§ããŸãã
çµè«
CSSããªãã§ããã¯ããŠã§ããµã€ãã®èªã¿èŸŒã¿é床ã倧å¹
ã«åäžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããSEOããã©ãŒãã³ã¹ãåäžãããããã®åŒ·åãªãã¯ããã¯ã§ãããã®ã¬ã€ãã§æŠèª¬ãããŠããå©ç¹ãå®è£
æŠç¥ãããã³ãã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã«ãããCSSããªãã§ããã广çã«æŽ»çšããŠãéåºŠãšæåã®ããã«ãŠã§ããµã€ããæé©åã§ããŸããéèŠãªãªãœãŒã¹ãåªå
ããas屿§ã䜿çšãããããã¯ãŒã¯ããã©ãŒãã³ã¹ãç£èŠããæå€§ã®å¹æãåŸãããã«ä»ã®æé©åãã¯ããã¯ãšããªãã§ãããçµã¿åãããããšãå¿ããªãã§ãã ããããŠãŒã¶ãŒã«é«éã§æ¥œãããŠã§ããšã¯ã¹ããªãšã³ã¹ãæäŸããããã®ç¶ç¶çãªåãçµã¿ã®äžç°ãšããŠãããªãã§ãããåãå
¥ããŠãã ããã