HTML Performance and Safety
What Is It?
A good page loads useful content quickly and handles text safely.
What the Tags Mean
loading="lazy": delays an image until it is near the visible page.widthandheight: reserve image space.defer: runs an external script after HTML parsing.textContent: inserts text without treating it as HTML.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Performance and Safety</title>
</head>
<body>
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESample%20garden%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Our garden" width="600" height="400" loading="lazy">
</body>
</html>Browser preview
What you see: The browser knows how much space to leave for the picture. Lazy loading is useful for images farther down a page.
Example 2: Another Use
When JavaScript displays someone’s text, use textContent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Performance and Safety</title>
</head>
<body>
<p id="message"></p>
<script>
document.getElementById("message").textContent = "<strong>Hello</strong>";
</script>
</body>
</html>Browser preview
Simple Tip
The second example shows the tag text instead of making it bold. Do not lazy-load the main image at the top of the page.
Try It Yourself
Give one of your images its correct width and height.