TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo mejorar la velocidad de carga de páginas de los sitios web HTML estáticos?

25

HTML es la base de Internet y los servidores web envían páginas HTML a la interfaz del navegador. Los navegadores como Chrome interpretan el marcado HTML y muestran el contenido de la página de manera legible. Este concepto es el mismo para aquellos sitios que usan PHP con sistemas de administración de contenido como WordPress. Sin embargo, crear un sitio web no es suficiente en estos días. Debe optimizar su sitio para una carga rápida a fin de obtener una buena clasificación en los motores de búsqueda y una buena experiencia del usuario. En este artículo, exploraremos cómo acelerar su sitio web HTML estático y mejorar las posibilidades de llevar su sitio a la cima en los resultados de búsqueda de Google.

Antes de empezar: sitios web HTML estáticos

Recuerde, en este artículo hablamos de sitios web HTML estáticos que usted mismo crea. Puede crear sitios web HTML con su propio diseño o utilizar marcos prefabricados como Bootstrap. En general, puede cargar las páginas HTML y otros recursos (imágenes / CSS / JS) en su servidor y acceder al sitio desde el navegador. Aparte del nombre de dominio y la cuenta de alojamiento, no necesita ninguna otra herramienta de terceros para este propósito. Alternativamente, puede utilizar herramientas de terceros como Mobirise para crear páginas HTML estáticas y subirlas a través de FTP.

No estamos hablando de los siguientes casos:

  • Sistemas de gestión de contenido como WordPress: WordPress ofrece un paquete de optimización completo para mejorar la velocidad de carga de su sitio web. Consulte nuestro artículo sobre cómo optimizar el tiempo de carga de la página de los sitios de WordPress.
  • Herramientas de creación de sitios web como Weebly, Wix, etc.: estas plataformas no son soluciones de código abierto, lo que esencialmente significa que tiene opciones limitadas dentro de la plataforma para optimizar. Puede utilizar algunas de las opciones sugeridas en este artículo. Sin embargo, es posible que no optimice cosas como la combinación de CSS / JS, la eliminación de los recursos de bloqueo de renderizado, etc., ya que no puede acceder al servidor.

Verifique la velocidad de la página en la herramienta Google PageSpeed ​​Insights

Ahora que el contexto está claro, avanzaremos más. La mejor manera de comenzar la optimización es comprender primero los problemas básicos que existen en su sitio. Para encontrar los problemas relacionados con la velocidad, vaya a las herramientas de Google PageSpeed ​​Insight y verifique la puntuación de su sitio web. No se preocupe mucho por la puntuación al principio, desplácese hacia abajo y consulte la sección de oportunidades para mejorar la puntuación.

¿Cómo mejorar la velocidad de carga de páginas de los sitios web HTML estáticos?

Sugerencias de Google PageSpeed ​​Insights

Tenga en cuenta que las oportunidades que se muestran en la herramienta PageSpeed ​​Insights NO afectarán directamente la puntuación. Como regla general, la puntuación será baja cuando tenga problemas en la sección de la mitad superior de la página (sección de encabezado) de su sitio web. Incluye recursos de bloqueo de renderizado, precarga de fuentes e imágenes, cambio de diseño acumulativo con código de terceros, etc. Por lo tanto, puede combinar las oportunidades y las reglas generales para mejorar la velocidad de carga de la página de sus sitios web HTML estáticos.

¿Cómo mejorar la velocidad de carga de páginas de los sitios web HTML estáticos?

Puede utilizar las siguientes funciones para mejorar la velocidad de su sitio.

1 Combinando y minimizando archivos CSS y JS

Un sitio web HTML estático tendrá una hoja de estilo CSS como recurso mínimo para definir el estilo de los elementos de su página HTML. Además, puede usar archivos JavaScript adicionales para agregar otras funcionalidades como controles deslizantes en su sitio.

  • Lo primero que necesita es eliminar los espacios y comentarios innecesarios en sus archivos CSS / JS / HTML. Esto se llama minificación, que reduce el tamaño del archivo y mejora la velocidad de carga de la página. Utilice estas herramientas de minificación CSS, JS y HTML para eliminar el desorden innecesario de los archivos. Recuerde, los archivos CSS y JS minificados tendrán extensiones como .min.css y .min.js.
  • Consulte con su empresa de alojamiento y habilite la compresión GZIP para comprimir su contenido HTML. Esto reducirá el tamaño del archivo servido al navegador y mejorará drásticamente la velocidad de la página. Puede verificar si su sitio está utilizando compresión GZIP con esta herramienta y encontrar los ahorros de tamaño.
  • La combinación de archivos CSS y JS le ayudará a reducir la cantidad de solicitudes HTTP a su servidor. Por lo tanto, puede combinar los archivos CSS en lugar de usar estilos en diferentes hojas de estilo. Sin embargo, esto no es necesario si su servidor de alojamiento admite el protocolo HTTP / 2 que admite solicitudes HTTP paralelas. Además, la combinación de archivos JS puede romper el diseño a menos que sepa cómo combinar el código correctamente dentro del archivo.

2 Eliminación de recursos de bloqueo de renderizado

El siguiente paso es eliminar los recursos que bloquean la representación de la parte superior de la sección de la mitad (encabezado) de su sitio. Como regla general, asegúrese de vincular todos los archivos JS después de la sección del cuerpo de su página HTML. Esto le ayudará a retrasar la carga de los scripts y evitará problemas de bloqueo de procesamiento.

  • Vaya a la herramienta Google PageSpeed ​​Insights y pruebe su sitio web para medir la velocidad de carga de la página.
  • Si tiene alguna advertencia sobre los recursos de bloqueo de procesamiento, anote el nombre del archivo.
  • Mueva el archivo de la sección del encabezado al área del pie de página.

