表示速度を飛èºçš„ã«å‘上ã•ã›ã‚‹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
ãƒ•ãƒªãƒ¼å†™çœŸç´ æ Futta.NET - ç„¡æ–™ã®é¢¨æ™¯ãƒ•ãƒªãƒ¼ç”»åƒ
ã€éšæ™‚è¿½åŠ ã€‘å…¨éƒ¨ç„¡æ–™ã§ä½¿ç”¨ã§ãã‚‹ãƒ•ãƒªãƒ¼ç´ ææ供サイト特集 | LIG LIBRARY | æ ªå¼ä¼šç¤¾LIG
{{#tags}}- {{label}}
{{/tags}}