表示速度を飛èºçš„ã«å‘上ã•ã›ã‚‹HTML/CSS最新仕様「content-visibilityã€ã€ŒLazy loadingã€ã€Œcontainã€ã‚’コード付ãç°¡å˜è§£èª¬ã“ã‚Œã¾ã§ã¯JavaScriptを用ã„ã¦å®Ÿè£…ã™ã‚‹ã—ã‹ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸãŒã€ã¤ã„ã«imgã‚„iframeè¦ç´ ã§ã‚ã‚Œã°loading="lazy"を付与ã™ã‚‹ã ã‘ã§ã€ç°¡å˜ã«å®Ÿè£…ã§ãã¾ã™ã€‚ <!-- ç”»åƒã«é©ç”¨ã™ã‚‹å ´åˆ --> <img src="pic.png" alt="ç”»åƒã®è©³ç´°" loading="lazy"> <!-- iframeã«é©ç”¨ã™ã‚‹å ´åˆ --> <iframe src="external.html" loading="lazy"></iframe>ç”»é¢å¤–ã§ã¯èªã¿è¾¼ã¿ãŒç™ºç”Ÿã—ãªã„ã®ã§ã€å¿…è¦ã«ãªã£ãŸæ™‚（画é¢å†…ã«è¦ç´ ãŒå…¥ã‚Šãã†ã«ãªã£ãŸæ™‚）ã«èªã¿è¾¼ã¿ãŒç™ºç”Ÿã™ã‚‹ã®ã§ãƒ‘フォーマンスãŒå‘上ã—ã¾ã™ã€‚ ã¾ãŸç”»åƒã«ã¤ã„ã¦ã¯srcsetを用ã„ãŸãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–ãªç”»åƒã«å¯¾ã—ã¦ã‚‚指定ã§ãã¾ã™ã—ã€pictureè¦ç´ を用ã„ã¦fallbackå½¢å¼ã§ã‚‚記述ã§ãã¾ã™ã€‚ <img src="normal.png" srcse
ウェブフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®ãƒ‘フォーマンス改善ã®ã²ã¨ã¤ã®æ—¥å¸¸ - kitak blog
ブラウザã«ã‚„ã•ã—ã„HTML/CSS
Gree Fast Processor: PHPã‚’3å€(ãらã„)速ã | GREE Engineering
{{#tags}}- {{label}}
{{/tags}}