0Pricing
Web Performance Optimization & Lighthouse · Lekcja

Zasoby blokujące renderowanie

Identyfikuj i ograniczaj wpływ blokujących renderowanie arkuszy CSS i kodu JavaScript na początkowy czas ładowania strony.

Zasoby blokujące renderowanie to bezpłatna lekcja Web Performance Optimization & Lighthouse na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Performance Optimization & Lighthouse, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Zasoby blokujące renderowanie” jest bezpłatna?

Tak — pełny tekst „Zasoby blokujące renderowanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Performance Optimization & Lighthouse, przejdź na CoddyKit PRO. Kurs Web Performance Optimization & Lighthouse zawiera 4 lekcji w sumie.

Co nauczysz się w „Zasoby blokujące renderowanie”?

Identyfikuj i ograniczaj wpływ blokujących renderowanie arkuszy CSS i kodu JavaScript na początkowy czas ładowania strony. Ćwiczysz Web Performance Optimization & Lighthouse z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Web Performance Optimization & Lighthouse?

Nie wymagamy żadnego doświadczenia. Web Performance Optimization & Lighthouse w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Zasoby blokujące renderowanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Web Performance Optimization & Lighthouse?

Tak. Każda lekcja Web Performance Optimization & Lighthouse zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zrozumienie ścieżki krytycznej
  2. Zasoby blokujące renderowanie
  3. Priorytetyzacja treści pod kątem szybkości
  4. Wstępne ładowanie i wskazówki dotyczące zasobów
← Powrót do Web Performance Optimization & Lighthouse