A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore image dimensions and cumulative layout shift using a short example that you can inspect and change.
The Idea in Plain English
HTML affects loading speed through resource discovery, image dimensions, script loading and page structure. Measure first; then change the few resources that actually slow the page.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/site.css">
<script defer src="/scripts/site.js"></script>
</head>
<body>
<img src="/images/lesson.jpg" alt="Open notebook"
width="640" height="360" loading="lazy">
</body>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The link element declares a relationship such as a stylesheet or alternate language.
- The script element can load code or hold data; the type attribute tells the browser how to treat its contents.
- name identifies a field in submitted form data or a named metadata entry.
- content supplies the value of a meta declaration.
- width reserves the image or embedded resource’s intended horizontal dimension.
The browser may transfer fewer bytes, draw content sooner and shift the layout less as resources arrive.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: demonstrate a safe and an unsafe snippet and validate behavior focused on Image Dimensions and Cumulative Layout Shift, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Adding many loading hints without checking browser Network and Performance tools.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- HTML affects loading speed through resource discovery, image dimensions, script loading and page structure. Measure first; then change the few resources that actually slow the page.
- The browser may transfer fewer bytes, draw content sooner and shift the layout less as resources arrive.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.