Best of Google Chrome — July 2025

1. 1
   Article

   Hacker News·42w

   Make any website load faster with 6 lines of HTML

   Chrome's Speculation Rules API enables near-instant page navigation by preloading and prerendering pages with just a few lines of HTML. The API supports prefetch (downloads HTML only) and prerender (fully renders pages in background) with configurable eagerness levels. While only supported in Chrome 121+, fallback JavaScript can provide similar functionality for Firefox and Safari using traditional prefetch/preload techniques with hover detection.

   241

   14
2. 2
   Article

   Chrome Developers·47w

   CSS conditionals with the new if() function

   Chrome 137 introduces the CSS if() function, enabling inline conditionals for dynamic styling. The function supports style(), media(), and supports() queries, allowing developers to write conditional logic directly within CSS properties instead of using separate @media or @supports blocks. Examples include responsive button sizing based on pointer type, color space fallbacks, and state-based styling using data attributes. This feature provides a cleaner architectural approach by keeping styling logic inline rather than scattered across multiple CSS blocks.

   92

   9
3. 3
   Article

   Lobsters·45w

   Don't animate height!

   A CSS height animation was causing 60% CPU and 25% GPU usage in an Electron app. The issue stems from height being a layout property that triggers expensive layout recalculation, painting, and compositing on every frame. The solution involves replacing height animations with transform-based animations using translate and multiple elements to create the same visual effect, reducing CPU usage from 15% to 6% and GPU usage to less than 1%.

   41

   5
4. 4
   Article

   LogRocket·43w

   How I debug faster with these Chrome DevTools Console features

   Chrome DevTools console offers powerful debugging features beyond traditional breakpoints that can significantly improve developer productivity. Key utilities include shorthand DOM selectors ($, $$), element references ($0-$4), function monitoring (monitor(), debug()), event tracking (monitorEvents()), and live expressions for real-time variable monitoring. These console features provide faster alternatives to breakpoint-based debugging, enable automation through snippets, and offer better workflow efficiency for JavaScript developers working on web applications.

   13
5. 5
   Article

   Angular·47w

   The Angular Custom Profiling Track is now available

   Angular v20 introduces a new custom profiling track in Chrome DevTools that unifies Angular-specific performance data with Chrome's performance panel. The integration provides color-coded flame charts showing components, lifecycle hooks, and dependency injection services, making it easier to identify performance bottlenecks. Developers can enable this feature by running ng.enableProfiling() in the console while using Angular in development mode.

   12