Prompt y alcance
Un sitio de noticias desea acelerar la navegación al detalle de artículos con la Speculation Rules API. Explica cómo elegirías prefetch versus prerender, definirías el alcance de las reglas y manejarías efectos secundarios con sesión iniciada, frescura, fallback para navegadores, cancelación y monitoreo.
Chrome documenta que prefetch busca principalmente recursos de forma anticipada, mientras que prerender carga y renderiza una página en un contexto invisible. Por lo tanto, prerender puede ofrecer una mayor ganancia en la navegación, pero puede ejecutar scripts y desencadenar efectos secundarios antes de tiempo. La pregunta evalúa ingeniería de rendimiento, mejora progresiva y límites de seguridad.
Qué evalúa el entrevistador
El candidato debe conectar la estrategia con la tasa de aciertos de navegación y el riesgo de efectos secundarios; restringir selectores, origen, caché y privacidad; preservar la navegación ordinaria cuando la API no es compatible o la especulación se cancela; y demostrar el impacto con datos de usuarios reales en lugar de una métrica de laboratorio por sí sola.
Marco de respuesta de 30 segundos
“Comenzaría con un prefetch conservador para enlaces a artículos de solo lectura, del mismo origen y de alta probabilidad. Usaría prerender solo tras verificar la ausencia de efectos secundarios de escritura, una tasa de aciertos suficiente y un presupuesto de recursos. Las reglas excluirían rutas de inicio de sesión, pago, personalización y mutación. El servidor aplicaría idempotencia y almacenamiento en caché privado; el cliente detectaría document.prerendering y pospondría la analítica. Los navegadores no compatibles usarían enlaces normales. Compararía la tasa de activación, LCP, INP, ancho de banda y tasa de cancelación”.
Respuesta detallada paso a paso
Paso 1: Clasificar el riesgo de la navegación
Incluir páginas de artículos y de ayuda de solo lectura; excluir checkout, logout, "me gusta", pagos y páginas fuertemente personalizadas. Prerender ejecuta código del ciclo de vida de la página, por lo que las escrituras deben requerir una activación de usuario real.
Paso 2: Elegir prefetch o prerender
Usa prefetch cuando la tasa de aciertos sea baja o los efectos secundarios sean inciertos. Usa prerender para páginas del mismo origen y de alta probabilidad con un primer renderizado estable y suficiente presupuesto de CPU y memoria. Nunca apliques prerender a todos los enlaces por defecto.
Paso 3: Limitar las reglas y el costo de recursos
Genera reglas de documento o de servidor que coincidan únicamente con enlaces a artículos. Limita los candidatos concurrentes y el tamaño de los recursos. Establece un comportamiento adecuado de caché, Vary e invalidación para que las respuestas privadas no se compartan incorrectamente.
Paso 4: Aislar los efectos secundarios y el estado de inicio de sesión
Los endpoints de escritura deben requerir interacción real y protección CSRF; una solicitud especulativa no puede mutar el estado. Retrasa analíticas, anuncios y notificaciones mientras document.prerendering sea true, y luego envía un único evento deduplicado después de la activación. Utiliza almacenamiento en caché privado o excluye respuestas personalizadas.
Paso 5: Diseñar el fallback y la cancelación
Los navegadores no compatibles utilizan enlaces ordinarios. La especulación puede cancelarse por límites de memoria, red o del navegador, por lo que la página aún debe cargarse normalmente. No bloquees la retroalimentación del clic mientras se espera una página especulativa.
Paso 6: Manejar la frescura
Para artículos editados con frecuencia, acorta los tiempos de vida en caché y valida la versión al momento de la activación; utiliza solicitudes condicionales con ETag. Si el contenido cambió después del prerender, actualiza las regiones mutables sin mostrar contenido obsoleto de forma repentina ni reproducir acciones del usuario.
Paso 7: Medir el valor para el usuario real
Ejecuta una comparación controlada de tasa de activación, espera de navegación, LCP, INP, CLS, ancho de banda, CPU, memoria y cancelación. Segmenta por navegador, red, dispositivo y estado de inicio de sesión. Si la velocidad mejora pero el costo o los errores aumentan, restringe las reglas o regresa a prefetch.
Compensaciones y límites
Tasa de aciertos frente a costo de recursos
Un prerender con baja tasa de aciertos desperdicia CPU, memoria y ancho de banda. Prefetch cuesta menos pero ofrece una ganancia menor. Establece umbrales basados en la activación observada y un presupuesto definido.
Frescura frente a navegación instantánea
Un almacenamiento en caché prolongado mejora la tasa de aciertos pero incrementa la obsolescencia. Versiona las URL estáticas; valida el contenido dinámico al activarse y actualiza solo las regiones mutables.
Compatibilidad frente a mantenimiento
La especulación es una capa de mejora progresiva y los enlaces ordinarios siguen siendo canónicos. Mantén las transiciones de estado de negocio independientes del ciclo de vida de prerender.
Simulacros de fallos y evolución
Una página especulativa desencadena una escritura
Registra las solicitudes especulativas en staging y verifica que los "me gusta", las analíticas y las notificaciones no contengan mutaciones. Elimina la ruta de las reglas y traslada las escrituras tras una activación real.
Una baja tasa de aciertos desperdicia recursos
Desactiva prerender para dispositivos y redes con recursos limitados, compara el ancho de banda y el INP, y pasa de un pequeño experimento de prefetch a prerender solo cuando los datos lo respalden.
El contenido expira antes de la activación
Simula una actualización de publicación entre el prerender y el clic. Verifica la validación con ETag y la actualización parcial para que la página activada muestre el título y el cuerpo actuales.
Errores comunes y preguntas de seguimiento
Error 1: Aplicar prerender a todos los enlaces
Pregunta por umbrales de tasa de aciertos, concurrencia y memoria, además de una condición explícita de desactivación.
Error 2: Tratar prerender como caché
Pregunta qué scripts se ejecutan y cómo se retrasan o aíslan las analíticas y el estado de inicio de sesión.
Error 3: Mirar únicamente Lighthouse
Pregunta cómo se segmentan la activación, la cancelación y el ancho de banda en la medición de usuarios reales.
Error 4: Omitir la navegación ordinaria
Pregunta si un clic sigue funcionando cuando el navegador carece de soporte o cancela la especulación.
Error 5: Ignorar la frescura
Pregunta cómo una actualización de publicación entre el prerender y el clic evita el contenido obsoleto.
Preguntas de seguimiento ampliadas y respuestas de referencia
¿Por qué no aplicar prerender a todas las páginas?
Prerender consume recursos adicionales y puede ejecutar scripts. Selecciona únicamente páginas de alto acierto, de solo lectura y del mismo origen dentro del presupuesto.
¿Cómo evitar analíticas duplicadas?
Detecta document.prerendering, pospón el evento hasta la activación y deduplica con un identificador de navegación.
¿Cómo demostrar que la optimización funciona?
Utiliza asignación de usuarios reales y compara LCP de navegación activada, INP, tiempo de espera, ancho de banda y cancelación por dispositivo y red.