Avoiding Render-Blocking Resources

Stop guessing why your app is slow. Open DevTools and measure. Open the Performance tab, hit Record, and use your app: click, scroll, navigate, interact. Then stop the recording and inspect the timeline. You're looking for: - Long tasks (over 50ms) - Reflows and repaints - Scripts blocking the main thread These are the red flags. If you’re blocking rendering or constantly forcing layout recalculations, your app’s going to feel janky. Next, dive into the Flame Graph. Wide bars = expensive functions. These are your hotspots. Refactor them. Avoid blocking the UI. Break them into smaller, async chunks where you can. If it’s heavy and synchronous, it’s a problem. DOM reads and writes? Batch them. Reading layout properties like offsetWidth forces the browser to recalculate layout. Writing right after that (e.g., changing styles) forces it again. That’s a double reflow, and it adds up fast. To fix it group reads first, then writes.Trigger one reflow, not two. Memory usage matters too. If you haven’t taken a Heap Snapshot, you have no idea what’s lingering in memory. Detached DOM nodes, closures, abandoned observers, they all pile up over time. Leaks don’t crash your app, they slowly choke it. Long JavaScript tasks freeze the UI. If you're blocking the main thread for more than 50ms, you're locking out user interaction. Break those tasks apart: - Use setTimeout, requestIdleCallback, or Web Workers - Prioritize responsiveness over raw throughput Don’t load everything up front. If your initial bundle includes every image, every script, every component—you're forcing the browser to choke before it can render anything useful. To fix it - Lazy-load non-critical assets - Use <link rel="preload"> for essentials like fonts - Defer anything not needed for first paint DevTools isn’t optional, it’s a daily tool. You don't fix performance by guessing. You fix it by measuring.

How can I leverage my knowledge of browser internals to optimize frontend performance? More such questions: https://lnkd.in/gFzh8vV5 Leveraging Browser Internals for Frontend Performance Optimization Understanding how browsers process, render, and execute code allows you to make targeted improvements that measurably boost site speed and user experience. Here are actionable ways you can apply your knowledge: 1. Critical Rendering Path (CRP) Optimization Minimize the number of critical resources loaded before first paint by reducing CSS and JavaScript payloads. Defer or asynchronously load non-essential scripts so they don’t block DOM construction. Inline critical CSS to ensure above-the-fold content renders as soon as possible. 2. Efficient JavaScript Execution Avoid long-running JavaScript: Intensive work can block the main thread and delay input responsiveness. Break tasks into smaller chunks using requestIdleCallback or web workers for off-main-thread work. Use requestAnimationFrame for visual updates, ensuring smooth animations and timely screen repaints. 3. Reduce Layout Thrashing Batch DOM reads and writes: Access DOM properties (like offsetWidth) together, then perform DOM updates, to avoid forced synchronous reflows. Minimize frequent style recalculations: Apply CSS classes instead of multiple style changes, and avoid layout-triggering read/write cycles inside loops. 4. Optimize Paint and Composite Phases Limit paint areas: Change only the DOM elements that need updating. Use hardware-accelerated CSS properties (like transform and opacity) for smoother transitions, since they often avoid layout and paint steps. 5. Resource Loading Strategies Use "preload", "prefetch", and "dns-prefetch" to tell the browser about critical future resources early in the process. Leverage lazy loading for images and below-the-fold content to reduce initial load and rendering time. 6. Control Over JavaScript Event Loop Understand event loop behavior: Schedule expensive code with setTimeout, setImmediate, or as microtasks to avoid blocking crucial UI updates. Avoid blocking the main thread: Offload parsing, computation, or third-party scripts to web workers where possible. 7. Profiling and Measurement Utilize browser DevTools (Performance tab, Timeline, Lighthouse) to inspect: Main thread blocking time. Long tasks and their impact. Paint and render events. Bottlenecks in the CRP.

