SEO

La velocidad de tu página afecta al posicionamiento SEO

La velocidad es muy importante para un sitio web. Es tan importante que Google lo haya convertido en un factor de clasificación real. Con el tiempo, Google ha tomado medidas para mejorar la velocidad de carga de los sitios web al proporcionar un conjunto de herramientas para desarrolladores y webmasters. Una de estas herramientas es Google Lighthouse.

Pero, ¿cómo funciona realmente esta herramienta PageSpeed ​​Insights Tool de Google? Y más importante, ¿La velocidad de la página afecta al SEO?? Encontrarás todo lo que necesitas saber en este artículo.

how_page_speed_affects_google_ranking

La herramienta PageSpeed ​​Insights no solía ser muy buena en el pasado. La mayor parte de la información allí podría encontrarse relativamente fácil en otros lugares y no indicaba la velocidad en sí misma. Sin embargo, Google ha actualizado recientemente la herramienta y es mucho mejor. Desafortunadamente, también es mucho más difícil de entender.

Sin embargo, esta herramienta se ha vuelto popular entre los SEO a través de PageSpeed ​​Insights, que, de hecho, funciona con Lighthouse, pero proporciona la información en un formato fácil de seguir, en una página web.

  1. ¿Qué es Google PageSpeed ​​Insights?
    1. Móvil contra escritorio
    2. ¿Qué es la velocidad de la página en realidad?
  2. ¿PageSpeed ​​Insights afecta al SEO? ¿Es esencial la puntuación 100/100?
  3. Métricas de PageSpeed ​​Insights
    1. Datos de campo y laboratorio (métricas de rendimiento)
    2. Oportunidades y diagnósticos
  4. ¿Cómo se calcula el puntaje de PageSpeed ​​Insights?
  5. Puntos clave para mejorar el puntaje de PageSpeed ​​Insights
    1. Tiempo de respuesta del servidor
    2. Compresión de imagen
    3. Estructura HTML y CSS
    4. Minificación y compresión de guiones
    5. Política de caché
    6. Tema ligero y complementos
  6. Cómo verificar en masa el puntaje de PageSpeed ​​Insights
  7. Otras herramientas para medir y mejorar la velocidad del sitio
    1. Pingdom
    2. GT-Metrix
    3. mod_pagespeed
    4. Google AMP (páginas móviles aceleradas)

¿Qué es Google PageSpeed ​​Insights?

PageSpeed ​​Insights es una herramienta en línea proporcionada por Google que se utiliza para identificar problemas de rendimiento web en los sitios. Aunque principalmente relacionado con problemas técnicos de SEO, las herramientas también analizan el sitio desde la experiencia del usuario y el punto de vista de accesibilidad.

Puede acceder a PageSpeed ​​Insights visitando https://developers.google.com/speed/pagespeed/insights/.

PageSpeed ​​Insights Inicio

Puede ingresar la URL allí y después de unos segundos, la herramienta devolverá una página con algunos resultados sobre el rendimiento de su sitio web. En la parte superior, habrá un puntaje general, que es un promedio de múltiples factores. A continuación, verá información detallada sobre lo que realmente afecta su velocidad.

Sin embargo, no es la única herramienta PageSpeed ​​proporcionada por Google. También hay mod_pagespeed, un módulo de servidor utilizado para resolver estos problemas de velocidad, y el faro completo (la herramienta de análisis del sitio que lo alimenta todo), disponible en el propio Chrome. También hay una serie de extensiones de Chrome relacionadas con PageSpeed ​​Insights de Google.

Discutiremos brevemente sobre todos ellos a lo largo de este artículo, pero nos centraremos principalmente en PageSpeed ​​Insights, ya que parece ser la herramienta más útil que utilizan la mayoría de los SEO cuando revisan un sitio web.

Móvil contra escritorio

Cuando inserte una página para probarla, Google dará dos puntajes: uno para la versión móvil y otro para la versión de escritorio.

Inicialmente, la herramienta PageSpeed ​​solo dio una puntuación, para la versión de escritorio. Pero recientemente, el uso de dispositivos móviles se ha vuelto cada vez más popular. A partir de 2018, más del 50% de los usuarios de motores de búsqueda realizan búsquedas en dispositivos móviles. A medida que Google se mudó a un primer índice móvil, También tenía sentido que probaran primero las versiones móviles para la velocidad.

PageSpeed ​​Mobile vs Desktop

Sin embargo, si tiene un diseño receptivo, puede pensar que estas versiones son en su mayoría idénticas.

Si es así, ¿por qué tienen puntajes diferentes?

Móvil: Cuando usa la herramienta PageSpeed ​​Insights, el primer resultado que obtendrá es la velocidad móvil. Esto significa que su sitio web ha sido probado en una conexión móvil, probablemente con una conexión 4G, ya que parece ser la velocidad más común en los Estados Unidos al menos.

Cobertura de red móvil