Recuerde, no es posible en todas las situaciones mover el archivo al área del pie de página. Verifique que el diseño y las funcionalidades de su sitio estén funcionando bien cuando reorganice los archivos. Además, es posible que deba deshabilitar la combinación de archivos para encontrar qué archivo de recursos está causando el problema.

3 Utilice redes de entrega de contenido (CDN)

Las dos opciones anteriores son de naturaleza más técnica, lo que puede resultarle difícil. Para evitar perder tiempo y romper el diseño de su sitio, la mejor solución posible es utilizar una red de entrega de contenido (CDN) como Cloudflare StackPath.

  • Puede combinar y minimizar archivos usando la red CDN en lugar de hacerlo en su servidor.
  • Aumente la velocidad, especialmente si está ofreciendo contenido para usuarios internacionales.
  • Mejore la seguridad bloqueando bots automatizados y con protecciones de fuerza bruta y DDoS.

El CDN básico de Cloudflare es gratuito, lo que es suficiente para la mayoría de los sitios web HTML estáticos. Puede combinar y minimizar archivos con un solo clic y probar cómo afecta la velocidad de carga de su página en la herramienta Google PageSpeed ​​Insights. Si está utilizando marcos como Bootstrap, asegúrese de incluir el recurso CDN en lugar de mantener el archivo fuente desde su servidor.

4 Evite los códigos de terceros

Uno de los factores más importantes para mejorar el tiempo de carga de su página es limitar el uso de códigos de terceros en su sitio. El problema es que no puede controlar el comportamiento de carga de los códigos de terceros. El comportamiento de carga dinámica afectará los parámetros de velocidad, como el cambio de diseño acumulativo y la pintura con contenido más grande.

  • Coloque los anuncios como Google AdSense debajo del área visible cuando se carga la página. Desafortunadamente, esto afectará sus ingresos directamente al reducir el CTR y las páginas vistas.
  • Inserte Google Analytics o cualquier otro código de seguimiento después de la sección del cuerpo.
  • Evite insertar códigos en el encabezado para compartir en redes sociales.
  • Si está utilizando fuentes de Google, asegúrese de utilizarlas de manera simplificada con menos pesos y familias de fuentes. Esto le ayudará a reducir la cantidad de archivos y obtenerlos más rápido del servidor de Google.

5 Precarga de fuentes e imágenes

Otro problema popular de velocidad de página es la carga previa de fuentes e imágenes que carga en la sección de encabezado. Si ve mensajes de advertencia en Google PageSpeed, agregue los siguientes códigos en la sección de encabezado. Asegúrese de reemplazar los nombres de los archivos con los que ve en Google PageSpeed ​​Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

Esto es muy útil, especialmente cuando se utilizan íconos de fuentes increíbles en su sitio.

6 imágenes: comprime y usa formato de próxima generación

La última opción que explicamos aquí es comprimir las imágenes que usa en su sitio. Dado que los sitios web HTML estáticos no tienen ninguna opción incorporada para reducir el tamaño de las imágenes, debe comprimirlas manualmente antes de cargarlas en su servidor.

  • Algunos servidores web tienen la opción de comprimir imágenes al cargarlas. Consulte con su empresa de hosting si ofrecen alguna herramienta para este propósito.
  • De lo contrario, use herramientas de compresión de imágenes para reducir el tamaño de sus imágenes sin perder la calidad.
  • Además, puede convertir el formato de imagen a JPEG-2000 o JPEG XR. Generalmente, los servidores VPS tienen la opción de servidor de imágenes en formato WebP que puede confirmar con su empresa de alojamiento. En este caso, no necesita ninguna conversión, ya que sucederá automáticamente desde el lado del servidor para cada imagen. El uso de imágenes en WebP, JPEG-2000 o JPEG XR lo ayudará a solucionar el problema de las imágenes de servicio en el formato de próxima generación en la herramienta Google PageSpeed ​​Insights

7 Utilice CSS crítico

Cuando tiene la misma sección de encabezado en todo el sitio, existe una manera fácil de mejorar la velocidad de carga. En lugar de cargar todo el archivo CSS en el encabezado, puede usar CSS solo para la sección del encabezado visible cuando la página se carga en una ventana del navegador. Esto se denomina CSS crítico que puede generar a partir de herramientas de terceros.

  • Vaya a la herramienta generadora de CSS crítica y proporcione la URL de su sitio web.
  • Genere CSS crítico y copie el contenido.
  • Coloque los estilos copiados entre … etiquetas dentro de la sección de encabezado de su sitio HTML.
  • Puede diferir la hoja de estilo principal a la sección de pie de página para evitar el problema de bloqueo de renderizado de CSS.

¿Cómo mejorar la velocidad de carga de páginas de los sitios web HTML estáticos?

Generador de CSS crítico

Ultimas palabras

Como se mencionó, la velocidad de carga de la página de su sitio web HTML estático depende de la representación del área de pliegue en el navegador. Puede reducir el CSS y los scripts en la sección del encabezado para solucionar la mayoría de los problemas y oportunidades que se muestran en la herramienta Google PageSpeed ​​Insights. La mejor opción es usar CDN y evitar el contenido de terceros en la sección de encabezado.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More