Optimización del código HTML del sitio web: limpieza, compresión, corrección de errores

Escucha este artículo

Técnico optimización del código HTML del sitio web - el proceso de ajuste del código HTML de la plantilla de la página del sitio. Cambio (ed.) del código fuente del sitio y corrección de su estructura y tamaño. Cuya finalidad explícita es una mejora cualitativa en la composición del código. Una reducción significativa en su volumen, mejorando la validez del código. Lo que ayuda a aumentar la velocidad de carga de la página en los navegadores.

HTML es la columna vertebral de la web. Este es el tipo de documento que construye la estructura básica de un sitio web. Sin HTML, JavaScript no funcionaría, CSS no podría diseñar nada y las imágenes no tendrían dónde cargar. La fuerza de HTML radica en su versatilidad, principalmente porque puede cargar otros archivos, que es lo que significa hipertexto, la primera parte de HTML.

Cuando lleva mucho tiempo cargar, analizar y cargar archivos HTML externos, la interfaz de usuario puede sufrir. El tiempo de carga de la página aumenta, cuanto más los usuarios tienden a abandonar la página, más tiempo tienen que esperar.

El contenido del artículo:

• Optimización técnica del código HTML de las páginas del sitio web
• Optimización del código fuente HTML del sitio reduciendo la cantidad de código
• Eliminación de etiquetas HTML y archivos de estilo innecesarios
• Corrección de errores en el código HTML del sitio
• Establecer la prioridad de la versión móvil del sitio
• Hacer un uso activo del almacenamiento en caché web
• CDN - altas oportunidades de nuestro tiempo
• Acortar solicitudes HTTP
• Optimización del código HTML de su sitio para SEO
• Optimización técnica del código HTML del sitio web: complementos populares de CMS WordPress

Optimización técnica del código HTML de las páginas del sitio web

Las actividades dirigidas a optimizar el código HTML son convenientes en términos de aumentar la velocidad del sitio. Limpiar y comprimir el código HTML del sitio lo ayudará a acelerar significativamente la visualización de las páginas del sitio. Al eliminar errores visibles en el código, mejorará la validez de su documento HTML.

El resultado final de optimizar el código HTML del sitio será:

• Carga instantánea de páginas web en navegadores populares.
• Rastreo rápido del contenido del sitio por parte de los robots de búsqueda.
• Un código limpio y válido es el sitio de mayor prioridad a los ojos de los motores de búsqueda.
• El ranking y la visibilidad del sitio en los resultados de búsqueda de los motores de búsqueda de Google y Yandex aumentarán significativamente.

Optimización del código fuente HTML del sitio - reduciendo la cantidad de código

La acción más importante es reducir el código de la página. El código fuente HTML parece un lienzo largo. Muchos estilos CSS diferentes se encuentran en diferentes lugares de la estructura del código. El código tiene comentarios, caracteres, espacios y etiquetas innecesarios.

Al principio, debe deshacerse de los comentarios innecesarios: este es un conjunto de caracteres adicional y completamente innecesario. Para el navegador y los robots de búsqueda, los comentarios no tienen ningún significado semántico. Al eliminarlos, reducirá significativamente el peso de la página. Lo que en un compartimento aumentará la velocidad de carga de un documento.

Limpieza de caracteres innecesarios, espacios extra (dobles) y saltos de línea. Le permitirá reducir drásticamente la estructura final del código del sitio. Por lo tanto, el peso principal de la página se puede reducir de 2,5 a 3 veces.

Como resultado de: comprimir espacios y combinar saltos de línea, la estructura del código html se compactará significativamente.

Un ejemplo de un pequeño segmento de un año optimizado:

a:pase el cursor .wpfm-icon-block, .wpfm-template-1 .wpfm-posición-abajo-derecha ul li a:pase el cursor .wpfm-icon-block, .wpfm-template-1 .wpfm-posición-arriba-izquierda ul li.wpfm-title-hidden a:hover.

