Mas velocidad en wordpress con GTmetrix

Aquí están algunos de los problemas más comunes de GTmetrix wordpress y cómo solucionarlos para mejorar su puntuación en velocidad web  y mejorar el posicionamiento seo.

gtmetrix

Optimizar las imágenes

La compresión de sus imágenes le permite reducir el tamaño de los archivos con una pérdida mínima de calidad, dependiendo de su algoritmo de compresión.

Para optimizar y comprimir automáticamente todas las imágenes de tu sitio WordPress, puedes usar el plugin Optimole o tambien puedes buscar en Google play store.

Aprovechar el almacenamiento en caché del navegador

El almacenamiento en caché de los navegadores acelera los tiempos de carga almacenando ciertos activos estáticos en los navegadores locales de los visitantes. Esto significa que, en visitas posteriores, los navegadores de los visitantes pueden servir esos activos desde las computadoras locales de los visitantes en lugar de descargarlos en cada visita.

Muchos plugins de cacheo de WordPress ya ofrecen cacheo de navegadores, incluyendo WP Super Cache, WP Rocket y WP Fastest Cache.

Editar imágenes a escala

Una imagen a escala es una imagen que está perfectamente dimensionada para las dimensiones para las que la usas. Tenemos un post completo sobre el concepto de imágenes a escala en ThemeIsle.

Una forma fácil de servir imágenes escaladas en WordPress es, de nuevo, con el plugin Optimole – puede hacer automáticamente el trabajo por usted para que sus imágenes estén siempre perfectamente escaladas sin importar el dispositivo que un visitante esté usando.

Especificar las dimensiones de la imagen

Este implica HTML – quieres especificar el ancho y alto real de una imagen cuando la incrustas.

WordPress hará esto de forma predeterminada cuando insertas imágenes en el editor, pero querrás asegurarte de especificar las imágenes que utilizas en otros lugares (como en un plugin).

Minimizar HTML, CSS y JavaScript

Son técnicamente tres reglas separadas, pero las estoy agrupando porque el concepto básico es el mismo.

La minimización implica eliminar los caracteres innecesarios del código de tu sitio sin cambiar su funcionalidad. Por ejemplo, eliminar los espacios en blanco y los saltos de línea.

Algunos plugins de rendimiento de WordPress, como WP Rocket, incluyen la minificación. O bien, puedes usar el plugin gratuito Autoptimize para minificar el código de tu sitio.

Evitar redirecciones de la página de destino

Las redirecciones de URL son útiles para dirigir el tráfico. Sin embargo, debes evitar usarlas si es posible porque ralentizarán tu sitio web.

Para solucionar esto, asegúrese de que todos sus enlaces internos vayan directamente a la URL actual, no confíe en las redirecciones para solucionar las cosas. Por ejemplo, si redirige automáticamente http://yoursite.com a https://yoursite.com para forzar el uso de SSL, asegúrese de que siempre enlaza con la versión HTTPS de su sitio para evitar redirecciones innecesarias.

Diferir el análisis de JavaScript

Cuando se habla de los tiempos de carga de las páginas, la rapidez con la que su sitio web se hace visible es muy importante, si no más, que el tiempo que tarda en cargarse todo el sitio.

JavaScript puede ralentizar esto forzando a los navegadores de los visitantes a pausar la página para descargar y analizar JavaScript. Es por eso que a menudo lo verás llamado «JavaScript bloqueador de renderizado».

Para arreglar esto, debes tratar de diferir el análisis de JavaScript para que tu sitio sólo comience a cargar/parar ese JavaScript una vez que la parte visible de tu sitio web ya se haya cargado.

WP Rocket incluye una herramienta incorporada para ayudarte a hacer esto. O, puedes usar el plugin gratuito Async JavaScript, que viene del mismo desarrollador del plugin Autoptimize.

Combinar imágenes usando sprites CSS

Esta es una técnica avanzada que permite combinar múltiples archivos de imágenes en un solo archivo usando CSS. Esto te permite reducir el número de peticiones HTTP necesarias para cargar tu página.

