Abhishek Singh Gaur’s Post

New: Enhanced Content-Visibility Detection Snippet for Web Performance to use it in Google Chrome DevTools Just updated the Content-Visibility snippet in webperf-snippets with comprehensive analysis tools and documentation. What's new: - Two analysis functions: One detects existing `content-visibility` usage, another walks the entire DOM to find optimization opportunities for offscreen elements - Configurable thresholds: Adjust distance from viewport, minimum height, and child count to fine-tune detection for any site - CLS prevention warnings: Alerts when `contain-intrinsic-size` is missing, which can cause layout shifts - Smart filtering: Automatically excludes nested elements, showing only parent containers - Practical guidance: How to choose the right height value for contain-intrinsic size based on content type `content-visibility: auto` is one of the most impactful CSS properties for rendering performance. It tells the browser to skip layout and paint work for offscreen content, reducing initial render time by hundreds of milliseconds on content-heavy pages. The snippet helps you: 1. Audit which elements already use `content-visibility` 2. Find offscreen elements that would benefit from it (with customizable options) 3. Get the measured heights needed for `contain-intrinsic-size` 4. Inspect detected elements directly in DevTools Check it out: https://lnkd.in/d8_qk3-a #WebPerf #WebPerfSnippets #PerfTools #Performance #CSS #DevTools

Recently, I was on a mission to improve the site performance and converted 50+ URLs from "Need Improvement" to "Good" on Google Search Console. The main issue was a high LCP score. Most of the time, preloading LCP images resolves this, but in my case, the element render delay was high. Debugging with Chrome DevTools revealed that the LCP image was loaded, but something else was blocking its rendering. The culprit was render-blocking stylesheets. Many stylesheets were not needed for the initial above-the-fold area, such as a stylesheet for a newsletter form placed in the footer. I gradually found and deferred all such stylesheets, ensuring only styles that required for the initial screen paint (critical CSS) are render-blocking. This significantly boosted the LCP and resulted in over 50+ "Good" URLs on Google Search Console. In conclusion, deferring non-critical styles to improve the LCP is effective. And if it's not possible to extract non-critical CSS, so you have to go stylesheet by stylesheet to fix the issue.

Do you use your scroll button of your mouse to open links in a new tab? 🤔 I do. 🖱️ What I hated was that on some websites, middle-clicking specific links does not open a new tab. It just loads the page in the current tab instead. To solve this issue, I developed a Chrome extension a few months ago. I have been using it daily since then. Today, I decided to share it with everyone: MiddleClick+🖱️ It restores standard browser behavior on modern Single Page Applications (SPAs). It detects when a site blocks the middle-click and forces the link to open in a new background tab. If you want to try it out or check the code, the link is below 👇 https://lnkd.in/dzk5sYkt #ChromeExtension #middleclick

Working on a custom web browser (research project). Over the past months, I've been building a browser engine from the ground up to better understand how modern browsers actually work. Current focus areas: • Custom HTML Tokenizer and Parser • DOM and layout engine (block / inline flow) • Text and element rendering on top of Skia • Basic interaction handling (e.g. anchors, URL previews) This is not a production ready browser and not intended to compete with existing engines. The goal is purely educational and research oriented: learning browser internals, rendering pipelines, and system level design by implementing them directly. Still a long way to go, but the fundamentals are coming together. GitHub Repo: https://lnkd.in/gZKsbVTd

