Web Performance Optimization & Lighthouse · Ders

Oluşturmayı Engelleyen Kaynaklar

Oluşturmayı engelleyen CSS ve JavaScript'in ilk sayfa yükleme süreleri üzerindeki etkisini belirleyip azaltın.

Oluşturmayı Engelleyen Kaynaklar, CoddyKit'te ücretsiz bir Web Performance Optimization & Lighthouse dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Performance Optimization & Lighthouse öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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!

Sıkça Sorulan Sorular

“Oluşturmayı Engelleyen Kaynaklar” dersi ücretsiz mi?

Evet — “Oluşturmayı Engelleyen Kaynaklar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Performance Optimization & Lighthouse kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Performance Optimization & Lighthouse kursu toplamda 4 dersten oluşur.

“Oluşturmayı Engelleyen Kaynaklar” dersinde ne öğreneceğim?

Oluşturmayı engelleyen CSS ve JavaScript'in ilk sayfa yükleme süreleri üzerindeki etkisini belirleyip azaltın. Web Performance Optimization & Lighthouse ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Web Performance Optimization & Lighthouse öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Web Performance Optimization & Lighthouse, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Oluşturmayı Engelleyen Kaynaklar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Web Performance Optimization & Lighthouse dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Web Performance Optimization & Lighthouse dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Web Performance Optimization & Lighthouse Sayfasına Dön