Middle

Τι είναι η προοδευτική απόδοση;

sobes.tech AI

Απάντηση από AI

Progressive rendering is a technique for optimizing the speed of loading and displaying a web page, where content is loaded and displayed in stages rather than all at once.

Its main advantages:

Faster rendering of the first meaningful content (First Meaningful Paint).
Improved perception of loading speed by the user.
Reduction in time to interactivity (Time to Interactive).

Main techniques of progressive rendering include:

Lazy Loading: Delaying the loading of non-essential resources (such as images or videos) until they are needed by the user (until they scroll to them).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Example image" loading="lazy">
```

Server-Side Rendering (SSR): Generating the HTML page on the server and sending the pre-rendered content to the browser.

// Example of using a framework for SSR (e.g., Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Fetch data on the server
//   const data = await fetchData();
//   return {
//     props: { data }, // Passing data to the component
//   }
// }
//
// function MyPage({ data }) {
//   // Rendering component with data
//   return <div>{/* ... */}</div>
// }

Client-Side Rendering (CSR) with hydration: The browser receives minimal HTML and JavaScript. JavaScript then loads data and fully renders the page in the browser. Hydration is the process of attaching event handlers to the already rendered SSR content on the client.

Streaming HTML: Sending HTML in parts as it is generated on the server, allowing the browser to start parsing and rendering before the entire document is loaded.

<!-- Hypothetical streaming example -->
<html>
  <head>
    <title>Streaming page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Part of HTML sent first -->
    <h1>Title</h1>
    <script src="script.js" async></script>
    <!-- Rest of HTML can be sent later -->
  </body>
</html>

Critical CSS / Inline Critical CSS: Inline embedding of CSS styles necessary for rendering the visible part of the page (Above the Fold) to speed up initial rendering. Other styles are loaded asynchronously.

Technique	Description	Advantages	Disadvantages
Lazy Loading	Delayed loading of resources outside the visible area	Faster loading of visible content	May require JavaScript for implementation
SSR	Server-side rendering, sending ready HTML	Fast rendering of the first content, SEO-friendly	Increases server load
CSR with hydration	Initial rendering on the client with subsequent hydration of SSR content	Dynamic applications	Slow loading and interactivity without SSR
Streaming HTML	Sending HTML in parts	Rapid start of parsing	Depends on server implementation
Critical CSS	Inline embedding of styles for the visible part	Fast rendering of the visible part	Requires tools for extracting critical CSS

Progressive rendering is a combination of these and other techniques aimed at improving user experience by speeding up the rendering of the web page.

Προηγούμενος Επόμενο