Web Performance Optimization & Lighthouse · Pelajaran

Sumber Daya yang Menghambat Rendering

Identifikasi dan kurangi dampak CSS dan JavaScript yang menghambat rendering terhadap waktu pemuatan halaman awal.

Sumber Daya yang Menghambat Rendering adalah pelajaran Web Performance Optimization & Lighthouse gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Performance Optimization & Lighthouse, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Performance Optimization & Lighthouse mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

What Blocks Your Page?

When a browser loads a webpage, it needs to process various resources like HTML, CSS, and JavaScript. Sometimes, certain resources must be fully processed before the browser can start showing any content to the user.

These are called render-blocking resources. They prevent the browser from rendering the page until they are dealt with, delaying the 'First Contentful Paint'.

Quick Look: Browser Rendering

To display a page, the browser goes through a series of steps called the Critical Rendering Path. Key steps include:

Parsing HTML: Builds the Document Object Model (DOM).
Parsing CSS: Builds the CSS Object Model (CSSOM).
Combining: Creates the Render Tree (DOM + CSSOM).
Layout: Calculates positions and sizes of elements.
Paint: Draws pixels on the screen.

Both the DOM and CSSOM are needed before the Render Tree can be built, making CSS a critical part of rendering.

CSS: The Render Blocker

By default, external CSS files are render-blocking. This means the browser will pause rendering until all external stylesheets linked in the <head> of your HTML are downloaded, parsed, and applied.

This is crucial because the browser needs to know how elements should look before it can paint them correctly. If CSS takes a long time to load, your users will see a blank screen for longer.

Example: Default CSS Blocking

Consider this simple HTML. The browser will stop parsing the HTML and wait for style.css to download and be processed before it can render anything.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

Conditional CSS with `media`

You can make some CSS non-render-blocking by using the media attribute in your <link> tag. This tells the browser that a stylesheet only applies under certain conditions (e.g., for print, or specific screen sizes).

If the media condition doesn't match the current viewing environment, the browser will still download the CSS, but it won't block the initial render.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Inline Essential Styles

Another strategy to mitigate render-blocking CSS is to inline critical styles. These are the minimal CSS rules needed to render the 'above-the-fold' content (what users see first).

By placing these styles directly within a <style> tag in the HTML <head>, the browser doesn't need to make an extra network request, speeding up the initial render. Remaining, non-critical CSS can be loaded asynchronously.

JavaScript Stops Everything

Just like CSS, JavaScript can also be render-blocking. When the browser encounters a traditional <script> tag (without async or defer attributes), it pauses HTML parsing.

It then downloads, parses, and executes the JavaScript file. Only after the script has finished executing will HTML parsing resume. This can significantly delay rendering.

Example: Default JS Blocking

Here, the browser will pause parsing the HTML document when it hits script.js. If script.js is large or slow to load, the <h1> and <p> elements will not be parsed or rendered until the script is done.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

`async` & `defer` for Scripts

HTML offers two attributes for <script> tags to prevent JavaScript from blocking rendering:

async: Downloads the script in parallel with HTML parsing. Executes as soon as it's downloaded, potentially before HTML parsing is complete. Good for independent scripts.
defer: Downloads the script in parallel with HTML parsing. Executes only after HTML parsing is fully complete, but before the DOMContentLoaded event. Preserves execution order.

Code Example: Non-Blocking JS

By adding async or defer, the browser can continue parsing HTML while the scripts download. This improves perceived performance.

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

Spot the Blocker!

Which of the following resources are commonly considered render-blocking by default?

Key Takeaways

Render-blocking resources delay the display of your webpage. Both external CSS and traditional JavaScript can block the browser's rendering process.

For CSS: Use the media attribute for conditional loading and consider inlining critical styles.
For JavaScript: Leverage async for independent scripts or defer for scripts that depend on the DOM, to allow parallel downloading and non-blocking execution.

Optimizing these resources is a crucial step towards faster web performance!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sumber Daya yang Menghambat Rendering” gratis?

Ya — teks lengkap “Sumber Daya yang Menghambat Rendering” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Performance Optimization & Lighthouse, upgrade ke CoddyKit PRO. Kursus Web Performance Optimization & Lighthouse mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Sumber Daya yang Menghambat Rendering”?

Identifikasi dan kurangi dampak CSS dan JavaScript yang menghambat rendering terhadap waktu pemuatan halaman awal. Kamu berlatih Web Performance Optimization & Lighthouse dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Web Performance Optimization & Lighthouse?

Tidak diperlukan pengalaman sebelumnya. Web Performance Optimization & Lighthouse di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Sumber Daya yang Menghambat Rendering” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Performance Optimization & Lighthouse ini?

Ya. Setiap pelajaran Web Performance Optimization & Lighthouse menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Web Performance Optimization & Lighthouse