Como puede ver, todos los caracteres, espacios y comentarios innecesarios se han eliminado del código. Esto contribuye a estirar el código, como si fuera una línea continua. Gracias a esta estructura, el peso de la página se vuelve mucho menor. Al mismo tiempo, los bots indexan y cargan las páginas lo más rápido posible. Por supuesto, sujeto a todas las medidas para optimizar el sitio.

Eliminación de etiquetas HTML y archivos de estilo innecesarios

El problema más común de un peso de código de página grande puede ser archivos de estilo CSS no utilizados y etiquetas innecesarias. Estos elementos de código también se colocan en la plantilla de la página principal.

Por ejemplo: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

Esto también se aplica a las etiquetas no cerradas. No tienen ningún significado semántico y ocupan el lugar que necesitamos. Los archivos de estilo que no tienen ningún papel en la presentación visual del sitio (innecesarios o rotos) también se eliminan de la estructura del código.

Para acelerar la carga de las páginas del sitio:

1. Debe mover estilos CSS y scripts JS a archivos externos;
2. Organice los elementos principales del diseño del sitio en sprites, luego colóquelos en hojas de estilo;
3. El código de la página debe ser simple y legible.

Corrección de errores en el código HTML del sitio

Los motores de búsqueda (no muy voluntariamente) reaccionan a los sitios en el código que tienen errores. Sin embargo, muchos recursos populares de TRUST, incluso con tales errores, están claramente fijos en los resultados TOP. Incluso la página principal del popular Yandex se verifica con la ayuda de validator.w3.org, incluso mi sitio es superior en errores.

Tiene la siguiente lista de errores de validez:

Advertencia: encabezado HTTP de política de seguridad de contenido: política de seguridad de contenido incorrecta: la lista de fuentes contiene una expresión de fuente duplicada &quot;https://passport.yandex.ru&quot;. Todas menos la primera instancia serán ignoradas. https://yandex.ru/ Error: el estilo del elemento no está permitido como hijo del elemento div en este contexto. (Suprimiendo más errores de este subárbol.) De la línea 33, columna 17689; a la línea 33, columna 17695 dkov</div><style.docum>

Error: elemento div no permitido como hijo del elemento span en este contexto. (Suprimiendo más errores de este subárbol.) De la línea 33, columna 18219; a la línea 33, columna 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Este es el conjunto mínimo de errores que tiene la página principal del motor de búsqueda Yandex (hay alrededor de 47 en total).

Y así es como se ve la verificación validator.w3.org de mi sitio:

Error: un elemento de secuencia de comandos con un atributo src no debe tener un atributo de tipo cuyo valor no sea una cadena vacía, un tipo MIME de JavaScript o un módulo. De la línea 6, columna 1; a la línea 6, columna 192 /script>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Como puede ver, no pocos))) - solo 21 notificaciones de errores y advertencias. Hay algo en lo que trabajar.

La validez del código es de máxima prioridad en la promoción del sitio web. Al corregir la mayoría de los errores y advertencias del validador W3C, puede lograr un buen éxito en la optimización técnica del sitio.

Establecer la prioridad de la versión móvil del sitio

Tradicionalmente, los sitios web de primera generación se veían en computadoras de escritorio de pantalla grande. Hoy en día, la mayoría de las personas visitan sitios web desde dispositivos móviles como teléfonos inteligentes, tabletas y computadoras portátiles. Por lo tanto, su sitio debe estar adaptado para dispositivos móviles. Además, debe asegurarse de que cada aspecto de su sitio (búsqueda, carrito de compras y pago) sea tan fácil de acceder desde un dispositivo móvil como desde una computadora de escritorio o portátil.

Hacer un uso activo del almacenamiento en caché web

Los cachés son áreas de almacenamiento temporal donde los navegadores guardan copias de archivos estáticos para cargar más rápido las páginas vistas recientemente, en lugar de solicitar constantemente el mismo contenido a través de HTTP.

Se puede indicar a los navegadores que almacenen en caché los elementos de la página web que los desarrolladores no cambiarán con frecuencia. En los encabezados de respuesta HTTP, el servidor host incluye instrucciones de almacenamiento en caché. Aquellos que usan ciertas páginas con frecuencia se beneficiarán de tiempos de carga más rápidos ya que el servidor envía menos datos al navegador.

