Fractional pixels cause blurry text/lines when elements land on half-pixel boundaries (transforms, zoom, retina scaling).

Browser Performance

Subpixel rendering

<h2>Summary</h2>
<p>Sequential discovery → fetch → parse → execute chains (HTML discovers CSS, CSS discovers font, JS discovers chunk). Parallelize with preload/preconnect; avoid import chains in critical path. Network panel waterfall reveals hidden serial dependencies. SSR without streaming still waits for data before bytes ship.</p>
<h2>Code example</h2>
<pre><code class="language-html">&lt;link rel="preconnect" href="https://fonts.googleapis.com" /&gt;
&lt;link rel="preload" href="/bundle.js" as="script" /&gt;
&lt;!-- Avoid: CSS @import chains that serialize fetches --&gt;
</code></pre>
<h2>Key points</h2>
<ul>
<li>Sequential discovery → fetch → parse → execute chains (HTML discovers CSS, CSS discovers font, JS discovers chunk).</li>
<li>Parallelize with preload/preconnect; avoid import chains in critical path.</li>
<li>Network panel waterfall reveals hidden serial dependencies.</li>
<li>SSR without streaming still waits for data before bytes ship.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/critical-rendering-path/render-blocking-css">Discover network dependencies</a></li>
<li><a href="https://web.dev/articles/preconnect-and-dns-prefetch">Resource hints</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-3-render-blocking-resources">Render blocking resources</a></li>
<li><a href="/blogs/level-3-subpixel-rendering">Subpixel rendering</a></li>
</ul>


Sequential discovery → fetch → parse → execute chains (HTML discovers CSS, CSS discovers font, JS discovers chunk).

Render waterfalls

Parser-blocking scripts without `defer`/`async`, blocking CSS, sync font loading delay FCP/LCP.