Private content!This content has been marked as private by the uploader.
Private Presentation
Private content!This content has been marked as private by the uploader.
HTTPリクエスト数削減テクニック2： CSS Sprite編
ã¯ã˜ã‚ã« ã“ã‚“ã«ã¡ã¯ã€ã‚¯ãƒ©ã‚¹ãƒ¡ã‚½ãƒƒãƒ‰æ ªå¼ä¼šç¤¾ã®é‡Žä¸ã§ã™ã€‚ HTTPリクエスト削減テクニックã®ç´¹ä»‹ã«å…¥ã‚Šã€å‰å›žã®ã€Žãƒªã‚¯ã‚¨ã‚¹ãƒˆæ•°å‰Šæ¸›ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯1：インラインイメージ編ã€ã§ã¯ã€ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã‚¤ãƒ¡ãƒ¼ã‚¸ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã—ãŸã€‚本記事ã§ã¯ã€ŒCSS Spriteã€ã®åŸºæœ¬çš„ãªçŸ¥è˜ã¨ä½¿ã„æ–¹ã€ä½¿ã„ã©ã“ã‚ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ã™ã§ã«å®šç•ªã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã¨ãªã£ã¦ã„ã¾ã™ãŒã€ä½•ã¨ãªã使ã£ã¦ã„ã‚‹ã“ã¨ãŒå¤šã„ã¨æ€ã„ã¾ã™ã€‚åˆå¦è€…ã®æ–¹ã«ã‚‚ç†è§£ã—ã¦ã„ãŸã ã‘るよã†è©³ã—ã解説ã—ã¾ã™ã€‚ 対象者 対象者ã¯ä¸»ã«ã‚³ãƒ¼ãƒ€ãƒ¼ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã§ã™ã€‚ デザインã¨ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’åˆã‚ã›ã¦æ‹…当ã™ã‚‹Webデザイナーも対象ã§ã™ã€‚ コーダー・フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ Webデザイナー Webディレクター Web担当者 CSS Spriteã¨ã¯ Webサイトã§ã¯ã‚¢ã‚¤ã‚³ãƒ³ã‚„ナビゲーションãªã©ã«å¤šãã®ç”»åƒãŒä½¿ã‚ã‚Œã€ã‚µã‚¤ãƒˆã«ã‚ˆã£ã¦ã¯20個30個ã¨ãŸãã•ã‚“ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒä½¿ã‚
HTTPリクエストã®å‰Šæ¸›ã¨Webサイト高速化ã¾ã‚ã‚Š - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: ã“ã®è¨˜äº‹ã¯ã€3年以上å‰ã«æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚Webã®é€²åŒ–ã¯é€Ÿã„ï¼æƒ…å ±ã®æ£ç¢ºæ€§ã¯è‡ªå·±è²¬ä»»ã§åˆ¤æ–ã—ã¦ãã ã•ã„。 メモ書ã。社内説得用。「HTTPリクエストを減らã™ã¨é«˜é€ŸåŒ–ã§ãるよï¼ã€ã¦ã®ã¯ã‚ˆãèžãã‘ã©ã€ãã‚ŒãŒã€Œã©ã†ã—ã¦ã‹ã€ã£ã¦ã®ã‚’(èªè¾¼å¾…機時間ã¾ã‚ã‚Šã§)具体的ãªæ•°å—を出ã—ã¦ã‚‹ã“ã¨ãŒæ„外ã¨å°‘ãªã‹ã£ãŸã®ã§ã€‚詳ã—ãã¯å‚考リンクã«Go! Webサイトを分æžã™ã‚‹Webアプリ PageSpeed Insights WebPagetest å‚考資料ãªã© Webパフォーマンス最é©åŒ–ã®ãŸã‚ã®ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°æ‰‹æ³•, MOL @importを使ã†ã¹ãã§ãªã„ç†ç”±, Screw-Axis ã¾ãšHTTPリクエストãŒã‚³ã‚¹ãƒˆãŒé«˜ã„ç†ç”±ã§ã™ãŒã€ã¾ã‚åŒæ™‚èªè¾¼ã§ããªã„ã‹ã‚‰ã§ã™ã‚ˆã。èªè¾¼ã«1秒掛ã‹ã‚‹ç”»åƒA,B,CãŒã‚ã‚‹ã¨
コードã®åœ§ç¸®ã‚„外部ファイル化ã¨ãƒšãƒ¼ã‚¸ã®èªã¿è¾¼ã¿é€Ÿåº¦ã«ã¤ã„ã¦
ãªãœã€ã”ã¡ã‚ƒã”ã¡ã‚ƒã—ã¦ã‚‹ã®ã‹ï¼Ÿã±ã£ã¨æ°—ã¥ãã®ãŒã“ã®2点ã§ã™ã€‚ 改行やスペースãŒã»ã¨ã‚“ã©ä½¿ã‚ã‚Œã¦ã„ãªã„ CSSã‚„JavascriptãŒå¤–部化ファイル化ã•ã‚Œã¦ã„ãªã„ Googleã¨ã—ã¦ã¯ã‚½ãƒ¼ã‚¹ãŒãã‚Œã„ãªã“ã¨ã‚ˆã‚Šã‚‚ã€èªã¿è¾¼ã¿é€Ÿåº¦ã‚’速ãã™ã‚‹ã“ã¨ã§ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ã‚¹ãƒˆãƒ¬ã‚¹ã‚’軽減ã—ãŸã‚Šã€ãƒ•ã‚¡ã‚¤ãƒ«ã‚µã‚¤ã‚ºå°ã•ãã™ã‚‹ã“ã¨ã§ã‚µãƒ¼ãƒãƒ¼ã¸ã®è² è·ã‚’減らã—ãŸã‚Šã™ã‚‹ã“ã¨ã®æ–¹ãŒé‡è¦ã ã¨æ€ã„ã¾ã™ã€‚ ã‚‚ã¡ã‚んアップã™ã‚‹å‰ã«ã“ã®ã‚ˆã†ãªçŠ¶æ…‹ã«ã—ã¦ã„ã‚‹ã ã‘ã§ã€ãã‚Œã¾ã§ã¯ãã‚Œã„ã«æ›¸ã‹ã‚Œã¦ã„ã‚‹ã¯ãšã§ã™ãŒã€‚ ã¨ã„ã†ã“ã¨ã§ã€ã€Œã‚³ãƒ¼ãƒ‰ã®è»½é‡åŒ–ã€ã¨ã€Œå¤–部ファイル化ã€ã®2点ã«ã¤ã„ã¦è€ƒãˆã¦ã¿ã¾ã™ã€‚ コードã®è»½é‡åŒ–ã«ã¤ã„㦠HTMLã€CSSã€JavaScriptãªã©ã®ã‚³ãƒ¼ãƒ‰ã¯ã€æ”¹è¡Œã‚„スペースを使ã‚ãšã‚µã‚¤ã‚ºã‚’å°ã•ãã—ãŸæ–¹ãŒèªã¿è¾¼ã¿ã¯é€Ÿããªã‚Šã¾ã™ã€‚ ã“ã‚Œã¯å½“然ã§ã™ã。 コードã®è¦‹ã‚„ã™ã•ã‚ˆã‚Šã‚‚èªã¿è¾¼ã¿é€Ÿåº¦ã‚„サーãƒãƒ¼ã®è² 担軽減を優先ã™ã‚‹ãªã‚‰ã€ã§ãã‚‹ã ã‘ファイルを
HTMLã‚„CSSã§ã®ãƒ—ãƒãƒˆã‚³ãƒ«è¡¨è¨˜ï¼ˆhttp:ã€https:）ã®çœç•¥ã«ã¤ã„ã¦
HTMLã‚„CSSã§ã¯ãƒ—ãƒãƒˆã‚³ãƒ«è¡¨è¨˜ï¼ˆhttp:ã€https:）ã®çœç•¥ãŒå¯èƒ½ã§ã™ã€‚ ã¨ã„ã†ã“ã¨ã§ã€ãƒ—ãƒãƒˆã‚³ãƒ«è¡¨è¨˜ã®çœç•¥ã«é–¢ã™ã‚‹ã“ã¨ã‚’色々調ã¹ã¦ã¿ã¾ã—ãŸã®ã§ã€æœ¬ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã§ç´¹ä»‹è‡´ã—ã¾ã™ã€‚ ã“ã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã¯ã€ã€Œã€ŒGoogle HTML/CSS Style Guideã€ã‚’é©å½“ã«å’Œè¨³ã—ã¦ã¿ãŸã€ã®ä»¥ä¸‹ã®éƒ¨åˆ†ã«å¯¾ã—ã¦ã®ä¾¿ä¹—記事ã§ã™ã€‚ 埋ã‚è¾¼ã¿ãƒªã‚½ãƒ¼ã‚¹ã‹ã‚‰ãƒ—ãƒãƒˆã‚³ãƒ«è¡¨è¨˜ï¼ˆhttp:,https:）をçœç•¥ã™ã‚‹ã€‚ <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プãƒãƒˆã‚³
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}