CDN - altas oportunidades de nuestro tiempo

Las redes de entrega de contenido (CDN) mejoran la velocidad de carga del sitio web al almacenar contenido en caché en muchas ubicaciones diferentes en todo el mundo. Los servidores de caché de CDN suelen estar ubicados más cerca de los usuarios finales que el servidor de origen o host.

En lugar de conectarse directamente a un servidor de alojamiento que puede estar a cientos de millas de distancia y conectado a numerosas redes autónomas, las solicitudes de contenido se envían a través de un servidor CDN. Los servidores CDN pueden mejorar en gran medida el rendimiento de los sitios web.

Acortar solicitudes HTTP

Por lo general, los navegadores realizan múltiples solicitudes HTTP para acceder a varios recursos de la página, como imágenes, scripts y archivos CSS. Un solo sitio puede requerir cientos de solicitudes. Hay un intercambio bidireccional entre el navegador web y el servidor que aloja el recurso para cada solicitud, lo que aumenta el tiempo de carga de la página.

Además, es posible que la página web no se cargue rápidamente si uno de los hosts falla. Debido a estos posibles problemas, cada página debe tener una cantidad mínima de recursos cargados. Las pruebas de velocidad también mostrarán qué solicitudes HTTP están tardando más. Los desarrolladores pueden buscar una solución de alojamiento de imágenes más rápida si las imágenes hacen que la página se cargue lentamente.

Optimización del código HTML de su sitio para SEO

Optimización de código HTML tiene un efecto beneficioso en la mayoría de los indicadores del sitio en su conjunto. Gracias a una estructura limpia y optimizada, la indexación y la velocidad de carga del sitio mejoran significativamente. A los ojos de los motores de búsqueda, el sitio se vuelve mejor y, por lo tanto, más visible en los resultados de búsqueda.
Los motores de búsqueda utilizan el código fuente para descubrir de qué se trata su sitio. Cualquier contenido de una página web debe estar codificado en HTML para que los motores de búsqueda puedan entenderlo. Los componentes de SEO en el código fuente incluyen la etiqueta de título, la meta descripción, la etiqueta de título H1, los enlaces internos, los textos de anclaje, los enlaces nofollow, las etiquetas de imagen alternativa y las etiquetas canónicas. Para ver el código fuente, abra la página web y presione "Ctrl + U". Aquí hay algunos pasos que puede seguir para optimizar el código fuente de su sitio web.

Optimización de etiquetas de título

La etiqueta del título tiene un impacto significativo en la clasificación de su sitio en los motores de búsqueda. Esto ayuda a Google a determinar qué tan bien su página web o blog coincide con una consulta determinada. Una etiqueta de título bien escrita puede hacer que su sitio se destaque del resto y atraiga fácilmente al motor de búsqueda.

• Asegúrese de que todas sus páginas web tengan etiquetas de título únicas que describan perfectamente las páginas.
• Siga la longitud óptima de las etiquetas de título para que no se corten en los resultados de búsqueda. 50-60 caracteres funcionan lo suficientemente bien.
• Asegúrese de no utilizar palabras clave en los títulos. En su lugar, agregue una o dos palabras clave significativas.

Meta descripciones únicas

Una meta descripción es un elemento HTML que resume el contenido de una página web para el beneficio de los usuarios y los motores de búsqueda. Aparece como un fragmento en los resultados de búsqueda debajo del título. La idea detrás de las meta descripciones es dar a tus lectores una idea precisa de lo que ofrece tu página.

• Evite las descripciones largas. La longitud ideal es una descripción que contenga entre 130 y 156 caracteres.
• Use palabras clave relevantes en la descripción.
• Si es posible, incluye una llamada a la acción.

Trabajar con datos estructurados

El propósito de los datos estructurados es agregar más detalles a su fragmento para que sea un fragmento destacado en los resultados de búsqueda. El código debe estar correctamente marcado para aumentar sus posibilidades de obtener una clasificación más alta. Schema.org es el más popular cuando se trata de formularios de datos estructurados para motores de búsqueda.