🚀 Excited to share my first Chrome Extension: Console Organizer 🚀 After spending countless hours debugging in the browser console, I realized how cluttered and time-consuming it can get—especially in large applications. So I decided to build something useful 🚀 --- 🔧 What is Console Organizer? Console Organizer is a Chrome extension that helps developers quickly search, filter, and organize browser console logs without manual effort. --- ✨ Key Features ✅ Instantly filter console logs ✅ Search any text and get direct highlights ✅ No need to manually expand nested objects to find matching values ✅ Exact matched text is shown clearly in a panel ✅ Saves significant time during debugging and log analysis --- 🧭 How to Use 1. Open your website in Chrome 2. Right-click → Inspect (or press F12) 3. Navigate to the Console Organizer tab 4. Apply filters or search for any text 5. Matching logs are highlighted instantly 🎯 --- 🔗 Chrome Web Store Link 👉 https://lnkd.in/dEr5Tc_J --- 🔮 Future Plans for the Extension 🚧 Log grouping by type and source 🚧 Custom saved filters 🚧 Performance improvements for heavy console logs 🚧 Better UI and developer-friendly shortcuts --- This is just the beginning. I’d really appreciate feedback, suggestions, and feature requests from fellow developers 🙌 #ChromeExtension #WebDevelopment #JavaScript #DeveloperTools #Debugging #BuildInPublic #FirstExtension #IndieDev

Most ad blockers do a great job… until a website suddenly opens a new tab without your permission. That gap is what pushed me to build Tab Blocker Pro — my first Chrome extension designed to block unwanted tab openings that traditional ad blockers often miss. What Tab Blocker Pro does: 🚫 Blocks spammy pop-up tabs in real time 🧩 Works alongside existing ad blockers 🎨 Modern, minimal UI 🔢 Tracks how many tabs were blocked 🟢🟥 Icon changes color so you instantly know when it’s active Challenges & learnings: Building this taught me a lot about Chrome extension APIs, background scripts, permissions, and handling real-time UI updates (the notification counter was harder than expected). If you want to try it yourself or check out the code: 👉 GitHub: https://lnkd.in/edFJM8wX Feedback is always welcome 👇

Tech Tip Tuesday: Stop specific websites from slowing down your browser. If a certain site is making your computer lag or freeze, try this quick fix: Google Chrome/Edge: Click the Lock icon > Site settings > Change JavaScript to Block. Firefox: Click the Lock icon > Connection Secure > Turn off Blocking. This stops heavy background scripts from hogging your resources and freezing your system. #ComputerExpertAdelaide #TechTipTuesday #BrowserTips

Sharing this here: UE5 Shader Utils, it's a repo that has a few classes and functions that make running custom shaders in UE5 easier. It includes an example pixel and compute shader to see how I've gone about setting things up. It might not necessarily be the best way but I find this makes it fairly quick to get a new shader up and running. https://lnkd.in/e-ZhTJwU

So, you wanna build a Chrome extension - it all starts with a file. This file, called manifest.json, is kinda like the brain of the operation. It's what tells Chrome what your extension does, and how it's gonna do it. Simple as that. But, let's dive deeper - it's actually pretty cool. The manifest.json file is like a blueprint, outlining what your extension can and can't do on someone's browser. It's also what links all the different parts of your extension together, like the background service and the popup, making sure everything runs smoothly. For instance, take Guardium, a password protector - its manifest.json file has all the essentials. It's got a name, a short name, and a description, so you know what it does. It's also got version info, icons for different sizes, and a background service worker that kicks in when needed. And, it's got content scripts that inject into web pages, which is pretty handy. The manifest.json file is crucial, 'cause it ensures your extension is safe, works well, and follows the latest Chrome standards - which is a must, if you ask me. You can learn more about manifest.json and how it works with Chrome extensions, if you're interested. Check it out: https://lnkd.in/gHSzV9ng #ChromeExtensions #ManifestJson #ExtensionDevelopment

The Navigation API has landed in Firefox 147 (Experimental⁩) and Safari 26.2 this month.
 This is a game-changer for building SPAs. It's the modern successor to the History API, letting you intercept and handle all navigation in one central place: link clicks, form submissions, back/forward buttons. What has me excited: - The navigate event for unified routing control - Reliable methods like navigation.back(), forward(), traverseTo(key), and reload() - Built-in state persistence and proper scroll restoration I've been experimenting with it a little, and it’s really awesome.  Docs to dive in: https://lnkd.in/db3pFcwV