Learning HTML - HTML Performance Optimization and Mobile Accessibility

#Introduction

On mobile networks, every kilobyte and every request counts. Episode 21 covers HTML performance optimization and mobile accessibility: preconnect and preload, script loading with defer and async, images with loading="lazy", and comfortable text sizes and touch targets.

A fast page is part of accessibility. Long load times are unfair to users with older devices or limited networks — optimizing HTML means treating them equally.

#Loading Assets Faster

#preconnect and preload

preconnect opens a connection to a third-party origin early; preload fetches important assets that haven't been requested yet:

Preconnect and preload

<link rel="preconnect" href="https://cdn.contoh.id">
<link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/inter.woff2">

Fonts are the best preload candidates — without it, text often waits for the font to load. Don't preload everything; preload only assets critical above the fold.

#defer and async for Scripts

Blocking scripts slow down rendering. defer runs a script after the document is parsed; async runs it as soon as it's downloaded:

Loading scripts without blocking

<script src="js/analitik.js" async></script>
<script src="js/aplikasi.js" defer></script>

For scripts that modify the page, use defer so order is preserved. For standalone scripts like analytics, async is faster. Neither delays HTML rendering.

#Lightweight Images

#loading lazy and decoding async

Below-the-fold images don't need to load at the start. Mark them to load as they near the viewport:

Lazy image

<img src="galeri.png" alt="Karya siswa" loading="lazy" decoding="async" width="640" height="480">

loading="lazy" delays the download until the image is nearly visible; decoding="async" lets the browser finish rendering while processing the image. Include width and height so the layout doesn't jump.

#Avoiding Giant Images

A 3000-pixel image displayed at 300 pixels wastes data. Prepare versions matching the display size and combine them with srcset as in episode 20.

#Accessibility on Small Screens

#Minimum Text Size

Text that's too small gets zoomed by users and breaks the layout. Keep the base text size comfortable:

Base text size

html {
  font-size: 100%;
}
 
body {
  font-size: 1rem;
  line-height: 1.5;
}

font-size: 100% respects the user's font size settings; rem follows that value. This makes user zoom work as it should.

#Comfortable Touch Targets

A finger is much larger than a cursor. Touch targets of at least 44 by 44 pixels avoid mis-taps:

Touch targets

.tombol {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

Also add space between targets so a finger doesn't press two buttons at once. Empty space isn't waste — it's comfort.

#Exercise: Auditing a Mobile Page

Inspect a production page's response headers from the terminal:

curl -sI https://contoh.id

The command curl -sI https://contoh.id shows only the headers. Pay attention to content-type, content size, and the response status to judge how lightweight the served page is.

#Common Mistakes and Solutions

#Excessive Preload

Emitting many preload tags makes the browser busy downloading without order. Limit it to two or three critical assets.

#Lazy for Above-the-Fold Images

The first visible image shouldn't be lazy — that only delays its load. Apply loading="lazy" to below-the-fold images.

#Closing

Episode 21 makes your pages fast and comfortable on phones: preconnect and preload for critical assets, defer and async for scripts, lazy images, and friendly text and touch targets.

Key takeaways:

• preconnect opens an early connection; preload loads critical assets.
• defer preserves script order; async loads standalone scripts.
• loading="lazy" and decoding="async" lighten below-the-fold images.
• Base text size uses rem so it follows user settings.
• Touch targets of at least 44 pixels prevent mis-taps.
• Check response headers with curl -sI.

In the next episode, episode 22, we'll cover progressive enhancement and fallback content — the three web layers, feature degradation strategies, and how to ensure content always reaches users even when JavaScript or new formats fail.