How to cut 3s from page load changing only a single keyword change (can use shopify script editor). I've personally seen this boost speed score by 10%. It's also one of the most important speed optimisations for CVR, since this affects first page load (FCP). Today's glossary: (I know, yawn - but important) - render blocking - main thread / UI thread - FCP It's not as scary as it looks, I promise. In 2 minutes, they'll all make sense and you'll be able to use them in a real conversation with real devs (from personal experience, feels extremely baller and totally worth the read). Although JS only makes up 8% (avg) of a page's file size, it's responsible for 40% of the load speed. This is because js runs on the 'main thread'. The main thread is your browsers 'task queue'. Some code languages can do multiple things at once, JS can not. Since there is only 1 task queue, it means tasks run in order (there are caveats, but generally it's single-file). The main thread (or UI thread) is responsible for: > downloading / parsing css + html > painting the page (the UI) (important for this post 👇 ) > downloading / parsing js > executing js (keyword coming! Trust me, but this is important) Which brings us to an important concept. 'Render blocking'. This is when your page can't display (render) to the user - because it's blocked by another task. Like downloading / running your JS. The reason the browser downloads files before rendering the HTML is because it assumes they're needed for first paint. Which is sensible, because lots of JS can update your page. However, our job, is to tell the browser which files we DON'T need for first paint. This is where our 'defer' keyword comes in. DEFER - there, I said it. By adding the "defer" keyword to your scripts, you can let the browser know - "we don't need them yet, paint the page first". Magic. See reference here: https://lnkd.in/eXAFDNCS. Downloads still take the same amount of time, but the difference is that the user doens't have to wait for them to load. They can see the page, images load, and you can scroll. A lot of load speed is psychological, and staring at a blank screen for 5 seconds is much worse than a page displaying in 1s, but maybe having a load icon over the cart icon (or some fancy feature CTA) for a few seconds. Things to defer: (these won't change until user interaction - which will be at least a few seconds after load) > cart scripts > currency converters > carousels Things not to defer: (if it can been seen immediately or it's important data you need to capture) > tracking scripts > CSS that is used above the fold > fonts above the fold Some render blocking scripts are fine, but try keep it below 4/5. This is how you boost your FCP score. De-prioritising what the user doesn't see. It's the same code, you're not losing anything, it's just organised for visuals first. It makes all the difference! Try it! If you got this far, you're curious and dedicated. You're going places!

"How JavaScript is parsed, fetched and executed" JavaScript can be executed in different modes, primarily distinguished as classic scripts and module scripts. The behavior of these scripts is influenced by specific attributes - async, defer, nomodule to name a few. Classic Scripts By default, scripts are render-blocking, meaning the browser won't display any page content until the script has finished executing. This can slow down the loading of web pages. The async and defer attributes can be used to tell the browser that a script doesn't need to run immediately, and the browser can continue to process the rest of the page while the script loads. When present, the async attribute allows the script to be fetched in parallel to the HTML parsing process. The script gets evaluated as soon as it's available, but before the window's load event. This non-blocking behavior can help with improving page load times. Conversely, if the async attribute is absent but defer is present, the script still fetches in parallel but waits until the entire page is parsed before executing. This ensures that the script runs with full knowledge of the DOM but doesn't hinder the parsing process. In the absence of both async and defer, the script turns into a blocking resource. It's fetched and executed immediately, pausing the parsing process until these steps are complete. Module Scripts Module scripts, a newer standard, exhibit slightly different behavior. If async is specified, both the module script and its dependencies are fetched in parallel to the parsing, with execution happening as soon as possible. Without async, the fetching still occurs alongside parsing, but execution waits until parsing is complete. Notably, the defer attribute has no effect on module scripts. Mathias Bynens and I wrote about JS Modules in much more detail over here: https://lnkd.in/gmw_q7DD The Role of nomodule and crossorigin Attributes The nomodule attribute serves a compatibility function. It prevents the script from executing in browsers that support module scripts, enabling a fallback to classic scripts in older browsers. It's a way to write code that selectively executes depending on the user agent's capabilities. Understanding Attribute Combinations It's important to note that these attributes are not mutually exclusive and can be combined for nuanced behaviors. For instance, specifying both async and defer in a classic script enables legacy browsers that support only defer to fall back to this behavior, avoiding the default blocking mode. In summary, the efficient parsing, fetching, and execution of JavaScript hinge on understanding and correctly using these script attributes. There are of course JavaScript engine specifics worth keeping in mind, which we've also written about: https://lnkd.in/g72tCXuJ. DebugBear also has a great write-up on this topic: https://lnkd.in/gSurVygw #programming #developers #performance

Ever wondered how <script>, async, and defer actually impact your page load? This visual sums it up perfectly: 🟩 = HTML Parsing 🟦 = Script Downloading 🟥 = Script Execution ⬜ = Parsing paused 👉 Without any attribute (<script>) HTML parsing pauses to download and run the script. Blocking behavior = Slower load. 👉 With async Script downloads in parallel and runs as soon as it’s ready, pausing parsing momentarily. Fast but unpredictable execution order. 👉 With defer Script downloads in parallel without blocking, and executes only after HTML parsing finishes. Best for structured execution. Takeaway: If your script doesn’t need to block rendering (like analytics or features not critical to first paint), always use defer or async. Which one do you use most often in your projects? Let’s discuss! #WebDevelopment #Performance #HTML #JavaScript #FrontendTips

As a Frontend developer it is also important to prioritize performance optimization to ensure the web applications load quickly and provide a smooth user experience. Here's a breakdown of key techniques used for frontend performance optimization: Minification and Compression: Minification involves removing unnecessary characters (such as whitespace, comments, and unused code) from source files to reduce file size. Compression techniques like gzip or Brotli further reduce file sizes by compressing text-based resources like HTML, CSS, and JavaScript before transmitting them over the network. Smaller file sizes lead to faster download times and improved page loading speed. Image Optimization: Images often contribute significantly to page weight and load times. Optimizing images by compressing them without sacrificing quality, using appropriate image formats (such as WebP or JPEG XR), and implementing responsive image techniques (like srcset and sizes attributes) can dramatically improve performance. Additionally, lazy loading techniques delay the loading of off-screen images until they are needed, reducing initial page load times. Caching Strategies: Implementing caching strategies like browser caching, CDN caching, and server-side caching can reduce server load and speed up subsequent page loads. Leveraging HTTP caching headers such as Cache-Control and Expires allows browsers and intermediaries to store and reuse previously fetched resources, minimizing network requests. Asynchronous Loading: Loading JavaScript and CSS files asynchronously prevents them from blocking the rendering of the page, allowing critical content to display faster. Techniques like defer and async attributes for script tags and media attributes for stylesheet links enable asynchronous loading while ensuring proper execution order and avoiding render-blocking behavior. Code Splitting and Bundle Optimization: Code splitting involves breaking down large bundles of JavaScript or CSS code into smaller, more manageable chunks that can be loaded on-demand. Tools like Webpack offer features for code splitting, tree shaking (removing unused code), and optimizing bundle size, helping reduce initial load times and improve runtime performance. Critical Path Optimization: Identifying and optimizing the critical rendering path, which includes the resources necessary to render the initial view of a webpage, is crucial for improving perceived performance. Prioritizing the loading of critical resources (such as CSS and JavaScript required for above-the-fold content) and deferring non-essential resources can accelerate the time to first meaningful paint and enhance user perception of speed. #frontenddevelopment #performanceoptimization #webdevelopment #javascript

This is #GTM. Simple, right? Well, multiple sites that I audited just this week are doing it wrong 👻 This is what you see: 1️⃣ A (render blocking) resource. In this example it's a stylesheet. And after that comes: 2️⃣ An inline GTM script as used by many sites - probably yours too ;) But there are now 2 issues here: 1️⃣ In this setup, GTM will be executed late(r) in time This results in missing pageviews from visitors that abandoned the pageload early in time as the GTM+analytics didn't had the chance to collect them. → Your analytics + bounce rate will turn out to be skewed. → So, expect a more correct number when addressing this. 2️⃣ Browsers will now act differently towards following async + defer scripts → Their download will now be delayed as well. → This behaviour might especially impact #UX (and potentially #CoreWebVitals too) pages with uncached resources (such as #LCP image). 𝐖𝐡𝐲? This is happening because browsers don't know the developer/theme's intent. So they're playing it safe in case the JS needs to manipulate CSSOM. But now, the inline script 2️⃣ is only executed (and thus fetched) after the CSS 1️⃣ is fully downloaded (and parsed + CSSOM is constructed). 𝐈𝐬 𝐭𝐡𝐢𝐬 𝐚 𝐛𝐢𝐠 𝐝𝐞𝐚𝐥? Maybe not a 'noticeable' issue on portfolio sites with few visitors. But we all know how bloated the <head> can become on bigger sites. From Laravel to WP and BigCommerce to Shopify. That will then make the above side effects even worse. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐭𝐡𝐞 𝐟𝐢𝐱? As the above regressions apply to all inline scripts, you should want to check your site and address this. Then decide per script: → reposition important inline <script>s just after the closing </title> element (*) → or move it to the footer → or if it doesn't need dynamic logic, then change it into a <script async src="..."></script> (*) easiest to remember and there's typically (and shouldn't be) no resources before the <title>

🚀 Quick Performance Tip! Cookie Consent Managers I've written about this before, but during recent audits, it's still a common issue: Despite many Cookie Consent providers advising to sync load scripts early in the <head> tag, this can seriously impact your website's performance. When a 3rd party script loads synchronously, it halts the browser, potentially leaving users with a blank screen if the server is slow or down. What to do instead: 1️⃣ Use asynchronous loading with fetchpriority="high": This allows the browser to continue loading other other, more critical, render-blocking resources while the script loads in the background (see attached image). 2️⃣ Self-host cookie-consent script: This gives you more control and reduces connection times to different servers. Implementing these alternatives will improve both First Contentful Paint (FCP) and Largest Contentful Paint (LCP), resulting in a smoother, faster user experience. #webperformance #webperf #pagespeed #corewebvitals #cookieconsent

Devs, we need to talk about this urge you have to place svg data URI's in your stylesheets! You have just cost this site a full second of extra waiting time for each new visitor by placing all your icons as image/svg+xml images in your stylesheet. DO NOT DO THIS! Stylesheets are render blocking. That means that while the browser is downloading stylesheets the page will remain blank. You adding 10kB of svg's to a stylesheet is going to make downloading slower! Just use the image tag! It (usually) is that simple!