Por qué su sitio web se carga lentamente (y cómo solucionarlo): 22 pasos que hice para obtener puntajes de velocidad de página 100% GTmetrix y tiempos de carga instantánea

Sitio web de carga lenta


Tener un sitio web de carga lenta?

¿Qué pasa si te digo que mi sitio se carga en <1s con puntajes 100% GTmetrix? Y que ya he escrito una de las guías de velocidad de WordPress más populares en línea con más de 400 comentarios?

Algunas optimizaciones son específicas de WordPress, otras son universales. Pero todas son mejores prácticas, incluso si está utilizando Squarespace, Shopify, Wix y otras plataformas de creación de sitios web..

Si tiene preguntas o necesita ayuda, deje caer su informe GTmetrix en los comentarios y le daré algunos consejos. Tú también puedes contratar el optimizador de velocidad de mi sitio web si estás usando WordPress.

1. Pruebe su sitio web en GTmetrix

GTmetrix te muestra:

  • Tiempo de carga (métrica primaria)
  • Cuales imágenes necesita ser optimizado
  • Cuales complementos se cargan lentamente (consulte la pestaña Cascada)
  • Tu tiempo al primer byte (indica la velocidad de su alojamiento)
  • Si tu plugin de caché está haciendo su trabajo (recomiendo WP Rocket)
  • Si está utilizando un Red de entrega de contenidos (Recomiendo Cloudflare)
  • Carga lenta recursos externos (AdSense, Maps, YouTube / Facebook incrusta)

Arreglos rápidos?
El alojamiento es el factor # 1 en el guía oficial de optimización de WordPress (con mucho). Es posible que no mejore los puntajes de GTmetrix, pero puede mejorar los tiempos de carga en varios segundos, especialmente si pasa de un host lento (Bluehost, HostGator, GoDaddy) a un host rápido (SiteGround, Cloudways) Estos dos anfitriones obtuvieron la calificación más alta en más de 40 encuestas de Facebook que recopilé de los grupos de Facebook.

Los complementos de caché tienen el mayor impacto en los puntajes y también mejoran los tiempos de carga. WP Rocket es mejor que W3 Total Cache o WP Fastest Cache ya que tiene más funciones (como carga diferida, limpieza de bases de datos y optimización de Google Font + Analytics) mientras que otros complementos de caché no.

WordPress Speed ​​Video Tutorial
Si está utilizando WordPress, pasé muchas horas creando este video de 42 minutos en los sitios de WordPress para acelerar. Puede usar marcas de tiempo en la descripción del video para saltar a secciones específicas.

La prueba está en el pudín:

Informe-GTmetrix 2019

2. Cambiar el tamaño de las imágenes grandes

Esto es lo que servir imágenes a escala significa en GTmetrix.

Significa que está cargando imágenes grandes con dimensiones incorrectas. Cada sección de su sitio web tiene dimensiones específicas (controles deslizantes, miniaturas, carrusel, ancho completo e imágenes de la barra lateral).

Por ejemplo, sé que el cuerpo del contenido de mi blog tiene 680 píxeles de ancho. Las imágenes de ancho completo que utilizo para mi blog siempre deben cambiar su tamaño a esas dimensiones.

GTmetrix le muestra todas las imágenes no optimizadas (y las dimensiones correctas a las que deberían cambiar su tamaño) pero solo para la única página que prueba. Todo lo que tiene que hacer es cambiar el tamaño de esas imágenes y reemplazar la versión anterior por la nueva..

Servir imágenes a escala

Bonificación: crea una hoja de trucos – escriba todos los diferentes tamaños de imágenes en su sitio web.

  • Logo: 200 x 58px
  • Favicon: 16 x 16px
  • Deslizadores: 1903 x 400px
  • Imágenes de carrusel: 115 px
  • Imágenes de widgets: 420 x 250 px
  • Imágenes destacadas: 250 x 250px
  • Imágenes de publicación de blog de ancho completo: 680 px
  • Imagen de Twitter OG más reciente: 1024 x 512 px
  • Imagen de Facebook OG de Yoast: 1200 x 630px