No deberías usar sprites CSS para todas tus imágenes porque hay implicaciones negativas de SEO y de accesibilidad (porque ya no puedes añadir texto alternativo a la imagen). En su lugar, sólo deberías usar los sprites CSS para imágenes decorativas, como los logotipos de tus clientes o los iconos de las redes sociales.

Desafortunadamente, no hay ningún plugin para configurar automáticamente los sprites CSS, tienes que hacerlo manualmente. A continuación te explicamos cómo.

Habilitar la compresión

Ya hemos hablado antes de la compresión de imágenes, pero esta «compresión» se refiere a la compresión de todos los archivos de su sitio web a nivel de servidor usando algo llamado compresión Gzip.

En promedio, la compresión Gzip puede reducir el tamaño de los archivos de tu sitio en un 70%.

Muchos plugins de rendimiento de WordPress pueden ayudarte a habilitar la compresión Gzip, incluyendo WP Rocket, WP Super Cache y WP Fastest Cache. O bien, puedes usar el sencillo y gratuito plugin Enable Gzip Compression para una solución dedicada.

YSlow tab

Tu puntuación de YSlow sigue un enfoque similar a tu puntuación de GTmetrix, sólo que utiliza un conjunto diferente de reglas para probar. La lista es un poco más pequeña – la pestaña YSlow de GTmetrix contiene solo 19 reglas.

Al igual que tu puntuación de PageSpeed, cada regla tiene su propia puntuación y tu puntuación global se basa en el promedio ponderado de esas puntuaciones.

Estas son algunas de las recomendaciones más comunes que encontrarás

Usar una red de entrega de contenido (CDN)

Un CDN acelera los tiempos de carga de la página de su sitio al entregar el contenido estático de su sitio desde una red de servidores en todo el mundo. Obtenga más información en este artículo.

Para servir sus imágenes a través de una CDN, puede utilizar el plugin gratuito Optimole. Para utilizar un CDN para todos los archivos estáticos de su sitio, Cloudflare es también una buena opción.

Minimizar JavaScript y CSS

Ya he cubierto esto en la sección de GTmetrix. Puedes minar tu CSS y JavaScript con un plugin dedicado como Autoptimize. O, muchos plugins de rendimiento de WordPress también incluyen sus propias características de minificación.

Componentes de la compresión

Esto es lo mismo que la recomendación «Habilitar la compresión» de la pestaña Pagespeed. Puedes arreglarlo activando la compresión Gzip.

Muchos plugins de cacheo de WordPress incluyen una función de compresión Gzip. O, puedes usar el plugin dedicado a Habilitar la compresión Gzip.

Evitar redireccionamientos de URL

Esto es lo mismo que «Evitar redireccionamientos de la página de destino» en PageSpeed.

Intenta siempre enlazar con el URL actual de una página, en lugar de confiar en los redireccionamientos para mover a la gente al destino correcto.

Reducir las búsquedas de DNS

Los navegadores de los visitantes deben realizar una búsqueda DNS para cada dominio del que su sitio tiene contenido.

Siempre tendrás al menos una búsqueda DNS para tu propio sitio. Pero si utiliza servicios externos en su sitio (como Google Fonts o el script de rastreo de Google Analytics), eso resultará en búsquedas DNS adicionales.

Dos soluciones son:

Eliminar el servicio externo si es innecesario
Intenta alojar el contenido por ti mismo si es posible, como alojar las fuentes de Google en tu propio servidor en lugar de confiar en el CDN de las fuentes de Google. Este plugin puede ayudar.

Pestaña de la cascada

La pestaña Cascada es un poco avanzada, pero es una herramienta muy útil para entender cómo se cargan las diferentes partes de su sitio y dónde puede haber pequeños cuellos de botella que ralenticen todo su sitio.

Cuando abras la pestaña Cascada, verás una lista de cada solicitud HTTP de esta página (estas son las «Solicitudes» del resumen de resultados de GTmetrix wordpress).

Cada objeto de tu página es una solicitud HTTP separada. Por ejemplo:

