ã°ããŒãã«ãªãŠã§ãããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ããšã³ã²ãŒãžã¡ã³ãåäžã®ããã®ç»åã»åç»æé©åã解説ãå§çž®ããã©ãŒããããã¬ã¹ãã³ã·ããåœéSEOã®æè¡ããã¹ã¿ãŒã
ã¡ãã£ã¢ç®¡çïŒã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã®ç»åãšåç»ã®æé©å
仿¥ã®ããžã¿ã«ç°å¢ã«ãããŠãç»åãšåç»ã¯ãªãŒãã£ãšã³ã¹ãåŒãã€ãã广çã«æ å ±ãäŒããããã«äžå¯æ¬ ã§ããããããæé©åãããŠããªãã¡ãã£ã¢ã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãããã«ã¯æ€çŽ¢ãšã³ãžã³ã®ã©ã³ãã³ã°ã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã«èª¿æŽãããç»åãšåç»ã®æé©åã®éèŠãªåŽé¢ãæ¢ããã³ã³ãã³ããè¿ éã«èªã¿èŸŒãŸããã©ã®ããã€ã¹ã§ãèŠæ ããè¯ãã倿§ãªåœéçèŠèŽè ã«å±ãããã«ããæ¹æ³ã解説ããŸãã
ãªãã¡ãã£ã¢ã®æé©åãéèŠãªã®ãïŒ
- ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹åäžïŒ ãµã€ãºã®å€§ããç»åãåç»ãã¡ã€ã«ã¯ããŒãžã®èªã¿èŸŒã¿æéãé ãããçŽåž°çã®äžæããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ãã®äœäžã«ã€ãªãããŸããæé©åã«ãããå質ãæãªãããšãªããã¡ã€ã«ãµã€ãºãåæžããèªã¿èŸŒã¿é床ãåäžãããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ é«éã§èªã¿èŸŒãŸãããŠã§ããµã€ãã¯ãããã¹ã ãŒãºã§å¿«é©ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãã蚪åè ãã³ã³ãã³ããæ¢çŽ¢ããå蚪ããããšãä¿ããŸãã
- SEOã©ã³ãã³ã°ã®åäžïŒ æ€çŽ¢ãšã³ãžã³ã¯èªã¿èŸŒã¿é床ã®éããŠã§ããµã€ããåªå ããŸããæé©åãããã¡ãã£ã¢ã¯ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹åäžã«è²¢ç®ããæ€çŽ¢ãšã³ãžã³ã©ã³ãã³ã°ã«è¯ã圱é¿ãäžããŸãã
- 垯åå¹ ã³ã¹ãã®åæžïŒ ãã¡ã€ã«ãµã€ãºãå°ããã»ã©åž¯åå¹ ã®æ¶è²»éãå°ãªããªããç¹ã«ã³ã³ãã³ããã°ããŒãã«ã«é ä¿¡ããå Žåã«éèŠãªãã¹ãã£ã³ã°ã³ã¹ãã®åæžãšãŠã§ããµã€ãã®ã¹ã±ãŒã©ããªãã£åäžã«ã€ãªãããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ é©åãªæé©åã«ã¯ãç»åã«altããã¹ãã远å ããåç»ã«ãã£ãã·ã§ã³ãä»ããããšãå«ãŸããé害ãæã€ãŠãŒã¶ãŒãã³ã³ãã³ãã«ã¢ã¯ã»ã¹ãããããªããŸãã
ç»åæé©åã®ãã¯ããã¯
1. é©åãªç»åãã©ãŒãããã®éžæ
ç»è³ªãšãã¡ã€ã«ãµã€ãºã®ãã©ã³ã¹ããšãããã«ã¯ãé©åãªç»åãã©ãŒããããéžæããããšãéåžžã«éèŠã§ãã以äžã«ãäžè¬çãªç»åãã©ãŒãããã®æŠèŠã瀺ããŸãã
- JPEG (ãŸã㯠JPG)ïŒ åçãè€éãªè²ã®ç»åã«é©ãããåºããµããŒããããŠãããã©ãŒãããã§ããJPEGã¯éå¯éå§çž®ã䜿çšããŠããããã¡ã€ã«ãµã€ãºãåæžããããã«äžéšã®ç»åããŒã¿ãç Žæ£ãããŸããæ±çšæ§ã¯é«ãã§ãããé床ãªå§çž®ã¯ç®ã«èŠããã¢ãŒãã£ãã¡ã¯ããåŒãèµ·ããå¯èœæ§ãããããé¿ããã¹ãã§ãã
- PNGïŒ ã·ã£ãŒããªç·ãããã¹ããããŽãéæåºŠãæã€ã°ã©ãã£ãã¯ã«æé©ã§ããPNGã¯å¯éå§çž®ã䜿çšããç»è³ªãç¶æããŸãããJPEGãšæ¯èŒããŠãã¡ã€ã«ãµã€ãºã倧ãããªãåŸåããããŸããè²æ°ãå°ãªãå Žåã¯PNG-8ãããã«ã«ã©ãŒã®å Žåã¯PNG-24ã䜿çšããŸãã
- GIFïŒ åçŽãªã¢ãã¡ãŒã·ã§ã³ãè²æ°ãéãããã°ã©ãã£ãã¯ã«é©ããŠããŸããGIFã¯å¯éå§çž®ã䜿çšããåæ§ã®ç»åã§ã¯PNGããããã¡ã€ã«ãµã€ãºãå°ãããªãã®ãäžè¬çã§ãããè²æ·±åºŠã¯å£ããŸãã
- WebPïŒ Googleãéçºããææ°ã®ç»åãã©ãŒãããã§ãJPEGãPNGãGIFãšæ¯èŒããŠåªããå§çž®çãšç»è³ªãæäŸããŸããWebPã¯å¯éå§çž®ãšéå¯éå§çž®ã®äž¡æ¹ãããã«ã¯éæåºŠãšã¢ãã¡ãŒã·ã§ã³ããµããŒãããŠããŸãã
- AVIFïŒ AV1ãããªã³ãŒããã¯ãããŒã¹ã«ããããã«æ°ããç»åãã©ãŒãããã§ãWebPãããããã«åªããå§çž®å¹çãæäŸããŸããAVIFã¯ãå€§å¹ ã«å°ãããã¡ã€ã«ãµã€ãºã§åªããç»è³ªãå®çŸããŸãã
äŸïŒ ãŠã§ããµã€ãã§åçã䜿çšããå Žåãäžè¬çã«JPEGãŸãã¯WebPãè¯ãéžæã§ããéæåºŠãæã€ããŽãã¢ã€ã³ã³ã«ã¯ãPNGãŸãã¯WebPãããé©ããŠããŸããæå€§éã®å§çž®ãšåè³ªãæ±ãããªãAVIFãæ€èšããŸããããã©ãŠã¶ã®äºææ§ã確èªããŠãã ããã
2. ç»åã®å§çž®
å§çž®ã¯ãèŠèŠçãªå質ãå€§å¹ ã«æãªãããšãªããç»åã®ãã¡ã€ã«ãµã€ãºãåæžããŸããå§çž®ã«ã¯äž»ã«2ã€ã®ã¿ã€ãããããŸãã
- éå¯éå§çž®ïŒ äžéšã®ç»åããŒã¿ãæ°žä¹ ã«ç Žæ£ããããšã§ãã¡ã€ã«ãµã€ãºãåæžããŸããããã«ãããã¡ã€ã«ãµã€ãºã¯å°ãããªããŸãããããããããšã¢ãŒãã£ãã¡ã¯ããçºçããå¯èœæ§ããããŸããJPEGã¯éå¯éå§çž®ãã©ãŒãããã§ãã
- å¯éå§çž®ïŒ ç»åããŒã¿ãäžåç Žæ£ããã«ãã¡ã€ã«ãµã€ãºãåæžããŸããããã«ããç»è³ªã¯ç¶æãããŸãããéåžžãéå¯éå§çž®ãšæ¯èŒããŠãã¡ã€ã«ãµã€ãºã¯å€§ãããªããŸããPNGã¯å¯éå§çž®ãã©ãŒãããã§ãã
ç»åå§çž®ããŒã«ïŒ
- ImageOptim (Mac)ïŒ æ§ã ãªãã©ãŒãããããµããŒããããç¡æã§ãªãŒãã³ãœãŒã¹ã®ç»åæé©åããŒã«ã
- TinyPNG/TinyJPG (ãŠã§ãããŒã¹)ïŒ ã€ã³ããªãžã§ã³ããªéå¯éå§çž®ã䜿çšããŠPNGããã³JPEGã®ãã¡ã€ã«ãµã€ãºãåæžãã人æ°ã®ãªã³ã©ã€ã³ããŒã«ã
- Compressor.io (ãŠã§ãããŒã¹)ïŒ JPEGãPNGãSVGãGIFãWebPã®å§çž®ããµããŒãããããäžã€ã®ãªã³ã©ã€ã³ããŒã«ã
- Adobe PhotoshopïŒ é«åºŠãªç»åå§çž®ãªãã·ã§ã³ãæäŸããæé©ãªçµæãåŸãããã«èšå®ã埮調æŽã§ããŸãã
- GIMPïŒ Photoshopãšåæ§ã®å§çž®æ©èœãæäŸãããç¡æã§ãªãŒãã³ãœãŒã¹ã®ç»åãšãã£ã¿ã
- Squoosh.app (ãŠã§ãããŒã¹)ïŒ Googleãéçºãããã®ãŠã§ãã¢ããªã§ã¯ãããŸããŸãªå§çž®æ¹æ³ããã©ãŒãããã詊ããªãããçµæã䞊ã¹ãŠæ¯èŒã§ããŸãã
äŸïŒ ãŠã§ããµã€ãã«ç»åãã¢ããããŒãããåã«ãç»åå§çž®ããŒã«ã«ãããŠãã¡ã€ã«ãµã€ãºãåæžããŸããããŸããŸãªå§çž®ã¬ãã«ã詊ããŠããã¡ã€ã«ãµã€ãºãšç»è³ªã®æé©ãªãã©ã³ã¹ãèŠã€ããŸãããã
3. ç»åã®ãªãµã€ãº
æå³ãããµã€ãºã§ç»åã衚瀺ããããšã¯ããŠã§ãããã©ãŒãã³ã¹ãæé©åããããã«äžå¯æ¬ ã§ããå¿ èŠä»¥äžã«å€§ããªç»åãã¢ããããŒããããšã垯åå¹ ãç¡é§ã«ããããŒãžã®èªã¿èŸŒã¿æéãé ãããŸãã
ã¬ã¹ãã³ã·ãç»åïŒ <picture>èŠçŽ ãŸãã¯<img>ã¿ã°ã®srcset屿§ã䜿çšããŠããŠãŒã¶ãŒã®ããã€ã¹ãç»é¢ãµã€ãºã«åºã¥ããŠç°ãªããµã€ãºã®ç»åãæäŸããŸããããã«ãããã¢ãã€ã«ããã€ã¹ã®ãŠãŒã¶ãŒã«ã¯ããå°ããªç»åãããã¹ã¯ãããã³ã³ãã¥ãŒã¿ã®ãŠãŒã¶ãŒã«ã¯ãã倧ããé«è§£å床ã®ç»åãæäŸãããŸãã
äŸïŒ 2000x1500ãã¯ã»ã«ã®ç»åããŠã§ããµã€ãã«ã¢ããããŒãããŠ500x375ãã¯ã»ã«ã§è¡šç€ºãã代ããã«ãã¢ããããŒãããåã«ç»åã500x375ãã¯ã»ã«ã«ãªãµã€ãºããŸããç»é¢è§£å床ããšã«ç°ãªããµã€ãºãæäŸããããã«ã¬ã¹ãã³ã·ãç»åã䜿çšããŸãã
4. ç»åã¡ã¿ããŒã¿ã®æé©å
ã¡ã¿ããŒã¿ã¯ãç»åã®äœè ãäœææ¥ã説æãªã©ã®æ å ±ãæäŸããŸããç»åã¡ã¿ããŒã¿ãæé©åããããšã§ãSEOãšã¢ã¯ã»ã·ããªãã£ãåäžãããããšãã§ããŸãã
- Altããã¹ãïŒ ãã¹ãŠã®ç»åã«èª¬æçãªaltããã¹ãã远å ããŸããaltããã¹ãã¯ãç»åãèªã¿èŸŒããªãå Žåã«è¡šç€ºãããèŠèŠé害ã®ãããŠãŒã¶ãŒã«ã³ã³ããã¹ããæäŸããããã«ã¹ã¯ãªãŒã³ãªãŒããŒã«ãã£ãŠäœ¿çšãããŸãããŸããaltããã¹ãã¯æ€çŽ¢ãšã³ãžã³ãç»åã®å 容ãçè§£ããã®ã«ã圹ç«ã¡ãŸãã
- Title屿§ïŒ Title屿§ã¯ããŠãŒã¶ãŒãããŠã¹ã§ç»åã«ã«ãŒãœã«ãåããããšè¿œå æ å ±ãæäŸããŸããaltããã¹ãã»ã©éèŠã§ã¯ãããŸãããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãã
- ãã¡ã€ã«åïŒ é¢é£ããŒã¯ãŒããå«ã説æçãªãã¡ã€ã«åã䜿çšããŸããäŸãã°ããIMG_1234.jpgãã®ãããªååã§ã¯ãªãããsydney-opera-house.jpgãã®ãããªååã䜿çšããŸãã
äŸïŒ ãšããã§ã«å¡ã®ç»åãã¢ããããŒãããå Žåãããã©ã³ã¹ãããªã®ãšããã§ã«å¡ãã®ãããªaltããã¹ããšããeiffel-tower-paris.jpgãã®ãããªãã¡ã€ã«åã䜿çšããŸãã
5. ç»åã®é å»¶èªã¿èŸŒã¿ïŒLazy LoadingïŒ
é å»¶èªã¿èŸŒã¿ã¯ããŠãŒã¶ãŒã®ãã¥ãŒããŒãã«è¡šç€ºããããŸã§ç»åã®èªã¿èŸŒã¿ãé ãããæè¡ã§ããããã«ãããç¹ã«ç»åãå€ãããŒãžã§ãåæããŒãžã®èªã¿èŸŒã¿æéãå€§å¹ ã«æ¹åã§ããŸãã
å®è£
ïŒ JavaScriptã䜿çšãããã<img>ã¿ã°ã«loading="lazy"屿§ãä»ããŠãã©ãŠã¶ã®ãã€ãã£ãé
å»¶èªã¿èŸŒã¿æ©èœãå©çšããããšã§ãé
å»¶èªã¿èŸŒã¿ãå®è£
ã§ããŸãã
äŸïŒ <img>ã¿ã°ã«loading="lazy"屿§ã远å ããŠããã€ãã£ãé
å»¶èªã¿èŸŒã¿ãæå¹ã«ããŸãããã€ãã£ãé
å»¶èªã¿èŸŒã¿ããµããŒãããŠããªãå€ããã©ãŠã¶ã«ã¯ãlazysizesã®ãããªJavaScriptã©ã€ãã©ãªã䜿çšããŸãã
6. ã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒ
CDNã¯ãäžçäžã«åæ£ããããµãŒããŒã®ãããã¯ãŒã¯ã§ããããŠãŒã¶ãŒã®å°ççãªå Žæã«åºã¥ããŠã³ã³ãã³ããä¿åããé ä¿¡ããŸããCDNã䜿çšãããšãé å»¶ãæžããããŠãŒã¶ãŒãç©ççã«è¿ããµãŒããŒããã³ã³ãã³ããåä¿¡ã§ããããã«ããããšã§ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
CDNã䜿çšããå©ç¹ïŒ
- èªã¿èŸŒã¿æéã®ççž®ïŒ CDNã¯ãŠãŒã¶ãŒã«å°ççã«è¿ããµãŒããŒããã³ã³ãã³ããé ä¿¡ãããããé å»¶ãæžå°ããèªã¿èŸŒã¿æéãæ¹åãããŸãã
- ä¿¡é Œæ§ã®åäžïŒ CDNã¯è€æ°ã®ãµãŒããŒã«ã³ã³ãã³ãã忣ãããããã1ã€ã®ãµãŒããŒãããŠã³ããŠããŠã§ããµã€ãã¯ã¢ã¯ã»ã¹å¯èœãªç¶æ ãç¶æããŸãã
- ã¹ã±ãŒã©ããªãã£ã®åäžïŒ CDNã¯å€§éã®ãã©ãã£ãã¯ãåŠçã§ããããããŠã§ããµã€ãã¯éèŠã«å¿ããŠã¹ã±ãŒã«ã¢ããã§ããŸãã
äŸïŒ CloudflareãAkamaiãAmazon CloudFrontãªã©ã®CDNã䜿çšããŠãäžçäžã®ãŠãŒã¶ãŒã«ç»åããã®ä»ã®éçã¢ã»ãããé ä¿¡ããããšãæ€èšããŠãã ããã
åç»æé©åã®ãã¯ããã¯
1. é©åãªåç»ãã©ãŒãããã®éžæ
ããŸããŸãªããã€ã¹ããã©ãŠã¶éã§ã®äºææ§ã確ä¿ããããã«ã¯ãé©åãªãããªãã©ãŒããããéžæããããšãéèŠã§ãã以äžã«ãäžè¬çãªãããªãã©ãŒãããã®æŠèŠã瀺ããŸãã
- MP4ïŒ åªããå§çž®çãšãããªå質ãæäŸãããåºããµããŒããããŠãããã©ãŒãããã§ããMP4ã¯äžè¬çã«ãŠã§ãåç»ã«æé©ãªéžæè¢ã§ãã
- WebMïŒ GoogleãéçºãããªãŒãã³ãœãŒã¹ã®ãã©ãŒãããã§ãåªããå§çž®çãšãããªå質ãæäŸããŸããWebMã¯ã»ãšãã©ã®ææ°ãã©ãŠã¶ã§ãµããŒããããŠããŸãã
- OggïŒ äžéšã®ãã©ãŠã¶ã§ãµããŒããããŠããããäžã€ã®ãªãŒãã³ãœãŒã¹ãã©ãŒãããã§ããOggã¯MP4ãWebMã»ã©åºãã¯äœ¿çšãããŠããŸããã
äŸïŒ æå€§éã®äºææ§ãåŸãããã«ãäž»èŠãªåç»ãã©ãŒããããšããŠMP4ã䜿çšããŸããããããµããŒããããã©ãŠã¶åãã«ã代æ¿ãšããŠWebMãæäŸããããšãæ€èšããŠãã ããã
2. åç»ã®å§çž®
å§çž®ã¯ãèŠèŠçãªå質ãå€§å¹ ã«æãªãããšãªãããããªã®ãã¡ã€ã«ãµã€ãºãåæžããŸãããããªå§çž®ã«ã¯ããããã¬ãŒãããã¬ãŒã ã¬ãŒããè§£å床ãªã©ãããŸããŸãªãã©ã¡ãŒã¿ã®èª¿æŽãå«ãŸããŸãã
- ãããã¬ãŒãïŒ ãããªã®1ç§ãããããšã³ã³ãŒãããããã«äœ¿çšãããããŒã¿éããããã¬ãŒããäžãããšãã¡ã€ã«ãµã€ãºã¯å°ãããªããŸããããããªã®å質ãäœäžããå¯èœæ§ããããŸãã
- ãã¬ãŒã ã¬ãŒãïŒ 1ç§ãããã«è¡šç€ºããããã¬ãŒã æ°ããã¬ãŒã ã¬ãŒããäžãããšãã¡ã€ã«ãµã€ãºã¯å°ãããªããŸããããããªãã«ã¯ã«ã¯ããŠèŠããããšããããŸãã
- è§£ååºŠïŒ ãããªã®å¯žæ³ãè§£å床ãäžãããšãã¡ã€ã«ãµã€ãºã¯å°ãããªããŸããããããªããŒãããŠèŠããããšããããŸãã
åç»å§çž®ããŒã«ïŒ
- HandBrake (ãã¹ã¯ããã)ïŒ æ§ã ãªãã©ãŒãããããµããŒãããé«åºŠãªå§çž®ãªãã·ã§ã³ãæäŸãããç¡æã§ãªãŒãã³ãœãŒã¹ã®ãããªãã©ã³ã¹ã³ãŒããŒã
- Adobe Premiere ProïŒ å æ¬çãªå§çž®ããŒã«ãæäŸãããããã§ãã·ã§ãã«åããããªç·šéãœãããŠã§ã¢ã
- Final Cut ProïŒ Appleã®ãããã§ãã·ã§ãã«åããããªç·šéãœãããŠã§ã¢ã§ãPremiere Proãšåæ§ã®å§çž®æ©èœãæäŸããŸãã
- Online Video Converter (ãŠã§ãããŒã¹)ïŒ å€ãã®ãªã³ã©ã€ã³ããŒã«ããããªã®å€æãšå§çž®ãè¡ããŸãããæ©å¯æ§ã®é«ãã³ã³ãã³ããã¢ããããŒãããéã¯ãã©ã€ãã·ãŒãšã»ãã¥ãªãã£ã®åé¡ã«æ³šæããŠãã ããã
äŸïŒ HandBrakeã䜿çšããŠããŠã§ããµã€ãã«ã¢ããããŒãããåã«ãããªãå§çž®ããŸããããŸããŸãªãããã¬ãŒãèšå®ã詊ããŠããã¡ã€ã«ãµã€ãºãšãããªåè³ªã®æé©ãªãã©ã³ã¹ãèŠã€ããŸãããã1080pã®ãããªã«ã¯ãéåžž2ã5 Mbpsã®ãããã¬ãŒãã§ååã§ãã
3. ã¢ãããã£ããããã¬ãŒãã¹ããªãŒãã³ã°ïŒABSïŒ
ã¢ãããã£ããããã¬ãŒãã¹ããªãŒãã³ã°ïŒABSïŒã¯ããããã¬ãŒãã®ç°ãªãè€æ°ã®ããŒãžã§ã³ã®ãããªãé ä¿¡ããæè¡ã§ããŠãŒã¶ãŒã®ã€ã³ã¿ãŒãããæ¥ç¶é床ã«åºã¥ããŠãããªãã¬ãŒã€ãŒãèªåçã«åãæ¿ããããšãå¯èœã«ããŸããããã«ãããã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒã§ãã¹ã ãŒãºãªåçäœéšãä¿èšŒãããŸãã
å®è£ ïŒ ABSã§ã¯ããããªãç°ãªããããã¬ãŒãã®è€æ°ã®ããŒãžã§ã³ã«ãšã³ã³ãŒãããå©çšå¯èœãªããŒãžã§ã³ãèšè¿°ãããããã§ã¹ããã¡ã€ã«ãäœæããå¿ èŠããããŸããVideo.jsãJW Playerãªã©ã®ãããªãã¬ãŒã€ãŒãABSããµããŒãããŠããŸãã
äŸïŒ ãããªã500 Kbpsãã5 Mbpsã®ç¯å²ã®ãããã¬ãŒãã§è€æ°ã®ããŒãžã§ã³ã«ãšã³ã³ãŒãããŸããABSããµããŒããããããªãã¬ãŒã€ãŒã䜿çšããŠããŠãŒã¶ãŒã®ã€ã³ã¿ãŒãããæ¥ç¶é床ã«åºã¥ããŠããŒãžã§ã³ãèªåçã«åãæ¿ããŸãã
4. åç»ãã¹ãã£ã³ã°ãã©ãããã©ãŒã
ãããªãçŽæ¥ãŠã§ããµã€ãã§ãã¹ããã代ããã«ãYouTubeãVimeoãWistiaãªã©ã®ãããªãã¹ãã£ã³ã°ãã©ãããã©ãŒã ã®äœ¿çšãæ€èšããŠãã ããããããã®ãã©ãããã©ãŒã ã«ã¯ããã€ãã®å©ç¹ããããŸãã
- 垯åå¹ ã³ã¹ãã®åæžïŒ åç»ãã¹ãã£ã³ã°ãã©ãããã©ãŒã ããããªåçã«äŒŽã垯åå¹ æ¶è²»ãåŠçããããããã¹ãã£ã³ã°ã³ã¹ããåæžãããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒ åç»ãã¹ãã£ã³ã°ãã©ãããã©ãŒã ã¯CDNã䜿çšããŠãäžçäžã®ãŠãŒã¶ãŒã«è¿ éãã€ç¢ºå®ã«ãããªãé ä¿¡ããŸãã
- æ©èœã®åŒ·åïŒ åç»ãã¹ãã£ã³ã°ãã©ãããã©ãŒã ã¯ãåæããããªåã蟌ã¿ãã«ã¹ã¿ãã€ãºãªãã·ã§ã³ãªã©ã®æ©èœãæäŸããŸãã
äŸïŒ YouTubeãVimeoã«ãããªãã¢ããããŒããããŠã§ããµã€ãã«åã蟌ã¿ãŸããããã«ããã垯åå¹ ã³ã¹ããåæžããããããªåçã®ããã©ãŒãã³ã¹ãåäžããŸãã
5. åç»ã¡ã¿ããŒã¿ã®æé©å
ç»åãšåæ§ã«ããããªã¡ã¿ããŒã¿ãæé©åããããšã§SEOãšã¢ã¯ã»ã·ããªãã£ãåäžãããããšãã§ããŸãã
- ã¿ã€ãã«ïŒ é¢é£ããŒã¯ãŒããå«ã説æçãªã¿ã€ãã«ã䜿çšããŸãã
- 説æïŒ é¢é£ããŒã¯ãŒããé¢é£ã³ã³ãã³ããžã®ãªã³ã¯ãå«ãããããªã®è©³çްãªèª¬æãèšè¿°ããŸãã
- ã¿ã°ïŒ ãŠãŒã¶ãŒããããªãèŠã€ããããããããã«ãé¢é£ããã¿ã°ã远å ããŸãã
- ãã£ãã·ã§ã³ïŒ èŽèŠã«é害ã®ãããŠãŒã¶ãŒãã¢ã¯ã»ã¹ã§ããããã«ããããªã«ãã£ãã·ã§ã³ã远å ããŸãããã£ãã·ã§ã³ã¯ãŸããæ€çŽ¢ãšã³ãžã³ã«ã€ã³ããã¯ã¹ãããããã¹ããå¢ããããšã§SEOãåäžãããŸãã
- ãµã ãã€ã«ïŒ èŠèŽè ãåŒãã€ããããã«ãç®ãåŒããµã ãã€ã«ã䜿çšããŸãã
äŸïŒ äžéã®é·åã«é¢ãããããªãã¢ããããŒãããå Žåããäžéã®é·åïŒå®å šã¬ã€ããã®ãããªã¿ã€ãã«ã詳现ãªèª¬æããããŠãäžéã®é·åããäžåœããæ è¡ããªã©ã®é¢é£ã¿ã°ã䜿çšããŸããèŠèŽçãæå€§åããããã«ããã£ãã·ã§ã³ãšé åçãªãµã ãã€ã«ã远å ããŸãã
6. åç»ã®é å»¶èªã¿èŸŒã¿ïŒLazy LoadingïŒ
é å»¶èªã¿èŸŒã¿ã¯ãåæã®ããŒãžèªã¿èŸŒã¿æéãæ¹åããããã«ãããªã«ãé©çšã§ããŸããããã«ããããŠãŒã¶ãŒãããŒãžã®ãããªã®å Žæã«ã¹ã¯ããŒã«ãããŸã§ããããªãã¬ãŒã€ãŒã®èªã¿èŸŒã¿ãé å»¶ãããŸãã
å®è£
ïŒ JavaScriptã䜿çšããããloading="lazy"屿§ïŒåã蟌ã¿ãããªãå«ãiframeã®ãµããŒãã¯éå®çãããããŸãããïŒãå©çšããŠãã©ãŠã¶ã®ãã€ãã£ãé
å»¶èªã¿èŸŒã¿ã掻çšããããšã§ãåç»ã®é
å»¶èªã¿èŸŒã¿ãå®è£
ããŸããiframeã®é
å»¶èªã¿èŸŒã¿å°çšã«èšèšãããã©ã€ãã©ãªã®äœ¿çšãæ€èšããŠãã ããã
äŸïŒ JavaScriptã©ã€ãã©ãªã䜿çšããŠãŠã§ããµã€ãäžã®åã蟌ã¿ãããªãé å»¶èªã¿èŸŒã¿ãããåæããŒãžã®èªã¿èŸŒã¿æéãæ¹åããŸãã
ã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã®èæ ®äºé
ã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã«ã¡ãã£ã¢ãæé©åããéã«ã¯ã以äžã®èŠçŽ ãèæ ®ããŠãã ããã
- èšèªïŒ è€æ°ã®èšèªã§ãã£ãã·ã§ã³ãåå¹ãæäŸããããåºããªãŒãã£ãšã³ã¹ããããªã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
- æåçãªé æ ®ïŒ æåçãªéãã«æ³šæããç¹å®ã®æåã«ãããŠäžå¿«ãŸãã¯äžé©åãšèŠãªãããå¯èœæ§ã®ããç»åããããªã®äœ¿çšãé¿ããŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ å Žæã«é¢ããããé害ãæã€ãŠãŒã¶ãŒãã¡ãã£ã¢ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
- 垯åå¹ ïŒ ç¹ã«çºå±éäžåœãªã©ãã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒåãã«ã¡ãã£ã¢ãæé©åããŸãã
- æ³çãªèæ ®äºé ïŒ ãŠã§ããµã€ããã¢ã¯ã»ã¹å¯èœãªãã¹ãŠã®åœã§ãç»åããããªã䜿çšããæš©å©ã確ä¿ããŠããããšã確èªããŸãã
- ããŒã«ã©ã€ãŒãŒã·ã§ã³ïŒ ç¹å®ã®å°åã«é¿ãããã«ãç»åããããªãããŒã«ã©ã€ãºããããšãæ€èšããŸããããã«ã¯ãå°å ã®ã¢ãã«ãã©ã³ãããŒã¯ããŸãã¯æåçãªèšåã䜿çšããããšãå«ãŸããå ŽåããããŸãã
- ã¿ã€ã ãŸãŒã³ïŒ ã©ã€ããããªã€ãã³ããã¹ã±ãžã¥ãŒã«ããéã¯ãäžçäžããã®åå ãæå€§åããããã«ãããŸããŸãªã¿ã€ã ãŸãŒã³ãèæ ®ã«å ¥ããŸãã
ããŒã«ãšãªãœãŒã¹
- Google PageSpeed InsightsïŒ ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãåæããæé©åã®ããã®æšå¥šäºé ãæäŸããããŒã«ã
- WebPageTestïŒ ãŠã§ããµã€ãã®ããã©ãŒãã³ã¹ããã¹ãããããã®å¥ã®ããŒã«ã§ãããŒãžã®èªã¿èŸŒã¿æéãšãªãœãŒã¹ã®èªã¿èŸŒã¿ã«é¢ããè©³çŽ°ãªæŽå¯ãæäŸããŸãã
- GTmetrixïŒ è©³çŽ°ãªã¬ããŒããšæšå¥šäºé ãæäŸããã人æ°ã®ãŠã§ããµã€ãããã©ãŒãã³ã¹åæããŒã«ã
- LighthouseïŒ ãŠã§ãããŒãžã®å質ãåäžãããããã®ãªãŒãã³ãœãŒã¹ã®èªååããŒã«ãããã©ãŒãã³ã¹ãã¢ã¯ã»ã·ããªãã£ãããã°ã¬ãã·ããŠã§ãã¢ããªãSEOãªã©ã®ç£æ»æ©èœããããŸãã
- CloudinaryïŒ ãã®ã¬ã€ãã§èª¬æããæé©åã¿ã¹ã¯ã®å€ããèªååãããã¯ã©ãŠãããŒã¹ã®ç»åããã³åç»ç®¡çãã©ãããã©ãŒã ã
- ImgixïŒ ç»åãåçã«ãªãµã€ãºãããªãã³ã°ãæé©åã§ãããªã¢ã«ã¿ã€ã ç»ååŠçãµãŒãã¹ã
çµè«
ç»åãšåç»ã®æé©åã¯ãã°ããŒãã«ãªãŒãã£ãšã³ã¹ã«é«éã§ã¢ã¯ã»ã¹ãããããé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ãããã®ã¬ã€ãã§æŠèª¬ãããã¯ããã¯ã«åŸãããšã§ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãSEOã©ã³ãã³ã°ããŠãŒã¶ãŒæºè¶³åºŠãå€§å¹ ã«åäžãããããšãã§ããŸãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåªå ããæåçãªé æ ®ãå¿ããã倿§ãªåœéçãªãŒãã£ãšã³ã¹ã®ããŒãºã«åãããŠæé©åæŠç¥ã調æŽããããšãå¿ããªãã§ãã ãããæé©ãªçµæã確å®ã«ããããã«ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããå¿ èŠã«å¿ããŠèª¿æŽãè¡ã£ãŠãã ããã