• El uso de "alcance del elemento" en la etiqueta div permite que los motores de búsqueda sepan que toda la información presentada en una sección se refiere al mismo tema.
• El término tipo de elemento define el tema de cada sección.
• "elemento prop" informa información adicional sobre la sección

etiqueta H1

La etiqueta H1 se utiliza para designar un fragmento de texto como encabezado principal de su página. El contenido enumerado aquí debe describir brevemente de qué tratan las páginas. Las etiquetas H1 deben ser informativas y atractivas, alentando al usuario a continuar leyendo su contenido.

• Lo ideal es que contenga entre 20 y 70 caracteres.
• Considere la intención del usuario
• Incluya su palabra clave principal, preferiblemente palabras clave de cola larga, para mejorar el rendimiento de búsqueda y el tráfico web.

También puede agregar subtítulos a partir de H2 a H6. Para mejorar la legibilidad, asegúrese de que el texto que sigue al subtítulo no sea demasiado largo, preferiblemente entre 250 y 300 palabras.

Texto alternativo para imágenes

Para el comercio electrónico y otros sitios web, la etiqueta alt es una etiqueta HTML importante. Le dice al motor de búsqueda de qué se trata la imagen. Si no se puede cargar el archivo de imagen, se mostrará texto alternativo en lugar de la imagen. Las buenas imágenes con el texto alternativo adecuado hacen que las páginas sean atractivas tanto para los rastreadores como para los usuarios y mejoran la experiencia del usuario (UX).

• Asegúrese de que la descripción sea breve y específica.
• Usa palabras clave, pero no las rellenes
• Etiquete imágenes relacionadas con su marca, no imágenes utilizadas con fines decorativos.

Etiqueta de URL canónica

Esta es una poderosa herramienta para identificar contenido duplicado. Las etiquetas de URL canónicas se utilizan principalmente para sitios de comercio electrónico, ya que es posible que deba crear diferentes páginas para sus productos.

Agregar estas etiquetas a cada variación de página ayudará a los motores de búsqueda a reconocer la página principal/de origen de un grupo de páginas con URL similares.

Principales conclusiones

• Esfuércese por mantener las cosas simples y eficientes. Un sitio web no debe estar lleno de demasiados elementos sofisticados. Solo necesita ser relevante y efectivo para la visión de su marca y sus clientes. Puede lograr esto simplemente enfocándose en las funciones web requeridas.
• Explore estrategias de optimización para varios elementos web. Diferentes elementos web requerirán diferentes estrategias de optimización. Asegúrese de incluir estos cambios en todos los elementos para que las características de su sitio web funcionen de manera efectiva.

Optimización técnica del código HTML del sitio web: complementos populares de CMS WordPress

Echemos un vistazo rápido a un par de complementos de WordPress. Lo que lo ayudará a limpiar y comprimir el código HTML en el CMS de WordPress. Gracias a estos complementos, puede aumentar drásticamente la velocidad del sitio, así como limpiar todo lo innecesario del código del sitio.

Complemento Autooptimizar:

• Optimización y compresión del código HTML del sitio (eliminación de espacios y comentarios).
• Optimización de CSS y JS: le permite combinar estilos en un archivo y colocarlos en pie de página sitio, así como scripts js.
• Tiene opciones de optimización adicionales.

Complemento Clearfy:

• Combina la funcionalidad de muchos complementos y consta de módulos que se pueden desactivar.
• Ideal para aumentar la velocidad del sitio web.
• Deshabilita algunos scripts y funciones innecesarias en WordPress.
• Cuenta con una amplia gama de herramientas para trabajar con código HTML, CSS y archivos JS de tu CMS.

Al combinar estos complementos, logrará una excelente optimización del sitio de WordPress. No dejes de usarlos, seguro que te serán de mucha utilidad.

Leyendo este artículo:

• Archivo htaccess: cómo crear una instrucción de archivo .htaccess para principiantes
• Compresión Gzip js / css / aceleración del sitio html: cómo habilitar en .htaccess

Gracias por leer: AYUDANTE DE SEO | NICOLA.TOP