Cada imagen es una petición HTTP (¡a menos que use sprites CSS!)
Cada archivo CSS o JavaScript es una petición HTTP
Cualquier secuencia de comandos externa que estés cargando (como Google Analytics) también será al menos una solicitud HTTP
Etc.

Menos solicitudes HTTP generalmente significa un sitio web de carga más rápida.

Además, como verás cuando mires la lista, cada solicitud HTTP tarda una cantidad diferente de tiempo en cargarse y se carga en un orden diferente (algunas incluso bloquean otras), por lo que si puedes encontrar y eliminar las solicitudes HTTP de carga lenta, puedes marcar una gran diferencia en los tiempos de carga de las páginas de tu sitio.

Puedes ver los detalles de cada solicitud HTTP cuando pasas el cursor por encima de ella. Por ejemplo, esta imagen de garbanzos marroquíes tardó 102,4 ms en cargarse:

También puedes usar el filtro y las opciones de búsqueda de la parte superior para encontrar peticiones HTTP específicas. Por ejemplo, si buscas wp-content/plugins puedes encontrar las peticiones HTTP que se añaden por los plugins de tu sitio WordPress.

Puedes incluso buscar más para encontrar peticiones de plugins específicos. Por ejemplo, si buscas wp-content/plugins/elementor aparecerán todas las peticiones del plugin de construcción de páginas Elementor:

Si encuentras que un plugin está añadiendo muchas peticiones HTTP de carga lenta y no te da muchos beneficios, puede que quieras considerar su eliminación y encontrar una alternativa mejor.

Pestañas de Tiempo, Video e Historia

Voy a agrupar las tres últimas pestañas de la prueba de velocidad del GTmetrix porque probablemente no las usarán tan a menudo, y no creo que requieran una avería profunda.

Tiempos

La pestaña Tiempos te da más detalles sobre el tiempo que se tarda en alcanzar varias métricas de tiempo de carga, que puedes mejorar mucho usando hosting gratis y de calidad. También puedes encontrar esta información en el gráfico de la cascada – la pestaña Tiempos sólo hace un poco más fácil de visualizar.

Si pasas el cursor por encima de una de las métricas, GTmetrix mostrará una descripción

Video

Si habilitaste la carga de vídeos de la página cuando iniciaste la prueba, puedes verlos en la pestaña Vídeo.

También podrás reducir la velocidad hasta 1/4 de la velocidad original para ver las cosas con más detalle.

Los vídeos son útiles porque te permiten ver no sólo cuándo se carga el sitio, sino también cómo se carga. Por ejemplo, ¿qué partes de tu sitio son visibles primero? ¿Hay algún fallo extraño durante la carga como un «flash de contenido sin estilo»? Estas son cosas útiles que debe saber mientras optimiza el rendimiento de su sitio.

Historial

Por último, si prueba una página varias veces, la pestaña Historial le permite ver los resultados de pruebas anteriores para que pueda analizar cómo han cambiado las cosas con el tiempo.

Guardará todas las pruebas de esta página de los últimos 30 días. Después de eso, los resultados de las pruebas históricas se eliminan.

Por ejemplo, si realizas algunos ajustes para mejorar los resultados de las pruebas de velocidad de  GTmetrix, podrás ver cómo esos cambios se traducen en mejoras reales en el tiempo de carga de la página.

Obtén más de la prueba de velocidad de GTmetrix WordPress

Si quieres sacar el máximo provecho de la herramienta de prueba de velocidad GTmetrix, debes ir más allá del cuadro de resumen y profundizar en los detalles que aparecen a continuación.

No querrás obsesionarte demasiado con tus resultados de rendimiento de GTmetrix, pero las sugerencias que se incluyen en los resultados proporcionan una guía útil sobre las áreas en las que puede faltar la optimización del rendimiento del front-end de tu sitio.

Además, la pestaña Cascada es una gran herramienta para indagar en aspectos específicos del rendimiento de tu sitio, como encontrar imágenes, scripts o plugins que están teniendo un efecto desmesurado en los tiempos de carga de las páginas de tu sitio.

 

Deja un comentario

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