PageSpeed Insights
https://pagespeed.web.dev/?hl=ja
ãããé»ææããæ©30幎âŠä»ã§ã¯å人å®
ã§ãã®ã¬ããŒã¹ã®å
éä¿¡ãæ®åããŠããŸãã
äžæ¹ã§ã¢ãã€ã«æ¥çã¯ãŸã ãŸã 4Gãäž»æµã§ããïŒ5Gã©ããã£ãâŠïŒïŒ
ã¹ããæ¬äœã®æ§èœåäžãé¡èã§ãã¢ãã€ã«é床ã®é²åã¯ç·©ããã§ããããã§å€§äºãªã®ããããŒãžå®¹éãã§ãã
GoogleãæäŸãããPageSpeed Insightsãã§ã¯WebããŒãžã®URLã貌ãã ãã§è©äŸ¡ïŒæ¹åçãæèšããŠãããŸãã
åœç€ŸãµãŒãã¹ã®æããŒãžã蚺æãããšããããã©ãŒãã³ã¹ãã69ç¹ã
é«éåãã³å ¥ãã®å¿ èŠæ§ãã§ãŠããŸããã
ããã§ããã©ãŒãã³ã¹æ¹åã§Googleãã匷ãæšå¥šãããã®ããWebPãç»å圢åŒã§ãã
WebP圢åŒã«ããããšã§å®¹éãçŽ30%åæžã§ããããã§ã
ãããªããšã¯ããããŸããïŒèŠæèŠæã§æç確ã§äœ¿ãåããŸãããïŒ
ïŒãã é«éåã«ã¯WebPãæé©ã§ãïŒ
ã¡ãã£ãšåŸ ã£ãŠïŒå®ã¯ãŸã Photoshopã¯æžãåºã察å¿ãå®å šã§ã¯ãããŸããïŒ (2023/12æç¹)
Photoshopã§ã¯ãçæã¢ã»ãããONãã«èšå®ããããšã§ãã¬ã€ã€ãŒã«ä»ããããæ¡åŒµåã®ç»åãã¡ã€ã«ãèªåæžãåºããããŸãããWebPã¯ãŸã æªå¯Ÿå¿ã®ããã§ãïŒïŒ
.webpã¯æªå¯Ÿå¿ãªã®ã§çŽ çŽã«pngãjpgã«ããŸãããâŠ
ãè€è£œãä¿åïŒCtrïŒAltïŒSïŒãããããæžãåºããªãããäžã€äžã€æžãåºããããªãäžäŸ¿ã§ã
ã¢ãŒãããŒãããæžãåºããåç¶æªå¯Ÿå¿âŠã§ã
ð ãå®å¿ãã ãããèªååŠçããŒã«äœããŸããïŒ
å³è§£ã¯ð»WindowsãããŒã¹ã«ããŠããŸãããðMacã§ãåããããŒã«ãªããŸãã
â»èªååŠçã¯Photoshopã®ã¢ã¯ã·ã§ã³æ©èœã䜿ã£ãŠããŸããããåäœããªãå Žåã¯Photoshopã®ããŒãžã§ã³ãææ°çã«ã¢ããããŒãããŠãã ããã
â»ã¢ããããŒãããããã¡ã€ã«ã¯noteã§ããŠã£ã«ã¹ãã§ãã¯ãè¡ã£ãŠãããŸãããå®å¿ãã ããã
âŒã¢ã¯ã·ã§ã³ãã¡ã€ã«
https://note.com/api/v2/attachments/download/411ff4567dd5fb13b739587e3d84bd22
ã¢ã¯ã·ã§ã³ããŒã«ã®ãã³ããŒã¬ãŒã¡ãã¥ãŒãã.atnãã¡ã€ã«ãèªã¿èŸŒããš
ãã»ããããšãã¢ã¯ã·ã§ã³ããè¿œå ãããŸããïŒ
ãã¡ã€ã« ⟠èªååŠç ⟠ããããã¬ãããäœæã
æ·»ä»ç»åãåèã«ãã§ãã¯ããã¯ã¹ããã«ããŠã³ãèšå®ããŠãã ããã
ðè£è¶³
ãããããã¬ãããä¿åã
â èªååŠçããŒã«ãã©ãã«ä¿åãããæå®ã§ããŸãã
â äžæŠãã¹ã¯ãããããããããããšæããŸãã
â ååã¯åŸã§å€æŽã§ããŸãã®ã§é©åœã§åé¡ãããŸããã
ãå®è¡ã
â ããŠã³ããŒãããã¢ã¯ã·ã§ã³ã®ãã»ããããšãã¢ã¯ã·ã§ã³ãããã«ããŠã³ã§éžæããŠãã ããã
æåŸã«ãOKããæŒãã°ããããã¬ãããçæãããŠããã¯ãã§ãã
ð»WindowsâŠïŒïŒïŒ.exeãã¡ã€ã«
ðMacâŠâŠâŠâŠïŒïŒïŒ.appãã¡ã€ã«
è€æ°ãŸãšããŠãOKã§ãã
ç»åãã¡ã€ã«ãšåããã£ã¬ã¯ããªã«webpãã¡ã€ã«ãæžãåºãããŸãã
ðãã¡ã€ã«å®¹éã®æ¯èŒð
æžãåºããããã¡ã€ã«ã¯å¿
ã容éã®æ¯èŒãè¡ã£ãŠã¿ãŠãã ãããå£çŽãèæ¯ç»åãªã©é«è§£å床ã®å Žåã容éãèšããã§ããŸãã±ãŒã¹ããããŸãã
ðMacçã®åæèµ·åæð
Macã ãšæ£ããããããã¬ããã§ãååèµ·åæã«ãšã©ãŒãåããŠããŸãã®ã§ãäžèšã¹ãããããè©Šããã ããã
ååã¯ãšã©ãŒãã§ãŸããããã©ã³ããŒãïŒçŠããªãã§ãã ãã
å³ã¯ãªãã¯ã¡ãã¥ãŒã«ç»é²ããã°ãããããã¬ããã«ãã¡ã€ã«ããã©ãã°ããªããŠãOKã§ãïŒ
ç»åãã¡ã€ã«ãå³ã¯ãªãã¯ããŠexeã«ã·ã¥ãŒãïŒ
容éãæŽã«ã-70ïŒ ãã-90%æžéããããŸãã
.pngãã¡ã€ã«ïŒ1.16MBïŒâŸ .webpãã¡ã€ã«ïŒ843KBïŒâŸ TinyPNG(103KB)
æçµçã«1/10ã®ãã¡ã€ã«ãµã€ãºã«ãªããŸããã
æ¬èšäºã§é
ä¿¡ããŠããã¢ã¯ã·ã§ã³ã®ããããã¬ããæžãåºãæã«
ãç»è³ª75ãçã®ããããã¬ãããçæããŠãã ããã
ããããã¬ãããã¡ã€ã«ãè€æ°ã§ããã®ã§ååã¯ããããããããŸãããã
ã¢ã¯ã·ã§ã³ããŒã«ã®ãä¿åããšãªã¢ãããã«ã¯ãªãã¯ãã
ã¢ã¯ã·ã§ã³è€è£œåŸãããããããŸãã
ç»è³ªã³ã³ãããŒã«ã®ãã€ã¢ãã°ãåºãã®ã§ã¹ã©ã€ããŒã§é©å®èª¿æŽããŠãã ããã
奜ã¿ã®ç»è³ªã«èšå®ããç»è³ªã®ããããã¬ãããçæããŠå®äºã§ãã
ã»ã€ã³ã¿ãŒãããã®é床ã¯ããã£ãŠãããŠã¯ãããã®ã®âŠã¢ãã€ã«ã®ã¹ããŒãã¯ç·©ããã§ãã
ã»ããŒãžã®é«éåã¯ãUI/UXã«ãããŠå€§äºãªèŠçŽ ã§ãã
ã»é«éåæ段ã®äžã€ãšããŠç»å圢åŒã¯WebPãæšå¥šããŸãã
ã»ããããã¬ããã䜿ãã°ãæ軜ã«ç»åãWebPåã§ããŸãã
ãŠãŒã¶ãŒãšã¯ãªãšã€ã¿ãŒã楜ãã¿ãªããã幞ãã«çããŠããã瀟äŒã«ãããæ ªåŒäŒç€ŸviviONã§ã¯ãäžç·ã«åã仲éãçŸåšåéããŠããŸããå°ãã§ãæ¥åå 容ãã«ã«ãã£ãŒã«èå³ãæã£ãŠããã ããŸããããæ¯éãæ°è»œã«ãå¿åãã ãããŸãã