https://www.uscellular.com/coverage-map/voice-and-data-maps.html

Sin embargo, tenga en cuenta que muchos usuarios de dispositivos móviles de todo el mundo siguen recibiendo solo señal 3G y, aunque tienen una velocidad de conexión más lenta, esperan que el sitio web se cargue realmente rápido.

Y aquí está el problema. No siempre se trata de su sitio, se trata más de la velocidad de la conexión. Puede parecer que su sitio es lento cuando, en realidad, la velocidad de conexión es lenta.

Escritorio: En el escritorio, la puntuación es más alta porque la velocidad de conexión es más alta. Eso es justo lo que pasa con la luz y la fibra óptica. A menos que vivas en el Reino Unido, por supuesto, y aún tengas tazas y cuerdas de internet.

Por lo tanto, el sitio web pasa por la misma prueba, pero es principalmente la velocidad de conexión la que difiere.

Es por eso que los dispositivos móviles son lo primero, ya que los dispositivos móviles suelen tener conexiones más lentas. Las cosas pueden cambiar con 5G pero, hasta entonces, asegúrese de concentrarse en mejorar la velocidad de su sitio para dispositivos móviles.

¿Qué es exactamente la velocidad de la página?

Bien, entonces sabemos lo que hace la herramienta: proporciona una puntuación basada en la rapidez con que cree que es su sitio. Pero, ¿qué es exactamente la velocidad de la página?

La velocidad de la página es la velocidad a la que se carga una página individual en su sitio web. Diferentes páginas pueden tener diferentes velocidades debido a factores como imágenes y scripts.

Pero la velocidad es relativa. Depende de muchos factores, como el rendimiento del sitio web, el rendimiento del servidor, la página web particular en la que se encuentra, el tipo de conexión, el proveedor de servicios de Internet del usuario, el paquete de Internet, la potencia de procesamiento del dispositivo, el navegador, lo que el usuario en ese momento, cuántas aplicaciones se están ejecutando, etc.

Sin embargo, solo podemos trabajar con lo que podemos trabajar, que es nuestro sitio web y nuestro servidor. Realmente no tenemos control sobre el resto.

Solo para aclarar las cosas, la velocidad de la página no es una puntuación, como lo presenta PageSpeed ​​Insights. Es el tiempo de carga de una página web y se mide en segundos. Eso es lo que importa.

Es por eso que Google PageSpeed ​​Insights no era tan bueno en el pasado. No le proporcionó información sobre qué tan rápido se está cargando su sitio web. Solo puntajes.

Y es por eso que esta nueva versión es tan buena. Le dice todo lo que necesita saber sobre la velocidad de carga real, al tiempo que mantiene las cosas buenas de la versión anterior.

Existen, por supuesto, diferentes puntos de interés en el tiempo de carga. Por ejemplo, es posible que desee ejecutar algunos scripts hacia el final porque no es necesario utilizarlos inicialmente.

Pueden tardar mucho en terminar la carga, por lo que el tiempo total de carga podría ser mayor. Pero si el sitio es utilizable hasta entonces, no es un gran problema.

Velocidad de carga rápida del sitio web

Por ejemplo, supongamos que desea ejecutar un script emergente de intento de salida. Ese script tarda unos hipotéticos 5-10 segundos en cargarse. Sin embargo, desea mostrarlo al usuario solo después de unos 20-30 segundos.

Si comienza a ejecutar su script de inmediato, puede posponer la carga de otros elementos importantes, como lo primero que debería ver el usuario: el contenido del pliegue anterior. Esto sería muy malo, especialmente porque no usará ese script hasta 20-30 segundos en el futuro.

Por lo tanto, puede posponer la carga del script después de todo lo que sea una carga vital para brindarle al usuario una mejor experiencia.

Sin embargo, si tiene un script que hace que el menú funcione o algo vital para la usabilidad del sitio web, es posible que no desee cargarlo hacia el final. Esto arruinaría la experiencia ya que el usuario no podría acceder a esa función antes de que se cargue todo lo demás.

¿La velocidad de la página afecta al SEO? ¿Es esencial 100/100 Insights Score?

La respuesta simple es que la velocidad de la página afecta el SEO. La velocidad de la página es un factor de clasificación directo, un hecho aún mejor conocido desde la Actualización de velocidad del algoritmo de Google. Sin embargo, la velocidad también puede afectar las clasificaciones indirectamente, al aumentar la tasa de rebote y reducir el tiempo de permanencia.

En Google, los usuarios son lo primero. Los estudios de Google muestran que la velocidad promedio de carga 3G es muy lenta. También muestran que los usuarios abandonan el sitio después de unos 3 segundos. Esto significa que su experiencia es mala y a Google no le gustan los sitios de clasificación que ofrecen una mala experiencia de usuario.

