身ã«ã¤ã‘ã¦ãŠããŸã„Webサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編 | DevelopersIO5，インラインイメージã®ãƒ¡ãƒªãƒƒãƒˆãƒ»ãƒ‡ãƒ¡ãƒªãƒƒãƒˆã¨æ³¨æ„点 5.1，メリット インラインイメージを使ã†ã“ã¨ã§ç”»åƒè‡ªä½“ã®HTTPリクエストãŒç™ºç”Ÿã—ã¾ã›ã‚“。 例ãˆã°ãƒ•ã‚¡ã‚¤ãƒ«ã‚µã‚¤ã‚ºã®å°ã•ãª10個ã®ç”»åƒã‚’èªã¿è¾¼ã‚“ã§ã„ã‚‹ã¨ã—ã¾ã™ã€‚ãれらã™ã¹ã¦ã‚’インラインイメージ化ã™ã‚‹ã“ã¨ã§10回ã®HTTPリクエストを削減ã§ãã¾ã™ã€‚ データサイズãŒ37ï¼…å¢—åŠ ã™ã‚‹ã¨ã„ã†ãƒ‡ãƒ¡ãƒªãƒƒãƒˆã¯ã‚ã‚Šã¾ã™ãŒå¤‰æ›å‰ã®ãƒ‡ãƒ¼ã‚¿ãŒæ•°MBã§ã‚‚ãªã„é™ã‚ŠHTTPリクエストãŒæ¸›ã‚‰ã›ã‚‹ã“ã¨ã®æ–¹ãŒæœ‰ç›Šã§ã™ã€‚ 5.2，デメリット IEã®å¤ã„ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã§ã¯ä½¿ãˆãªã„ Base64エンコードã«ã‚ˆã‚Šãƒ‡ãƒ¼ã‚¿ã‚µã‚¤ã‚ºãŒç´„37ï¼…å¢—åŠ ã™ã‚‹ HTMLã‚„CSSã«ç›´æŽ¥åŸ‹ã‚込むãŸã‚ç”»åƒã‚’変ãˆã‚‹åº¦ã«å·®ã—替ãˆãŒå¿…è¦ï¼ˆãƒ„ールã§æ”¹å–„å¯èƒ½ï¼‰ data URI schemeã§åŸ‹ã‚è¾¼ã¾ã‚ŒãŸãƒ‡ãƒ¼ã‚¿ã¯ã‚ャッシュã•ã‚Œãªã„ åŒã˜ãƒ‡ãƒ¼ã‚¿ã‚’複数箇所ã«è¡¨ç¤ºã—ãŸã„å ´åˆã€ãã‚Œãžã‚Œã®å ´æ‰€ã«åŸ‹ã‚込む必è¦ãŒã‚ã‚‹ãŸã‚インライン
グーグルã€ç”»åƒãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã€ŒWebPã€ã‚’発表--ウェブã®é«˜é€ŸåŒ–を図る
{{#tags}}- {{label}}
{{/tags}}