Espacio cuadrado, Wix, y los temas de WordPress deben incluir instrucciones para cambiar el tamaño de las imágenes.

3. Comprimir imágenes

Esto es lo que optimizar imágenes significa en GTmetrix.

Hay muchas herramientas para hacer esto (uso el complemento de WordPress ShortPixel). Asegúrate de eliminar Datos EXIF para que las imágenes se carguen aún más rápido, lo que también se puede hacer en algunas de las herramientas a continuación.

optimización de imagen

Herramientas de compresión de imagen

¿Perderé calidad??
Incluso si elige una compresión sin pérdidas, puede notar una pequeña pérdida de calidad. Por eso es mejor probar un par de imágenes de antemano y hacer una copia de seguridad si está optimizando en masa todas las imágenes.

4. Agregar caché

Si eres no usa WordPress, su plataforma debe cuidar almacenamiento en caché, minificación, combinación de archivos y otras optimizaciones en GTmetrix que generalmente requerirían un complemento.

Si estas usando WordPress, pregúntese:

  • ¿Estás utilizando un complemento de caché?
  • ¿Qué plugin de caché estás usando??
  • ¿Lo ha configurado con la configuración óptima??

Estos 3 factores tendrán el mayor impacto en sus puntajes en GTmetrix, Google PageSpeed ​​Insights y prácticamente cualquier herramienta de prueba de velocidad. El almacenamiento en caché y el alojamiento son muy importantes!

Qué plugin de caché es el mejor?
yo recomiendo WP Rocket que es un complemento de caché premium. Viene con muchas características que otros complementos de caché no tienen (limpieza de la base de datos, control de latidos, carga diferida, optimización de Google Fonts + Analytics, integración CDN). Si desea utilizar estas funciones con otros complementos de caché, necesitará instalar unos 6 complementos adicionales para encargarse de estas optimizaciones, mientras que WP Rocket tiene todo incorporado. El complemento de caché gratuito más cercano que hace esto es Swift.

WP Rocket también fue calificado como # 1 en múltiples encuestas de Facebook:

2016 mejor encuesta de plugin de caché

Encuesta de plugin de caché 2019

Swift vs WP Rocket

Encuesta de plugin de caché 2016

Encuesta sobre los mejores complementos de caché 2018

wp rocket vs w3 totla caché

5. Actualización a PHP 7.3

Esto solo se aplica si compró alojamiento (por ejemplo, SiteGround, Bluehost, GoDaddy).

Actualización a PHP 7+ es muy simple y debería tener un impacto significativo en los tiempos de carga.

Puntos de referencia PHP de WordPress

Paso 1: Inicie sesión en su cuenta de hosting y busque el administrador de versiones de PHP (o similar).

Paso 2: Actualice a la versión PHP más alta disponible en su cuenta de hosting (por ejemplo, PHP 7.3).

Paso 3: Pruebe su sitio web en busca de errores. Si ve alguno, probablemente se deba a complementos de WordPress incompatibles, en cuyo caso puede usar Comprobador de compatibilidad de PHP. Esta herramienta le mostrará complementos incompatibles; debe eliminarlos o volver a una versión anterior de PHP.

Paso 4: Mantenga su versión de PHP actualizada. Si su host lanza una nueva versión estable de PHP, úsela.

6. Verifique los tiempos de respuesta del servidor

Google PageSpeed ​​Insights te dice si tienes un lento tiempos de respuesta del servidor (Google recomienda que sea inferior a 200 ms). Los servidores están obviamente controlados por su alojamiento.

Reduce el tiempo de respuesta del servidor

Cómo mejorar el tiempo de respuesta del servidor

  • Obtenga un mejor alojamiento (por ejemplo, Cloudways o SiteGround)
  • Alejate de EIG hosts quienes son infamemente lentos
  • Asegúrese de tener habilitado el almacenamiento en caché en su sitio web
  • Use una red de entrega de contenido como el CDN de Cloudflare
  • Elimine todos los complementos pesados ​​y no utilizados en su sitio web
  • Use un proveedor de DNS premium (obtenga esto a través de su host)

7. Elija el alojamiento adecuado

El alojamiento es el factor # 1 de la velocidad del sitio web con diferencia:

Muchos tutoriales tratarán de referirlo a Bluehost, HostGator, GoDaddy y Marcas EIG.

Todos estos son hosts de baja calidad que probablemente le traerán una gran cantidad de problemas: tiempos de respuesta del servidor lentos, tiempos de inactividad, versiones de PHP obsoletas, vulnerabilidades de seguridad y mal soporte.

Investigue en los grupos de Facebook y mire algunas encuestas que se tomaron. También puede ver a las personas que migraron hacia y desde ciertas empresas de alojamiento y publicaron sus resultados.

SiteGround y Cloudways generalmente son el número 1 y el número 2 en más de 40 encuestas de Facebook. SiteGround es bueno para alojamiento compartido y Cloudways para alojamiento en la nube. Ambos hosts ofrecen migraciones gratuitas del sitio web.

Recomendación de alojamiento de julio de 2019

Recomendaciones de alojamiento de Elementor

2017-WordPress-Hosting-FB-Poll

Encuesta de recomendación de alojamiento

WordPress-Host-Poll-Ago-2018

Shared-Hosting-Poll-2017

Encuesta de alojamiento 2019

Ir a la empresa de alojamiento

WordPress-Hosting-Poll-2017

Recomendaciones de alojamiento 2018

Hospedaje favorito para Elementor

2016-WordPress-Hosting-FB-Poll

Encuesta de alojamiento de WordPress

Encuesta de alojamiento de WordPress septiembre de 2018.png

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Encuesta-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-June-1

Migrar a un alojamiento más rápido hace una gran diferencia:

Cambio a SiteGround

Migración del tiempo de carga de SiteGround

Bluehost a SiteGround GTmetrix

HostGator a SiteGround

SiteGround Google PageSpeed ​​Insights

SiteGround GoGeek Tiempo de carga

Tiempos de carga reducidos con SiteGround

Nuevos tiempos de respuesta de SiteGround

Tiempos de respuesta de Cloudways

HostGator a SiteGround Migration

Tiempos de respuesta de SiteGround en Joomla

Cambiado a SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

Migración de blogs de SiteGround

Nuevo tiempo de respuesta de SiteGround

Mejora del tiempo de respuesta de SiteGround

Intitulado

8. Agregue el CDN de Cloudflare

UNA CDN (red de entrega de contenido) significa que su sitio web está alojado en múltiples centros de datos en todo el mundo. Esto reduce el distancia geográfica entre su servidor y el visitante, mientras descarga recursos a esos centros de datos (aligerando la carga en su propio servidor). Incluso puedes usar múltiples CDN como StackPath o KeyCDN que agrega aún más centros de datos.

CDN-WordPress-Recomendación

Flama de nube es gratis y tiene Más de 200 centros de datos que está muy por encima de la mayoría de las CDN premium.

Paso 1: Compruebe si su host le permite habilitar Cloudflare en su cuenta. Si lo hacen, active Cloudflare y listo. Si no lo hacen, deberá cambiar los servidores de nombres a partir del paso 2.

Paso 2: Regístrese en Cloudflare, elija el plan gratuito, agregue su sitio web y luego deje que Cloudflare ejecute su análisis. Cloudflare lo guiará a través de un conjunto de páginas hasta que le asignen 2 servidores de nombres.

Paso 3: Inicie sesión en su registrador de dominios y encuentre la opción de configurar servidores de nombres personalizados (Google “servidores de nombres personalizados en la empresa de alojamiento XYZ”). Reemplace esos servidores de nombres con Cloudflare.

9. Desactivar Hotlinking

Si tiene imágenes de alta calidad en su sitio web, las personas podrían estar “prestándolas” para usarlas en su propio sitio. Pero en lugar de guardar y cargar las imágenes, las personas las copiarán / pegarán desde su sitio al suyo. Esto significa que está alojando esas imágenes en su servidor (no es bueno).

Puede habilitar la protección de hotlink en Flama de nube o muchas veces, en tu cuenta de hosting. Esto evita que las personas usen sus valiosos recursos del servidor copiando / pegando sus imágenes.

Cloudflare Hotlink Protection

10. Minify Files

GTmetrix le dice que minimice los archivos HTML, CSS y JavaScript.

Su plugin de caché debería encargarse de esto (si no, asegúrese de que su configuración esté habilitada).

11. Combinar archivos

Si tiene varios archivos CSS o JavaScript, intente combinarlos en un solo archivo.

Cuantos menos archivos CSS y JavaScript tenga, menos solicitudes se cargarán en su sitio web.

Paso 1: Encuentra tu CSS (o archivos JavaScript).

Paso 2: Copie / pegue los contenidos para que estén todos en un archivo.

O bien, la mayoría de los complementos de caché tienen una opción para combinar CSS + JavaScript:

Minify Combine JavaScript Files

12. Evita complementos pesados

Si está usando complementos de WordPress, extensiones de Joomla o cualquier “complemento” que agregue funcionalidad a su sitio web, asegúrese de que no se agreguen a sus tiempos de carga (use GTmetrix para puntos de referencia).

Los complementos lentos más comunes están relacionados con carteras, controles deslizantes, redes sociales, creadores de páginas, chat en vivo, calendarios, estadísticas (análisis), formulario de contacto o complementos de publicaciones relacionadas.

Cómo encontrar complementos lentos en su sitio web
Si ve que el mismo complemento aparece varias veces en su informe GTmetrix, y tiene tiempos de carga altos en su pestaña Cascada, considere eliminarlo y reemplazarlo por un complemento más liviano. Para WordPress, también puedes usar Monitor de consulta para ver tus complementos de carga más lentos.

Bonificación: deshabilitar selectivamente los complementos
Use un complemento como Gerente de Activos para deshabilitar selectivamente la ejecución de complementos en ciertas páginas. Por ejemplo, si solo usa su formulario de contacto en la página de contacto, desactívelo en cualquier otro lugar.

13. Limpia tu base de datos

A medida que actualice las publicaciones, instale y elimine complementos, o realice otras tareas en su sitio web, esto comenzará a acumular hinchazón en su base de datos. Es mejor limpiarlo una vez cada 2 semanas más o menos..

Puede limpiar su base de datos usando el programa gratuito Complemento WP-Optimize, o use WP Rocket:

Base de datos limpia de WP-Optimize

14. Optimizar los recursos externos

Recursos externos son cualquier cosa, desde videos de YouTube incrustados a Google Fonts, Google Analytics, Gravatars y cualquier cosa que requiera que se extraiga información de un sitio web externo. Estos pueden destruir su informe GTmetrix, especialmente Google AdSense, ya que se ejecuta en cada página.

Consejos para optimizar recursos externos

15. Combina fuentes de Google

¿Está utilizando Google Fonts, Font Awesome u otras fuentes externas??

Estos probablemente causarán solicitudes adicionales en GTmetrix ya que son un recurso externo.

Google-Fonts-GTmetrix

Consejos para optimizar las fuentes de Google

  • Aloje fuentes de Google localmente
  • Solo seleccione las fuentes / pesos que necesita
  • Combine múltiples archivos de fuentes en 1 archivo (manualmente o mediante WP Rocket o Autoptimize)

16. Lazy Load Images + Videos

La carga diferida significa que las imágenes, los videos y los iframes solo se cargan una vez que los usuarios se desplazan hacia abajo en la página y realmente los ven. Esto puede mejorar significativamente los tiempos de carga inicial de sus páginas..

Los videos incrustados pueden ser uno de los elementos más pesados ​​en una página: cargar 2 videos (y reemplazar el iframe con una imagen de vista previa) raptó 4 segundos en una de mis publicaciones.

Para WordPress, puede usar WP Rocket, WP YouTube Lyte o el complemento Lazy Load.

Para Squarespace, prueba esto Función de carga diferida.

WP-Rocket-Lazy-Load

17. Evitar anuncios

Google AdSense es conocido por hacer que los sitios web se carguen lentamente, y ni siquiera es tan rentable. Puedes probar Balanceador de anuncios y Cargador de cohetes, pero tendrá muchos errores en su informe GTmetrix independientemente y estará mejor monetizando con el marketing de afiliación. Olvídese de AdSense: las personas más exitosas que ganan $ 50k + están utilizando enlaces de afiliados que no ralentizan su sitio.

Anuncios de GTmetrix

18. Considere AMP

AMPERIO (páginas móviles aceleradas) hace que sus páginas móviles se carguen más rápido mientras le proporciona un sello AMP en los resultados de búsqueda móvil. El problema es que esto cambia el diseño de sus páginas móviles. Puedes usar el AMP para el complemento WP para personalizarlos, pero no es lo mismo. Las conversiones de Kinsta cayeron un 58% cuando agregué AMP, entonces decidí deshabilitarlos en mi propio sitio. Pero vale la pena considerarlo. Aquí hay un Tutorial de AMP para Squarespace si estás usando eso.

19. Encuentra páginas lentas en Google Analytics

Puede encontrar sus páginas de carga más lenta en Google analitico debajo Comportamiento → Velocidad del sitio → Sugerencias de velocidad.

Muy a menudo, estas páginas se cargan lentamente porque tienen muchas imágenes, videos o recursos externos. Esto se debe a que la mayoría de los factores de velocidad se aplican a todo su sitio web, no solo a una página.

Speed-Suggestions-Google-Analytics

20. Optimizaciones específicas de WordPress

Ya he cubierto bastantes optimizaciones específicas de WordPress, pero aquí hay algunas más.

  • Use un plugin de caché mejor calificado como WP Rocket
  • Use un buen complemento de optimización de imagen como ShortPixel
  • Use el complemento Heartbeat Control para deshabilitar la API Heartbeat
  • Elimine todos los complementos que no esté utilizando y use complementos ligeros
  • Limpie su base de datos con frecuencia usando WP-Optimize o WP Rocket
  • Cache Gravatars usando un complemento como Harrys Gravatar Cache, FV u Optimum
  • Use Asset Manager para deshabilitar selectivamente la carga de complementos en ciertas páginas
  • Aloje Google Analytics localmente utilizando un complemento como WP Rocket o CAOS Analytics
  • Hospede fuentes de Google localmente utilizando un complemento como OMGF o fuentes de Google alojadas

21. Optimizaciones de WooCommerce

Por defecto, WooCommerce agrega scripts, estilos y fragmentos de carrito adicionales a su sitio web. También suelen requerir más complementos. Es por eso que al elegir un plan de alojamiento, es probable que desee utilizar VPS, cloud o alojamiento semi-dedicado para asegurarse de que pueda manejar el consumo de recursos adicionales. De lo contrario, en el alojamiento compartido, puede terminar excediendo los límites de CPU de su host.

Fragmentos de carro de WooCommerce

Deshabilitar fragmentos de carro – los fragmentos del carrito actualizan los artículos y el total en el carrito, pero pueden tardar entre 1 segundo y hasta 10 segundos en cargarse. Tu mejor apuesta es deshabilitar fragmentos de carrito en la página de inicio + publicaciones, ya que ahí es donde no se usan. Sigue ese tutorial.

Deshabilitar guiones de WooCommerce – WooCommerce también puede cargar alrededor de 8 scripts diferentes en su sitio web. Para deshabilitar estos, tome esto código de Github y agregarlo a su archivo functions.php.

Deshabilitar estilos de WooCommerce – WooCommerce también tiene estilos que se cargan en cada página. Aquí hay un guía para deshabilitarlos.

Perfmatters – Este ingenioso complemento de Kinsta facilita la deshabilitación de fragmentos de carro, scripts y estilos. Si desea una manera fácil de deshabilitarlos sin editar el código, pruebe este complemento premium.

Borrar sesiones de clientes – si su sitio WooCommerce es lento, intente borrar las sesiones de los clientes.

Aumente el límite de memoria a 256 MB – WooCommerce requiere que aumente su límite de memoria a 256 MB, pero realmente debería hacerlo para la mayoría de los sitios web. Aquí está un tutorial por hacer eso.

22. Contrata a alguien que sepa lo que está haciendo

Necesita ayuda para arreglar su sitio web de carga lenta?

Trabajo con algunos desarrolladores que se especializan en la optimización de velocidad de WordPress. Puede consultar su cartera en esa página, y les doy crédito por obtener mis puntajes de GTmetrix al 100%. Cole gestiona todos los proyectos de optimización de velocidad, puede comunicarse con él en [email protected]

23. Preguntas frecuentes

&# x1f680; ¿Qué factores tienen el mayor impacto en los tiempos de carga??

Elegir el alojamiento, los complementos y el complemento de caché correctos puede tener un mayor impacto en sus tiempos de carga. También es muy importante optimizar las imágenes y evitar recursos externos como Google AdSense. El uso de una red de entrega de contenido gratuita como Cloudflare también ayudará.

&# x1f680; Qué herramienta es mejor para probar la velocidad?

GTmetrix tiene las recomendaciones más sólidas de todas las herramientas de prueba de velocidad. Google PageSpeed ​​Insights es principalmente bueno para 1 cosa: medir los tiempos de respuesta del servidor.

&# x1f680; ¿Cómo puedo saber qué está ralentizando mi sitio web??

GTmetrix le dice qué imágenes deben optimizarse, si está utilizando un CDN, y los complementos que pueden aparecer varias veces en su informe o en su cascada de GTmetrix. También mide el tiempo hasta el primer byte, que es un buen indicador de si su alojamiento es lento.

&# x1f680; ¿Cuáles son algunos consejos de velocidad menos conocidos??

Muchas personas no actualizan su versión de PHP ni optimizan recursos externos como Google Fonts y videos de YouTube. La carga lenta de imágenes y videos, y el alojamiento de fuentes de Google y Google Analytics localmente pueden arreglar muchos elementos en GTmetrix. También debe unirse a los grupos de Facebook para obtener opiniones imparciales sobre los mejores proveedores de alojamiento, para evitar trampas de afiliados.

&# x1f680; ¿Qué hosting es mejor??

SiteGround y Cloudways son 2 proveedores de alojamiento sólidos que fueron altamente calificados en las encuestas de Facebook. SiteGround es uno de los hosts compartidos más populares y Cloudways para alojamiento en la nube. Estos suelen ser los 2 mejores en su clase.

&# x1f680; ¿Qué complemento de caché es mejor??

WP Rocket fue calificado como el complemento de caché n. ° 1 en múltiples encuestas de Facebook, ya que viene con muchas características de optimización de velocidad que la mayoría de los complementos de caché no tienen (carga lenta, limpieza de la base de datos, alojamiento de fuentes de Google y Google Analytics localmente). Debería obtener resultados óptimos con WP Rocket, de lo contrario Swift Performance es una buena alternativa de complemento gratuita.

Realmente espero que este tutorial haya sido útil. Si necesita ayuda, deje su informe GTmetrix en los comentarios y le responderé con algunas sugerencias. O considere contratar mi optimizador de velocidad.

Salud,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map