Lo que debe recordar es que la velocidad se mide en segundos, no en puntos de 0 a 100. Si bien PageSpeed ​​Insights es una herramienta que lo ayuda a mejorar la velocidad, el puntaje allí no necesariamente significa nada en el mundo real.

Aun así, es importante mejorar el puntaje de velocidad de la página.

¿Por qué?

Porque con Google no sabemos con certeza si el puntaje existe o no como factor de clasificación. ¿Google usa segundos? ¿Utiliza el puntaje? Quién sabe…

Sin embargo, he visto sitios con una puntuación de velocidad de página perfecta que se clasifica mal y sitios web con una puntuación inferior a 50 que se clasifican muy bien (#youtube).

Sin embargo, debe tener en cuenta cómo Google realiza estas pruebas. No sabemos de dónde se realizan las pruebas. ¿Su servidor es de Rumania y Google lo prueba con una conexión 3G en los Estados Unidos? Bueno, entonces obviamente puedes esperar bajas velocidades.

Pero solo por el bien del usuario, priorice el tiempo de carga. Y no use solo PageSpeed ​​Insights para probar eso. Quédese al final y le mostraré un par de herramientas que puede usar para probar la velocidad a la que se carga su sitio web desde diferentes ubicaciones.

¡A veces, Google se contradice a sí mismo!

Por ejemplo, Google PageSpeed ​​Insights considera que el script de Google Analytics procesa el bloqueo, lo que significa que debe cargarlo más adelante, en el pie de página. Sin embargo, Google Analytics especifica con bastante claridad que el script debe colocarse en elsección de su sitio web, de lo contrario no funcionará correctamente y no se aceptará inicialmente como una instalación válida.

Entonces obtienes un pequeño puntaje en PageSpeed ​​Insights … al hacer lo que Google dice … solo para que te digan que no debes hacerlo así … por Google. Tú entiendes.

Además, no puede almacenar en caché el script correctamente a menos que almacene el archivo analytics.js en su servidor. Obviamente, eso es algo que Google Analytics no recomienda. También es un infierno para el mantenimiento, ya que cada vez que el archivo JavaScript de Google Analytics recibe una actualización, también debe actualizarlo en su sitio.

Esto, por supuesto, no sucede solo con las herramientas y scripts de Google, sino con cualquier script de terceros sobre el que no tenga control.

En nuestra defensa, incluso YouTube, que es propiedad de Google y que, en teoría, debería dar un ejemplo, tiene un puntaje de PageSpeed ​​Insights bastante lento, al menos al momento de escribir este artículo.

Velocidad lenta de la página de YouTube

Pero eso no significa que el sitio se cargue lentamente. Puede ver que los datos de campo (para los cuales hay muchos, ya que es YouTube) dicen que el sitio se carga en aproximadamente 4 segundos, lo que no es realmente malo, teniendo en cuenta que recientemente YouTube proporciona vistas previas de video en las miniaturas.

También puede probar su sitio con https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite/ para obtener una explicación más simple de lo rápido que se carga su sitio.

ThinkWithGoogle Test Mobile Speed

El sitio web de nuestro otro negocio, BrandMentions, se carga en menos de 2 segundos con una conexión 4G, como puede ver arriba. Lo veríamos bastante bien. Claro, siempre hay margen de mejora. Según los estándares de Google … es promedio.

Sin embargo, Google parece considerar que la velocidad del sitio web cognitivo de SEO es lenta, aunque se carga en poco más de 3 segundos, lo que sigue siendo bastante rápido teniendo en cuenta la cantidad de herramientas de terceros que estamos utilizando.

Cognitivo SEO

¡Tenga en cuenta que tendrá que pasar menos de 1 segundo para ser considerado rápido! Para hacerlo, probablemente necesitará un sitio muy simple sin complementos de terceros o ventanas emergentes sofisticadas. No es fácil si realmente quieres hacer algo de marketing digital.

Entonces, sí, la velocidad de carga es importante para el SEO, pero un puntaje perfecto de PageSpeed ​​Insights no lo es. Mientras su sitio web se cargue en unos 3 segundos, debería estar bien con la mayoría de los usuarios.

Métricas de PageSpeed ​​Insights

Dado que muchas cosas pueden afectar la velocidad del sitio, Google divide todo en diferentes categorías en la herramienta PageSpeed ​​Insights Tool, para una mejor comprensión de los problemas.

Esto es útil ya que Google también proporciona algún tipo de priorización, que le muestra qué es exactamente lo que más afecta la velocidad.

Datos de campo y laboratorio

Estas son las nuevas métricas que son realmente útiles. Se dividen en dos categorías: campo y datos de laboratorio.

Datos de campo es lo importante en el mundo real, ya que son los datos extraídos por Google de usuarios reales, ya sea a través de Chrome u otros proveedores de datos.

Claro, es un promedio y si Google aún no tiene suficientes datos, se lo informará.

Resumen de origen muestra un promedio de la velocidad del sitio en su conjunto. De esta manera, puede tener una idea de cómo se compara su página con el sitio y cómo se compara con otros sitios en el Informe de experiencia del usuario de Chrome.

Datos de laboratorio, aunque sigue siendo útil, podría considerarse menos importante ya que se recopila de un entorno controlado. Esto significa que se prueba a través de una única conexión y no agrega datos de varios usuarios.

Los datos de laboratorio es lo que realmente genera el puntaje de velocidad de la página de Google.

Debido al hecho de que Google no siempre tiene datos de campo, utiliza los datos de laboratorio que se realizan en el acto para analizar su sitio.

Primera pintura contenta representa el momento en que los usuarios ven algo en su página web por primera vez. Si miras la serie de imágenes, puedes ver cómo se ve:

Primera pintura contenta

Como puede ver, la página no se ha procesado completamente, se ha mostrado algo allí.

Primera pintura significativa es el segundo paso, digamos, si tomamos los resultados anteriores como un ejemplo. Representa el punto en el que el usuario puede comprender realmente la primera parte del contenido. Por ejemplo, se muestra texto legible o una imagen, en lugar de solo colores y fondos.

Índice de velocidad Es una métrica más compleja. Mide la rapidez con la que los elementos de su sitio web se visualizan de manera visible. Cuanto más rápido comienzan a aparecer, mejor. Está buscando una puntuación más baja aquí, ya que también se mide en segundos.

Primera CPU inactiva representa el punto en el que el sitio ha cargado suficiente información para poder manejar la primera entrada de un usuario. Por ejemplo, si el sitio no ha cargado suficiente información relevante, el usuario puede tocar elementos o desplazarse hacia abajo, pero no pasará nada.

Hora de interactuar es el siguiente nivel, aquel en el que el sitio web es completamente interactivo. Esto significa que todo se ha cargado en la memoria del dispositivo y ahora está listo para usarse.

Potencial máximo primer retardo de entrada es el retraso que experimenta un usuario desde el punto en el que interactúa con los navegadores hasta el punto en el que el navegador responde. Esta es la única métrica de rendimiento que no afecta el puntaje de velocidad de la página.

Oportunidades y diagnósticos

La sección de oportunidades proporciona información sobre lo que puede mejorar en su sitio. También le indica una estimación de cuánto afecta cada problema a su tiempo de carga y cómo debe priorizar sus tareas.

Pasar por todos y cada uno de ellos sería excesivo. Sin embargo, debajo de cada métrica tendrá una pequeña flecha que puede usar para expandir la sección.

Oportunidades y diagnósticos de PageSpeed

Allí encontrará información sobre todas y cada una de las recomendaciones y cómo solucionar el problema para mejorar la velocidad de su sitio. Notará que los elementos que causan los mayores problemas son, en general, imágenes y scripts de terceros.

La sección de auditorías aprobadas es la lista de cosas que ya haces bien en tu página web. Básicamente, mostrará elementos de las secciones Oportunidades y Diagnóstico que se ajustan a los parámetros de Google.

¡Cuanto más tenga en esta lista, mejor!

¿Cómo se calcula el puntaje de PageSpeed ​​Insights?

Aunque es posible que vea tantas cosas en la herramienta PageSpeed ​​Insights Tool, la puntuación se calcula utilizando solo los segundos en la sección Datos de laboratorio. Si lees atentamente, podrás ver el mensaje “Estas métricas no afectan directamente el puntaje de rendimiento”. bajo Oportunidades y diagnóstico.

Las métricas en los datos de laboratorio se denominan métricas de rendimiento. Hay 6 de ellos y los hemos presentado anteriormente. Cada métrica obtiene una puntuación de 0 a 100. Cada métrica tiene un peso diferente al calcular la puntuación.

3 – Primera pintura contenta
1 – Primera pintura significativa
2 – Primera CPU inactiva
5 – Tiempo para interactuar
4 – Índice de velocidad
0 – Latencia de entrada estimada

Por orden de importancia, se enumeran como tales: Tiempo para interactuar, Índice de velocidad, Primera pintura satisfactoria, Primera inactividad de CPU, Primera pintura significativa y Latencia de entrada estimada, que en realidad no tiene ningún efecto en la puntuación.

Los puntajes se basan en algoritmos de distribución Log-normal, así que no profundicemos demasiado en el agujero del conejo. Si desea obtener más información, puede leer esta página.

Google también ha puesto un archivo de hoja que puede usar para ver cómo se genera realmente la puntuación. Si conoce las funciones de Excel, puede realizar ingeniería inversa de cómo funciona todo. Puede descargar este archivo aquí, pero debe hacer su propia copia (Archivo -> Hacer su propia copia) antes de poder editarlo. También hay una versión para Lighthouse v5.

Calculadora de puntaje de PageSpeed

Para decirlo en términos simples, la primera pintura satisfactoria impacta la puntuación más que la primera pintura significativa, y así sucesivamente.

¿Por qué? Bueno, probablemente porque si no se muestra nada en la pantalla, es más probable que el usuario abandone su sitio web. Si muestra … algo, ganará algo de tiempo para que le entreguen el resto.

Los puntajes se dividen en 3 categorías, Lento (0-49), Promedio (50-89) y Bueno (90-100). Luego se genera un promedio como puntaje final para su sitio web.

En general, si tiene menos de 50 años, ¡tiene algunos problemas que deben solucionarse! Pero, de nuevo, no se preocupe si su sitio se carga en unos 3 segundos.

Puntos clave para mejorar el puntaje de PageSpeed ​​Insights

Todo allí arriba puede ser un poco difícil de digerir. Lo entendemos. ¡Lo más probable es que no puedas resolverlo todo! Hemos descartado que no sea importante obtener una puntuación del 100%. Sin embargo, estos son los elementos clave que harán que su sitio se cargue más rápido.

Advertencia: realice una copia de seguridad de sus archivos y su base de datos antes de realizar estas mejoras. Pueden estropear tu sitio web y debes asegurarte de que puedes volver a una versión anterior.

Tiempo de respuesta del servidor

El servidor es algo que realmente no puede mejorar usted mismo. O tienes uno bueno o uno malo. Para mejorarlo, tendría que reducir la carga de manera significativa o mejorar su hardware, sobre el cual no tiene control, a menos que sea el propietario de la máquina física.

Por lo tanto, es importante tener un buen servidor en primer lugar. Pero, ¿cómo eliges un buen servidor?

Bueno, cualquier empresa de alojamiento que se clasifique bien en Google debería proporcionar servicios decentes. Sin embargo, depende de usted probarlo. ¿Mejor consejo? Si estás enfocado principalmente en SEO local, elige un servidor local. Por ejemplo, si la mayoría de su audiencia vive en Italia, elija un servidor con el centro de datos en Italia.

Si el centro de datos está en los Estados Unidos, la información tendrá que viajar una gran distancia antes de llegar a su público objetivo.

Siempre puede probar el sitio web del proveedor de alojamiento con PageSpeed ​​Insights y buscar su TTFB (Tiempo hasta el primer byte) o el Tiempo de respuesta del servidor. Si está en la sección Auditorías aprobadas, sabe que tiene un buen proveedor de alojamiento.

Servidor rápido TTFB

Sin embargo, es mejor si conoce a alguien que es un cliente real del proveedor de alojamiento para que pueda probar la velocidad allí.

Siendo realistas, el propio sitio web del host probablemente estará en un servidor dedicado, mientras que su sitio estará en un paquete de alojamiento compartido. Esto significa que compartirá la CPU de la computadora y el ancho de banda de Internet con otros sitios web.

Si puede probar un sitio real desde un cliente, eso es genial. Es posible que pueda revisar las revisiones y encontrar clientes o pedirle al equipo de soporte que le proporcione una.

Compresión de imagen

En general, las imágenes son el mayor problema con los sitios web. Son grandes y requieren mucho para descargar.

Hay dos tipos de problemas con las imágenes. El primero es el tamaño de la pantalla frente al tamaño real de la imagen en píxeles y el segundo es el tamaño del disco.

Tamaño del disco Cuanto más espacio físico ocupa una imagen en un disco duro o SSD, más tardará en descargarse. 100 KB se descargarán mucho más rápido que 1000 KB (1 MB). Si tiene 10 imágenes como esa en su publicación de blog, espere que su sitio se cargue muy lentamente.

Puede usar WP Smush para optimizar sus imágenes. Es un complemento que comprime las imágenes sin perder calidad. Esto significa que puede reducir una imagen de 1000 × 1000 píxeles de 200 KB a 150 KB sin notar la diferencia de calidad, lo que hace que se cargue un 25% más rápido.

WP Smush

Tamaño de pantalla: El tamaño de la pantalla es el tamaño en el que se muestra una imagen. Por ejemplo, la imagen a continuación se muestra a 300 × 300 píxeles.

300x300

Para que las imágenes se carguen más rápido, primero debe asegurarse de no utilizar una imagen más grande de lo que se va a mostrar. Por ejemplo, si tiene una sección HTML con estilo CSS a 300 × 300 píxeles, pero carga una imagen de 1000 × 1000 píxeles en la fuente, está perdiendo el tiempo de carga de esos 700 × 700 píxeles.

Esto se debe a que el navegador tiene que descargar la imagen de 1000 × 1000 píxeles y luego reducirla a 300 × 300 píxeles. Esto lleva más tiempo tanto para la descarga como para el proceso de reducción. Puede solucionar esto cargando sus imágenes con el mismo ancho y alto en el que se mostrarán.

WordPress hace esto automáticamente creando múltiples instancias de la imagen cuando la carga. Es por eso que verá el sufijo 300 × 300 o 150 × 150 al final de una ruta de archivo de imagen. Por eso puede elegir tamaños (Grande, Medio, Miniatura). Aunque no es perfecto, especialmente si redimensiona manualmente la imagen haciendo clic y arrastrando, y ocupa más espacio en su servidor a largo plazo, ayuda con la velocidad de carga.

Diferiendo las imágenes Es otra cosa que puede hacer para mejorar el tiempo de carga. Esto significa que puede descargarlos más tarde a medida que el usuario se desplaza hacia abajo en la página web. Habrá un breve momento en que las imágenes no serán visibles, pero eventualmente aparecerán, una tras otra.

Esto ayuda a los navegadores a centrarse en la parte importante, la que los usuarios están viendo en ese momento.

Hay una gran cantidad de complementos que pueden ayudarte a hacerlo. Sin embargo, muchos tienen errores o solo difieren las imágenes en ciertas situaciones, por ejemplo, si son creadas por WordPress o WooCommerce, pero no cuando son creadas o insertadas por complementos menos populares.

Ciertamente, hay complementos para otros CMS, como Joomla o Magento. Simplemente realice una búsqueda en Google para ellos. Si no está en un CMS popular, como WordPress, puede diferir imágenes con jQuery, pero seguramente necesita un desarrollador por eso, si no eres uno tu mismo.

Formatos de imagen de próxima generación son recomendados por Google. Son muy útiles, especialmente cuando se carga un sitio web desde un dispositivo móvil. Sin embargo, hay una razón por la que mucha gente todavía no los usa.

Los formatos de imagen de próxima generación aún no son compatibles con todos los principales navegadores. Esto significa que necesitará servir dinámicamente diferentes formatos para diferentes navegadores.

Si puede usar un complemento en su CMS que podría ser fácil, pero si está en una plataforma personalizada, necesitará desarrollar todo desde cero, lo que cuesta mucho. Aquí hay una lista de los navegadores que admiten el formato WebP.

Formato de imagen WebP Next Gen

Si dimensiona y optimiza sus imágenes correctamente, los ahorros que obtendrá al convertirlos a formatos de imagen de próxima generación como JPEG2000 o WebP podrían no valer el costo en tiempo y dinero.

Sin embargo, si tiene el tiempo y el presupuesto, por supuesto, hágalo. Puede usar esta herramienta para verificar si los navegadores en los que sus usuarios pasan más tiempo son compatibles. Busque WebP o JPEG2000.

Estructura HTML y CSS

La estructura HTML de su página web dicta la forma en que se carga. Los navegadores leen una página de arriba a abajo y cargan los elementos de la misma manera. Esto significa que si quieres que algo se cargue primero, debes ponerlo más arriba en tu página.

En general, los problemas no son con HTML sino con CSS. Si escribe su CSS caóticamente, dará como resultado un tiempo de carga más lento y una mala experiencia del usuario.

Tomemos un ejemplo. La mayoría de los sitios web, si no todos, siguen esta estructura HTML: head> body> footer.

Si mi archivo CSS aplica el estilo al pie de página primero, entonces el pie de página recibirá el estilo, aunque esté antes del pliegue. Mientras tanto, el encabezado y el cuerpo pueden permanecer simples.

También es una buena idea agregar su estilo móvil primero, ya que los dispositivos móviles son los más lentos. Es posible que necesite al menos una capacitación básica en CSS para tener una idea de esta jerarquía y poder identificar los problemas con el código por su cuenta.

Lo mismo ocurre con JavaScript de bloqueo de renderizado. Posponer guiones que no son vitales. Agréguelos al pie de página para que se carguen al final.

Sin embargo, si tiene scripts importantes, como Analytics, que deberían ejecutarse lo antes posible, manténgalos en el encabezado y asegúrese de que se ejecuten y ejecuten correctamente, aunque esto podría dar como resultado una puntuación de PageSpeed ​​más baja.

Minificación y compresión de guiones

La minificación es un proceso de hacer un archivo más pequeño eliminando información innecesaria de él.

Por ejemplo, al escribir JavaScript y CSS, a la mayoría, si no a todos los codificadores, les gusta usar espacios para mantener su código limpio y fácil de leer. Sin embargo, esos espacios adicionales se suman, especialmente si tiene un código largo.

CSS Minification

cssminifier.com

Otra forma de minificar el código sería mediante la combinación de elementos similares.

Por ejemplo, si mis secciones de encabezado y pie de página fueran idénticas, en lugar de escribirlas así:

body {
font-size: 16px;
}
footer {
font-size: 16px;
}

Podría escribir:

body, footer {
font-size: 16px;
}

Compresión es el proceso de reducir archivos al reemplazar secuencias recurrentes de información con una sola referencia a esa secuencia en particular.

Entonces, por ejemplo, si tengo el siguiente código: 123 4 123 123 123 4 123 123, podría reemplazar 123 con un 1 y obtener una versión comprimida como esta: 1 4 1 1 1 4 1 1. Por supuesto, es mucho más complejo que lo que he presentado.

Esto generalmente ocurre en el lado del servidor y el más común se llama compresión Gzip. El servidor envía una versión comprimida. Después de que el navegador recibe el archivo comprimido, lo descomprime invirtiendo el proceso para leer su contenido real.

Esto funciona más o menos como WinRAR; ¡probablemente todos lo sepamos, porque lo hemos estado usando gratis desde siempre!

Si estás en un CMS popular, definitivamente encontrarás un plugin para compresión y minificación. Por ejemplo, el plugin W3 Total Cache hace muchas cosas, incluidas ambas, si lo configura correctamente.

Recuerde que la compresión depende de la configuración del servidor. Si su servidor no es compatible con Gzip, no podrá comprimir archivos. Si tiene un servidor Apache, asegúrese de tener instalado mod_deflate.

Puede preguntarle a su proveedor de servidores si su alojamiento lo admite. El 99.9% de las veces dirán que sí. Si aún no está instalado, deberían hacerlo de forma gratuita, ya que es algo bastante básico.

Si no estás en un CMS popular, también puedes habilitar la compresión Gzip a través del archivo .htaccess (Servidores Apache) agregando el siguiente código, siempre que mod_deflate esté instalado.

Sometimes, you can also combine the scripts. There are plugins that do this, such as Autoptimize, which I’ve presented before. Combining scripts is exactly what it says. Instead of having two files, you combine them into one. This way there’s only one request made to the server, instead of multiple ones.

However, combining scripts can many times causes bugs, so make sure you back up everything before.

Cache Policy

Caching is the process of storing files in a client’s browser in order to be able to quickly access them at a later time.

For example, if a user comes to your website for the first time, your logo will have to be downloaded. However, if you have an effective caching policy, that file will be stored in the user’s browser. When the user accesses your site a second time, it won’t have to download that file again as it will be instantly loaded from their computer.

Dynamic Elements (short cache policy): Dynamic elements are elements on your website that change frequently. For example, you might keep adding new posts in a slider on the Homepage.

In this case, the HTML is the dynamic element, so set a short caching policy if this fits you. 30 minutes might be enough, just in case the user returns to that page in the same session.

In some cases, you might not want to cache those elements at all, if promptitude is what matters for your users, such as on news websites.

Static Resources (long cache policy): Static resources are files that rarely change. These are usually images and CSS or JS files, but they can also be audio files, video files, etc.

You can set a longer cache time for images and CSS files since you know you will not be changing them very frequently. You can even go up to one year, but 3 months is usually enough.

Third Party Tools: You don’t really have control over 3rd party tools, so if you feel like a tool that is hosted elsewhere makes your website run very slow, better find an alternative or give up on it.

A solution would be to host the files on your own server and cache them. However, this might not be very productive and it’s not recommended, as you’ll have to constantly update those files as soon as new versions come out, otherwise the tool or app won’t work properly.

Cache Plugins: There are a lot of plugins that will properly handle the cache protocols required for a good user experience. If you’re on WordPress, one of these plugins is W3 Total Cache. However, if you want to go for a better option, WP Rocket is also pretty popular, but it will set you back a couple hundred bucks.

Just search for cache plugin / extension / module + your platform on Google to find what you need. Look at the reviews to pick the best one.

.htaccess file cache: You can also set a cache control header from your .htaccess file on an Apache server, if you don’t run your website on a popular CMS.

There are multiple ways:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 hour”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## EXPIRES CACHING ##

Or you can also use this code:

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"

# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"

The numbers in the max-age attribute are in seconds, so 3600 would mean one hour, 86400 one day and so on.

Resetting the cache: When you make modifications to a web page, you want to reset the cache if an older version has been cached previously. However, you can only reset the cache on your server.

This means that users who have downloaded a previous version of a certain file will still load that old version from their computer when they access the website again. The file will be refreshed after the set amount of time in your caching policy or if the user manually resets their browser cache.

If you have a critical error in your web design or code, you can change the filename of your file. This way you can be sure that the cache for that particular file will be reset.

Sometimes, Chrome’s cache can be difficult to reset. Sometimes, routers and datacenters between the client and the server might also cache files so, if you don’t see the modifications, give it a couple of hours.

Lightweight Theme & Plugins

The more you load your website with plugins, the heavier it gets and the slower it runs.

A website’s theme is the biggest ‘plugin’ the site has. Most themes out there come with heavy 3rd party builders and huge libraries of plugins which all make the site run slower.

Lightweight Theme & Plugin

For example, slider plugins generally add the slider JS code to all pages, although it will probably be used only on the homepage or a landing page. That’s some heavy code to be loading on every page! Not to mention that nobody likes them and they lower the conversion rate.

So when you’re looking for a theme, try to find one without too much animations, sliders, functions and so on. If you look at the big websites you’ll see that, in general, they’re pretty simple.

A good theme which I recommend is GeneratePress. It’s lightweight and will load very fast. You can enable or disable elements to keep your site as clean as possible.

Combining it with an optimization plugin such as WP Rocket (paid) or a combo of free plugins such as Autoptimize + Fastest Cache will make it blazing fast! You can also use W3 Total Cache, a plugin which does almost everything listed above pretty well.

When you install new plugins, think about how important they are to your website. After you install them, test your score and loading speed. Does the plugin make your site run slower? If yes, is it critical to keep the plugin? Maybe look for a better alternative or remove it completely.

How to Bulk Check the PageSpeed Insights Score

The annoying part about PageSpeed Insights is that it checks only one web page at a time. It would take an eternity to check all the pages on your website, depending on its size.

However, there’s a way of bulk checking the PageSpeed Insights Score. Have you guessed it yet?

It’s the CognitiveSEO Tool Site Audit. Once you set up the technical SEO analysis with the Site Audit, go to your Campaign -> Site Audit -> Performance -> PageSpeed.

Bulk Check Google PageSpeed Insights Score

Of course, you can do a lot more with the tool, from improving your technical SEO and content to monitoring your rankings and link building efforts.

There’s also a somewhat free alternative which is a Chrome Extension. However, what it will actually do is ask for a list of URLs and then just open them as new tabs in the online PageSpeed Insights tool.

Bulk Check PageSpeed Extension Chrome

This means that the process is OK for about 10-20 tabs, if you have a medium to high end computer CPU. Anymore than that and the browser could crash or you’ll grow old waiting. It’s still pretty inconvenient.

Other SEO Tools for Measuring & Improving Site Speed

Of course, Google’s PageSpeed Insights tool isn’t the only tool to check and improve page speed. For once, we don’t really know where the tests are being performed from. If your site is hosted on a server in Europe and Google performs its tests from the US, it’s natural that the site will be slower.

However, there are tools which specify where the test is being performed from.

Pingdom

Pingdom Speed Test is a great tool which measures the speed at which your web page loads. Once the test is done, you’ll get some results which are similar to the ones on Google’s tool, at least visually.

Pingdom Speed Test

What’s interesting about it is that you can select where the test is going to be performed from. Sure, the options are limited, but it’s still better than not even knowing it.

If you focus on local SEO, choose the location closest to your server. If you don’t know where it’s actually hosted, ask your hosting provider and you’ll find out.

Pingdom Data Center Location

It’s also a good idea to make multiple tests from different locations, just in case you have an international audience.

GT-Metrix

GT Metrix has been one of my favorite speed testing tools out there. Although it tests only from Vancouver, Canada, the insights it gives are very useful.

GT Metrix Speed Tool

Quick tip: If you create a free account with them, you won’t have to wait so much for the test to be performed. To reduce load on their servers, they add you in a queue when there are too many requests. However, registered users have priority.

mod_pagespeed

The mod_pagespeed is a server addon from Google. Its purpose is to fix any page speed related issues at a core level, directly on the server side. This means that even if you add unoptimized images, mod_pagespeed will automatically compress, optimize and convert them to next gen image formats.

However, installing mod_pagespeed is definitely more technical than just dealing with everything in WordPress.

If your server already has it or you know what you’re doing go ahead and install it. However, it’s always a better idea to have a fast site in the first place instead of trying to cover things up.

Any way, this mod will increase load on your server as every time you upload an unoptimized image, it will have to use processing power to convert it.

Google AMP (Accelerated Mobile Pages)

If you want your site to be really fast on mobile searches, you can always implement Google AMP.

Google AMP or Accelerated Mobile Pages is a special type of HTML, stripped of heavy, slower loading elements.

More than that, AMP pages will preload in Chrome mobile browser as the user scrolls through the search results, resulting in an instant load of the page when the user taps the title.

Google AMP

There are also disadvantages, of course. You’re limited from every direction, although things are getting better and better every day. Also, your site’s design has to suffer and will pretty much look like any other site that uses AMP. Bummer.

The URL isn’t yours either, because Google loads a cached version of your site, on their URLs. However, Google developers have promised to bring native URLs into AMP.

On WordPress and other CMS, you can add AMP to your website through a plugin. For custom websites, you’ll need to get in touch with your developer and give them this link.

Conclusión

Improving your site speed is important for better search rankings. PageSpeed Insights provides a set of best practices and possible improvements, prioritized by their impact on your site’s speed.

While the score itself shouldn’t concern you too much, it’s a good idea to try and get it at least over 50. However, focus on load time, which is measured in seconds. A good website should load in about 3 seconds. A really, really fast one should load in about 1.

Having a good server, compressing images and keeping things clean and simple in your code will benefit you the most when it comes to website speed.

What’s your PageSpeed Insights Score? Have you seen better rankings after improving the loading speed of your website? Share your experience with us in the comments section below!

Start Your Free 7-Day Trial

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *