Sobes.tech
Ayuda para la entrevista
Recursos
Preparación de la entrevista
Recursos
Búsqueda de empleo
Recursos
Legales
Volver a preguntas
Middle

¿Qué métodos de optimización de páginas conoces?

sobes.tech AI

Respuesta de la IA

  • Minificación y compresión de recursos:

    • HTML, CSS, JavaScript: Eliminación de espacios en blanco, comentarios, saltos de línea, abreviación de nombres de variables.
    • Imágenes: Optimización de formatos (WebP, AVIF), compresión sin pérdida de calidad, uso de imágenes responsive.

  • Uso de CDN (Red de entrega de contenido): Distribuir recursos estáticos desde servidores cercanos al usuario reduce la latencia.

  • Caché del navegador: Configurar encabezados HTTP adecuados (Cache-Control, Expires) para cachear recursos estáticos en el lado del cliente.

  • Carga perezosa (Lazy Loading): Cargar imágenes, videos y otros recursos pesados solo cuando aparecen en la vista del usuario.

  • Carga asíncrona y diferida de JavaScript y CSS: Uso de atributos async y defer para scripts que no bloquean la ejecución, carga de CSS fuera del camino crítico de renderizado.

  • Optimización de CSS crítico: Incrustar un conjunto mínimo de CSS para renderizar la primera pantalla en HTML <head>, cargar el resto de CSS de forma asíncrona.

  • Reducción de solicitudes HTTP:

    • Combinar archivos CSS y JavaScript.
    • Usar sprites para imágenes pequeñas.

  • Optimización de fuentes:

    • Uso del formato WOFF2.
    • Uso de font-display.
    • Pre-carga de fuentes críticas.

  • Uso de Server-Side Rendering (SSR) o Generación de sitios estáticos (SSG): Renderizar parte o toda la página en el servidor antes de enviarla al cliente, mejorando el tiempo hasta el primer contenido y la indexación.

  • Optimización de imágenes:

    • Tamaños adecuados para diferentes dispositivos.
    • Uso de <picture> y srcset.
    • Compresión con pérdida controlada.

  • Uso de Resource Hints (preconnect, prefetch, preload): Sugerencias al navegador sobre recursos que podrían necesitarse pronto.

    <!-- Conexión al dominio antes de solicitar el recurso -->
<link rel="preconnect" href="https://example.com">
<!-- Pre-carga de recurso -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetch de recurso -->
<link rel="prefetch" href="/next-page.html">

  • Optimización del DOM: Minimizar la profundidad del árbol DOM, evitar operaciones costosas de lectura/escritura en bucles.

  • Optimización del renderizado (Layout, Paint, Composite): Evitar recalculos forzados de estilos y layouts, usar propiedades CSS que no causen repintado completo (por ejemplo, transform, opacity en lugar de top, left).

  • Uso de Web Workers: Mover cálculos intensivos a hilos separados para evitar bloquear el hilo principal de la interfaz.

  • Carga progresiva: Mostrar contenido a medida que se carga.

AnteriorSiguiente