Modern search engine optimization (SEO) has evolved to prioritize the technical user experience. Google actively evaluates how a page behaves using Core Web Vitals (performance) and how easily a user with disabilities or crawling bots can read the page (accessibility).
To pass these audits, it is essential to understand the technical terms that Lighthouse and web analytics tools report. Below, we explain these key concepts in a straightforward way and map out the ultimate checklist.
Key Performance Concepts (WPO)
Web performance (Web Performance Optimization) determines how quickly a page draws content on the screen and how fast it responds to user interactions.
First Contentful Paint (FCP)FCP (First Contentful Paint)First Contentful Paint (FCP) es una métrica de rendimiento que mide el tiempo transcurrido desde que el usuario inicia la carga de la página hasta que el navegador dibuja el primer fragmento de contenido (texto, imagen o gráfico vectorial) en la pantalla.
FCP measures the time it takes from when a user requests the page to when the browser renders the first piece of content (text, image, or logo). A slow FCP is usually caused by render-blocking resources in the <head>, such as external web fonts or large CSS files that the browser must fully download before painting.
Largest Contentful Paint (LCP)LCP (Largest Contentful Paint)Largest Contentful Paint (LCP) es una métrica clave de Core Web Vitals que mide el tiempo necesario para renderizar y pintar el elemento visual o bloque de texto más grande en la pantalla (usualmente la imagen Hero o banner principal).
LCP measures the render time of the largest image or text block visible within the viewport (usually the hero section). To optimize LCP, you should preload main assets, compress media into WebP or AVIF formats, and avoid welcome animations (Splash screens) that hide core content during the first few seconds.
Total Blocking Time (TBT)TBT (Total Blocking Time)Total Blocking Time (TBT) mide el tiempo total en el que el hilo principal del navegador está bloqueado por tareas de JavaScript de larga duración (más de 50ms), impidiendo que la interfaz de usuario responda rápidamente a clics o inputs.
TBT measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the browser's main thread is blocked by long-running (over 50ms) JavaScript execution, preventing user input response. It is mitigated by split coding (Code Splitting) and lazy-loading non-critical scripts like 3D canvases or interactive maps, especially on mobile devices.
Cumulative Layout Shift (CLS)CLS (Cumulative Layout Shift)Cumulative Layout Shift (CLS) es una métrica de Core Web Vitals que mide la frecuencia y la magnitud con la que los elementos visibles en la pantalla cambian de posición de forma inesperada durante la carga de la página.
CLS measures the visual stability of a page. It evaluates whether elements shift around on the screen during load (e.g., when a logo or banner loads late and pushes text down). It is corrected by always declaring physical width and height attributes on images or setting fixed heights on CSS parent wrappers.
Accessibility and Security: Trust and Legibility
A secure and accessible website not only protects its users but is also prioritized by search engines for indexing.
Document Language (lang)
The lang attribute on the HTML root element tells screen readers and crawlers the exact language of the content. If the attribute is static (e.g., Spanish) but the text changes (e.g., English), screen reader voices will read the text with incorrect phonetics, heavily penalizing accessibility.
Cross-Site Scripting (XSS)XSS (Cross-Site Scripting)Cross-Site Scripting (XSS) es una vulnerabilidad de seguridad web en la que un atacante inyecta scripts maliciosos (generalmente JavaScript) en las páginas web que otros usuarios visualizan, permitiendo secuestrar sesiones o robar datos. and Web Security
XSS is a vulnerability where attackers inject malicious scripts into web pages viewed by other users. To protect the site, we implement server headers and content security policies:
- Content Security Policy (CSP)CSP (Content Security Policy)Content Security Policy (CSP) es una directiva y cabecera de seguridad web que indica al navegador qué dominios y recursos están autorizados a cargarse y ejecutarse en la aplicación, ayudando a mitigar ataques de inyección y XSS.: A security directive that restricts the sources from which scripts and resources can be loaded and executed. If an attacker tries to inject an unauthorized script, the browser blocks it because it is not listed in the CSP whitelist.
- HTTP Strict Transport Security (HSTS)HSTS (HTTP Strict Transport Security)HTTP Strict Transport Security (HSTS) es una cabecera HTTP de seguridad que obliga a los navegadores web a interactuar con el servidor exclusivamente mediante conexiones seguras y cifradas (HTTPS).: A header that forces the browser to communicate with the server exclusively using secure HTTPS connections, preventing Man-in-the-Middle attacks.
- Cross-Origin Opener Policy (COOP)COOP (Cross-Origin Opener Policy)Cross-Origin Opener Policy (COOP) es una cabecera de seguridad web que aísla los entornos de renderizado y el contexto de memoria del documento de otras ventanas abiertas del navegador, previniendo secuestros o accesos no autorizados.: An isolation policy that prevents popup windows opened by the user from accessing the browser tab memory context, preventing session hijacking.
Technical Verification Checklist (TODOs)
Apply this checklist to audit and optimize your modern web projects.
Load and CPU Optimization (WPO)
- Optimize render-blocking resources by hosting typography locally using
font-display: swap. - Defer heavy interactive components (3D/WebGL) applying Lazy Loading and conditional mounting on desktop viewports.
- Compress all images to WebP format with maximum widths of 800px-1200px.
- Prevent layout shifts (CLS) by injecting
widthandheightdimensions into all corporate logos and illustrations.
Accessibility and User Trust (A11y & Sec)
- Synchronize the HTML tag
langattribute dynamically on client hydration. - Translate all ARIA labels of mobile menus, footer navigation, and header controls.
- Configure explicit
role="img"and descriptivearia-labeltags for inline vector SVG graphics. - Implement CSP directives and force HSTS headers to secure the portal against Cross-Site Scripting (XSS).