Topic: HTML

Largest Contentful Paint (LCP) is one of the most important Core Web Vitals and a direct ranking factor in Google Search. While images and hero banners are often blamed for slow rendering, many websites face the opposite challenge: the LCP is triggered by the H1 or a large textual block. When text is the largest element above the fold, its render path depends on font loading, CSS application, and server delivery. Even a small delay in any of these steps can compromise LCP and negatively affect both SEO and user experience. Quick fixes like changing the font or installing a cache plugin don’t address the root of the problem. To solve LCP issues in text, you need to optimize the font pipeline, configure font-display, implement Critical CSS, and decide whether fonts should be hosted locally or delivered via Google. Example of LCP on H1 element Estratégias superficiais como simplesmente trocar a fonte ou instalar um plugin de cache não resolvem a raiz do problema do LCP no H1. É necessário pensar em pipeline de fontes, configuração de font-display, Critical CSS e decisões arquitetônicas sobre onde hospedar os arquivos. The role of fonts in LCP Font loading is often the main bottleneck when the H1 defines the LCP. Using Google Fonts in their default setup adds external requests and network latency. Hosting fonts locally eliminates this dependency and allows better compression and control. Font optimization strategies StrategyAdvantageRisk/ObservationGoogle Fonts defaultEasy to implementExtra latency on every requestGoogle Fonts with display=swapText appears quickly with fallbackMay cause FOUT (flash of unstyled text)Self-hosted (server)Reduces latency and relies only on your environmentRequires version control and compressionPreload critical fontsEnsures top priority for the H1 fontOveruse can block other resources Critical CSS and early rendering In many cases, the delay is not in the fonts but in heavy CSS files blocking render. Critical CSS solves this by inlining only the styles needed to render the H1 and other key elements, while loading the rest of the stylesheet asynchronously. Best practices: Inline the critical CSS in the . Load the full CSS asynchronously with media="print" + onload. Use tools such as Penthouse or Critical to automate CSS extraction. Example: Preload fonts (self-hosted or Google Fonts with adjustments) HTML HTML What happens here: The browser connects early to the font server (preconnect). The H1 font is downloaded with priority (preload). display=swap ensures the headline appears quickly with a fallback font while the custom font finishes loading. Exemplo de Critical CSS inline + CSS assíncrono HTML h1 { font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 2.5rem; color: #111; margin: 0; } h1 { font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 2.5rem; color: #111; margin: 0; } HTML What happens here: The browser can already render the H1 immediately with the critical styles. The full CSS is downloaded in parallel but only applied afterward (media=print hack). If the user has JavaScript disabled, the fallback ensures normal loading. Advanced tip: smart font fallback Always define a fallback font chain for your H1: HTMLh1 { font-family: 'Mulish', 'Segoe UI', Roboto, Arial, sans-serif; }h1 { font-family: 'Mulish', 'Segoe UI', Roboto, Arial, sans-serif; }HTML If the custom font is delayed, the browser uses a system font, preserving visual consistency and reducing LCP impact. Checklist to avoid LCP issues in text Self-host fonts whenever possible. Use WOFF2 + Brotli compression. Configure font-display=swap or optional. Preload fonts used in the H1 or first viewport. Inline Critical CSS for key elements. Load non-critical CSS asynchronously. Validate results in Lighthouse and CrUX field data. FAQ about LCP on H1 or texts elements What is LCP and why does it matter for SEO? LCP measures the time it takes for the largest visible element in the viewport to render. It is part of Google’s Core Web Vitals and directly affects ranking and user experience. Should I always use display=swap in Google Fonts? In most cases, yes. It ensures the text is displayed immediately with a fallback, even if the custom font takes longer to load. Is it better to host fonts on Google or my own server? Self-hosting is usually faster because it removes external requests. Just remember to use compression and preload. Is Critical CSS mandatory? Not mandatory, but highly recommended. It can significantly reduce LCP, especially on sites with heavy stylesheets.

Topic: HTML

Latest posts

How to Fix LCP Issues in H1 or Textual Elements

Core Web Vitals: A Guide to Bookmark in Your Browser