Un montón de artículos de optimización se centran en cómo puede acelerar su sitio WordPress, como optimizar sus imágenes o moverse a un host más rápido. Aunque todas ellas son importantes, hoy queremos discutir con usted el impacto del rendimiento de terceros y cómo afecta a su sitio WordPress. Básicamente, cualquier cosa que llame externamente desde su sitio tiene consecuencias de tiempo de carga. Lo que hace que este problema sea aún peor es que algunas de ellas son sólo lentas de manera intermitente, haciendo que identificar el problema sea aún más difícil. Hoy vamos a explorar formas para identificar y analizar los servicios de terceros y los problemas de rendimiento.
- ¿Qué Son los Servicios Externos de Terceros?
- Identificando los Servicios Externos
- Analizar Problemas Continuos de Rendimiento de Terceros
- Analizar Problemas de Rendimiento de Terceros Intermitentes
¿Qué Son los Servicios Externos de Terceros?
Un servicio externo de terceros podría considerarse como algo que se comunica con su sitio WordPress desde fuera de su propio servidor. Aquí están algunos ejemplos comunes que encontramos en una base regular:
- Plataformas de medios sociales como Twitter, Facebook e Instagram (widgets o conversión de píxeles)
- Redes de publicidad de terceros como Google Adsense, Media.net, BuySellAds, Amazon Associates
- Análisis de sitios web como Google Analytics, Crazy Egg, Hotjar
- Herramientas de pruebas A/B como Optimizely, VWO, Unbounce
- Los sistemas de comentarios en WordPress como Disqus, Jetpack, comentarios de Facebook
- Herramientas de backup y seguridad como VaultPress, Sucuri, CodeGuard
- Herramientas de compartir en redes sociales como SumoMe, HelloBar
- Redes CDN como KeyCDN, Amazon Cloudfront, CDN77 y StackPath
- Javascript alojado externamente
Cómo los Servicios Externos Causan Problemas
Los servicios externos suelen conllevar dos problemas. Uno es provocado por gran volumen, el otro tiene que ver con la espera hasta que se carguen las páginas.
- Si usted tiene un montón de servicios externos, deberá cargar todos ellos y esperar información sobre ellos sobre la carga de cada página. Mientras más llamadas tenga, mientras más espere, mayor es la carga en su propio servidor y mayor probabilidad tendrá de encontrarse con el segundo problema.
- En algunos casos, la carga de la página tardará hasta que se haya completado la transferencia de datos entre su sitio y el servicio externo. Si el servicio es llamado en la cabecera y hay una interrupción del servicio su página simplemente se niega a cargar.
Por supuesto, hay cosas que se pueden hacer para acelerar los procesos, como cargar scripts de forma asincrónica, pero cubriremos esto después. En la mayoría de los casos, el gran volumen es uno de los mayores problemas que tendrá que afrontar a la hora de depurar los problemas de rendimiento de terceros.
Identificando los Servicios Externos
La identificación de estos servicios no es demasiado difícil. Una de las maneras más fáciles es abrir una herramienta de prueba de velocidad de sitio web, ya sea Pingdom, GTmetrix, WebPageTest o Chrome Devtools y ejecutar su sitio web a través de ella. Usted debe ver una lista de recursos que se cargaron. Pase el ratón por encima de un recurso y si no contiene su nombre de dominio en el principio, ese será un servicio externo o activo externo al que está llamando.
A continuación, puede ver que la versión miniaturizada de jQuery fue cargada desde una fuente externa (https://ajax.googleapis.com).
Si no sabe para que es el servicio exterior, siempre puede intentar navegar al dominio principal o buscar su nombre en Google, conforme al desarrollador o empresa asociada saldrá. Esta es una buena forma de determinar si el servicio es de fiar. Como puede ver a continuación, buscar el archivo jQuery resulta algunas compañías conocidas como jQuery y Google que describen alojar este archivo. Así que probablemente son seguras.
Analizar Problemas Continuos de Rendimiento de Terceros
Si su sitio web es siempre lento, tendrá que averiguar qué lo está retrasando. Si su sitio web tiene problemas intermitentes, eso es un poco más difícil. Empecemos con la lentitud continua. Estamos suponiendo aquí que su sitio web es lento debido a servicios externos. Mientras que muchos problemas de velocidad pueden ser causados por servicios externos, hay una gran cantidad de otros problemas, por lo que esto quizás no resuelva sus problemas.
Primero, usted necesita determinar si existe algún servicio que está tomando mucho tiempo para cargar y cómo afecta al rendimiento de su sitio. Así que hemos creado un sitio de prueba, alojado en Kinsta, que contiene lo siguiente:
- 2 anuncios de Google AdSense
- Facebook Like Box
- Widget de Instagram
- Comentarios Disqus
- Facebook conversion tracking pixel
- Google Analytics
Esto nos permitirá extraer cada servicio uno por uno y mostrar cuánto cada uno afecta la carga global del sitio. También compartiremos algunas estrategias alternativas para cargarlas. Después, puede aplicar las mismas estrategias para su propio sitio WordPress. Ejecutamos la prueba a través del sitio Pingdom y una de las primeras cosas que usted puede mirar es el «tamaño de contenido por dominio» y las «solicitudes de dominio». Si está viendo las peticiones, no de su nombre de dominio, lo más probable es que estas sean servicios externos o activos externos. Este es un buen lugar para comenzar. Como se puede ver a continuación static.xx.fbcdn.net tiene 37 solicitudes ¡lo cual no es bueno!
El tiempo de carga del sitio también fue de 1.94 segundos, que en realidad no es bueno porque, como usted puede ver arriba, el sitio de prueba no tienen ningún contenido en él. Esta es una prueba de menor escala para ayudarle a analizar mejor el desempeño de terceros. Cuanto más grande sea el sitio WordPress, más grandes sean los problemas. Pero fundamentalmente, la mayoría de los problemas pueden resolverse de una manera similar.
Abordar Google AdSense
La primera cosa que queremos abordar es Google Adsense. Normalmente, cuando usted ejecuta una prueba de velocidad puede pasar el cursor sobre cada barra para ver cuánto tiempo toma cada parte del proceso de carga. Usted debe estar buscando barras extra largas (en comparación con el resto) y lugares donde las barras sólo inicien la carga después de que una barra en particular haya terminado – estos son sus cuellos de botella. Una vez que haya encontrado un elemento específico que lleva demasiado tiempo o impide que otros recursos se carguen, deberá averiguar por qué está allí y de dónde viene.
Esto puede ser un poco difícil, la llamada al servicio puede ser codificada dentro de su tema, o puede provenir de un plugin. Sin embargo, como mencionamos anteriormente, también existe el problema de gran volumen. Si echamos un vistazo a las solicitudes por debajo de pagead2.googlesyndication.com y tpc.googlesyndication.com, podemos ver que las barras son relativamente cortas, lo que significa que no le están causando mucha demora. Algunas de ellas tienen un largo tiempo de recepción (barra verde), que es el tiempo que tarda el navegador web en recibir datos desde el servidor. El gran problema es cuando se agregan todas las solicitudes a la vez.
Nos gusta llamar a Google AdSense un servicio de terceros variable. Esto es debido a que cada vez que una página se carga un número diferente de peticiones y de activos son cargados. Esto hace que sea muy difícil determinar qué está causando problemas de rendimiento, ya que será diferente cada vez que se ejecuta una prueba de velocidad. A continuación, se encuentra tan solo un fragmento de algunas de las solicitudes de terceros que los anuncios están generando. Además, generan redirecciones, que tienen sus propios retrasos.
Usted podría pensar que es loco que sólo dos anuncios generen tantas solicitudes, pero así es cómo funcionan.
Opción 1: Carga Asincrónica
La primera opción es asegurarse de que se cargue de forma asincrónica. El atributo Async básicamente le dice al navegador que empiece a descargar el recurso de inmediato sin ralentizar análisis HTML. Una vez que el recurso esté disponible, el análisis HTML está en pausa así el recurso puede ser cargado. Código recién generado por Google AdSense tendrá este atributo por defecto, pero si tiene código que tiene un par de años ya, recomendamos verificarlo.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nogluten-top-right-page-300x250 -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="9805695044" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Asegúrese de ver nuestra otra publicación sobre la la eliminación de bloqueadores de visualización JavaScript y CSS. Esto puede ayudarle a comprender mejor cómo funcionan y cargan los scripts en su sitio WordPress.
Opción 2: Eliminar
La otra opción es extraer Google AdSense totalmente. Obviamente, para algunos sitios que dependen de ingresos de publicidad de terceros, esta no es una opción. Pero hemos visto sitios de e-commerce lanzar un anuncio de AdSense en su sitio, intentando hacer una ganancia rápida. Usted debe ser consciente de los problemas de rendimiento con esto. Si usted está vendiendo productos o servicios, los anuncios de AdSense de Google pueden hacer más daño que bien, y lastimar a su principal fuente de ingresos. Los blogueros, también pueden echar un vistazo en los anuncios de afiliados vs AdSense. Un montón de veces los anuncios de afiliados puede cargar desde su CDN y sólo habrá una única solicitud.
En este ejemplo, vamos a eliminar los anuncios para mostrar cómo sólo dos pequeños anuncios pueden afectar al rendimiento global de su sitio WordPress. Así que ejecutamos otra prueba de velocidad después de retirarlos y como puede ver nuestros tiempos de carga ¡bajaron de 1.94 segundos a 909 ms! Nuestras peticiones pasaron de 185 a 138, y nuestro tamaño total de página se redujo de 2 MB a 1.7 MB.
¡Es cierto! Dos pequeños anuncios añadieron cerca de un segundo a nuestro tiempo de carga total. Esta es la razón por la que a menos que su modelo de ingresos gire alrededor de anuncios de terceros, no las coloque en su sitio WordPress. Si usted tiene un problema con una red de anuncios y tiene un plugin que gestiona la red de anuncios para usted, es probable que la desactivación de ese plugin pueda resolver del problema. Si está codificado en el tema tendrá que modificar los archivos del mismo. Recomendamos hacer lo siguiente si usted es un desarrollador (si no lo es aquí usted aprender más acerca de cómo encontrar un buen desarrollador de WordPress).
Abordar Facebook Like Box
La siguiente cosa a mirar es la casilla de me gusta de Facebook que está causando todas esas solicitudes scontent.xx.fbcdn.net y static.xx.fbcdn.net. Podemos ver que las barras son relativamente cortas, lo que significa que no le están causando mucha demora. Sin embargo, una vez que las añada todas juntas y ahí es donde está el problema. De nuevo, este es un problema de gran volumen.
Recomendamos que cada propietario del sitio ¡se mantenga alejado de la casilla de me gusta Facebook! No sólo se generan una gran cantidad de peticiones a JavaScript externo, también carga un montón de imágenes. Aquí hay tres recomendaciones para manejar mejor esto.
Opción 1: Carga Asincrónica
Para utilizar la casilla de me gusta Facebook usted o un desarrollador tendría que agregar el siguiente código a la cabecera de su sitio WordPress. Existen algunos widgets de WordPress que se agregan a la casilla también.
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
El problema con el código anterior es que no se carga de forma asincrónica. El atributo Async básicamente le dice al navegador que empiece a descargar el recurso de inmediato sin ralentizar análisis HTML. Una vez que el recurso esté disponible, el análisis HTML está en pausa así el recurso puede ser cargado. No estamos seguros de por qué Facebook no agrega este atributo al script, pero puede ver la versión modificada a continuación la cual lo cargará asincrónicamente.
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async=true; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
Usted probablemente no notará una gran diferencia en los tiempos de carga si la verifica en Pingdom, pero sus visitantes definitivamente lo harán, ya que afecta a cómo y cuándo los scripts y los activos son cargados.
Opción 2: Utilice un Image Banner en Su Lugar
La siguiente recomendación es reemplazar la caja de me gusta de Facebook con una imagen del banner que simplemente enlace a su página de Facebook. Esto podría reducir instantáneamente los más de 40+ pedidos hasta 1 y usted ya no tendría dependencias externas. De esta forma puede ser muy creativo y es un buen equilibrio entre diseño y rendimiento.
Opción 3 – Deshacerse de Ella
Y finalmente, la última opción sería deshacerse de ella por completo. Eso fue justamente lo que hicimos en nuestro sitio de prueba y como puede ver a continuación, bajó a nuestros tiempos de carga de 909 ms a 786 ms. Esta redujo el peso global de la página de 1.7 MB hasta 1.0 MB y el número total de solicitudes de 138 a 78. Una cosa a realmente a señalar aquí es la reducción de peso de la página. La casilla de me gusta de Facebook ¡añadió 700 KB! Esto es bastante malo.
Abordar el Widget de Instagram
La siguiente cosa a mirar es el widget de Instagram. En nuestro ejemplo, estamos usando el plugin gratuito de Instagram Feed. El plugin no es el problema realmente, sino las solicitudes generadas de scontent.cdninstagram.com. Podemos ver que las barras son relativamente cortas, lo que significa que estas no están causando mucha demora. Sin embargo, una vez que añadimos todo junto ahí es donde está el problema. De nuevo, este es un problema de gran volumen. Usted probablemente lo puede ver formando un patrón aquí. Muchos de los problemas de rendimiento de terceros en sitios WordPress no son de retrasos con solicitudes individuales, sino de aquellas en primer lugar que no se preocupan por el rendimiento.
También recomendamos que la gente permanezca alejada del widget de Instagram, a menos que realmente lo necesiten, porque genera una gran cantidad de solicitudes. Aquí hay un par de recomendaciones para manejar mejor esto.
Opción 1: Utilice un Image Banner en Su Lugar
Al igual que con la casilla de me gusta de Facebook, a menos que usted realmente necesite un widget de Instagram dinámico, cree un banner en lugar que enlace a su página de Instagram. Esto podría reducir instantáneamente las más de 20 solicitudes hasta 1 y usted ya no tendría las dependencias externas. De esta forma puede ser muy creativo y es un buen equilibrio entre diseño y rendimiento.
Opción 2 – Deshacerse del Widget
Y, por supuesto, usted puede deshacerse de él por completo. Eso fue justamente lo que hicimos en nuestro sitio de prueba y como puede ver a continuación, bajó a nuestros tiempos de carga desde 786 ms a 690 ms. Se redujo el peso global de la página de 1.0 MB a 814.3 KB y el número total de solicitudes desde el 78 hasta el 57.
Abordar los Comentarios Disqus
La siguiente cosa a mirar son los comentarios de Disqus. En nuestro ejemplo, estamos usando el plugin gratis de Disqus Comment System. El gran problema con Disqus es que genera una gran cantidad de peticiones, así como tener que cargar el gravatar de cada persona del comentario. Hemos entrado en detalle acerca de esto en nuestras publicaciones sobre cómo acelerar los comentarios de WordPress.
También podría querer deshabilitar completamente los comentarios en WordPress.
Si usted tiene un gran sitio comercial, también podría tener que pagar para eliminar anuncios de Disqus y si no, eso acabaría en generándose aún más peticiones en su sitio. Puede ver a continuación un pequeño fragmento de sólo algunas de las peticiones que está generando.
Aquí hay un par de recomendaciones cuando se trata de lidiar con los comentarios.
Opción 1 – Comentarios de Disqus con Carga Diferida
La carga diferida es el proceso de no cargar los activos y los scripts hasta que la persona se desplace hacia abajo en la página. Esto asegura que la primera página se cargue más rápidamente. Usted puede fácilmente cargar comentarios de Disqus de carga diferida gratis utilizando el plugin gratuito Disqus Conditional Load de Joel James. Nosotros, de hecho, lo utilizamos en el blog Kinsta. Hemos instalado el plugin en nuestro sitio de prueba y como puede ver a continuación, bajó a nuestros tiempos de carga de 690 ms a 603 ms. Redujo el peso global de la página de 814 KB hasta 366.1 KB y el número total de solicitudes de 57 a 24. ¡Una cosa a destacar es la reducción de peso masiva en la página!
Opción 2 – Comentarios de Carga Diferida Nativa de WordPress
Su otra mejor opción sería la carga diferida nativa de comentarios de WordPress. Joel James, el mismo desarrollador del plugin de la carga diferida de Disqus también tiene un plugin gratuito llamado Lazy Load for Comments. Este funciona de manera muy similar al anterior. Hemos instalado el plugin en nuestro sitio de prueba y como puede ver a continuación, produjo casi las mismas reducciones en el tiempo de carga.
Abordar el Píxel de Seguimiento de Conversión de Facebook
Y, por último, echaremos un vistazo al pixel de seguimiento de conversión de Facebook. Obviamente, la mayoría de la gente utiliza esto para recopilar datos acerca de personas que visitan su sitio web, o de seguir las conversiones al ejecutar anuncios de Facebook. Por lo tanto, eliminar esto puede ser que no sea siempre una opción, y la verdad es que no hay nada que usted pueda hacer para mejorar el rendimiento de éste. Como se puede ver a continuación es responsable de generar 5 diferentes peticiones HTTP, y lamentablemente no son las más rápidas.
Simplemente vamos a quitar esto para mostrarle cuánto afecta el rendimiento del sitio. Después de retirarlo de nuestro sitio, nuestro tiempo de carga se redujo de 611 ms a 429 ms. Se redujo el peso global de la página de 367.5 KB hasta 343.2 KB y el número total de solicitudes de 27 hasta 22.
Los ejemplos anteriores son sólo algunos de los miles de servicios externos que pueden estar funcionando en su sitio WordPress. Es importante mirar cada uno y determinar cuánto afecta el rendimiento de su sitio web. ¡Como puede ver, sólo una manzana podrida puede causar problemas de gran magnitud!
Servicios Externos Pueden Mejorar el Rendimiento
Mientras que la mayoría de los servicios externos dañan el rendimiento de su sitio, hay aquellos que pueden ayudarlo también. Una CDN, como KeyCDN o CloudFlare puede acelerar drásticamente su sitio con una configuración mínima de trabajo involucrado. Eche un vistazo a nuestro tutorial sobre cómo configurar KeyCDN y cómo instalar Cloudflare. En este ejemplo a continuación agregamos KeyCDN a nuestro sitio de prueba. Como puede ver, este disminuyó nuestros tiempos de carga por otros 100 ms.
Más Optimizaciones
A continuación, hicimos algunas optimizaciones adicionales en el sitio WordPress para llevarnos a un grado de rendimiento de 100 y a 270 ms de tiempo de carga. Estas optimizaciones incluyen:
- Asegurarse de que todo se haya cargado desde el proveedor de CDN. Esto significaba alojar fuentes de Google localmente y resulta en una sola petición HTTP/2.
- Extracción de otros activos que generan solicitudes HTTP innecesarias como emojis, embeds, jQuery migrar, etc. hemos usado el plugin perfmatters.
Aquí hay más tutoriales en profundidad de algunas de las optimizaciones:
- Cómo Desactivar Emojis
- Cómo Desactivar Contenido Embebido
- Cómo Resolver los Errores «Leverage Browser Caching»
- Cómo Retirar las Cadenas de Consulta de Recursos Estáticos
Como puede ver, pasamos de tiempo de carga ¡de 1.94 segundos a 270 ms! Por supuesto, usted podría necesitar algunos servicios externos, cada empresa los necesita. Pero es importante que no se olvide de analizar cada uno de ellos. Si usted está viendo grandes tiempos de carga, avise el desarrollador o empresa responsable y presénteles el tema.
Prevención de Carga Parada
El mayor problema es cuando un script impide que se cargue la página mientras haya terminado de cargarse a sí mismo. Si un script como este se incluye en la cabecera puede mantener su sitio web en blanco hasta un tiempo indefinido. Debido a esto, cualquier cosa que no sea absolutamente necesaria en el encabezado debe colocarse en el pie de la página. Esto le permitirá a su sitio web cargar completamente antes de que el script problemático incluso comience la carga. Si utiliza la función wp_enqueue_script() (debería), puede utilizar el quinto parámetro para indicar que se debe cargar en el pie de página.
Si observa que un plugin carga un activo en el encabezado sin razón puede usar wp_dequeue_script() para quitarlo del encabezado y después, use wp_enqueue_script()() para registrarlo en la misma forma, pero en el pie de página.
Utilizando Google Tag Manager
Otra forma de ayudar a resolver los problemas de rendimiento de terceros es utilizar una herramienta gratuita como Google Tag Manager. Esto le permite administrar todos sus scripts y etiquetas en un solo lugar. Algunas de las ventajas de hacer esto es que van a cargar de forma asincrónica, la gestión resulta más fácil, y puede configurar disparadores de acciones para las páginas que cargan los scripts.
Sin embargo, existen algunos inconvenientes a esto:
Google Tag Manager no reduce el número de etiquetas en su sitio o aplicación, pero sí que simplifica la tarea de administración. Para sitios web, Google Tag Manager se ejecuta de forma asincrónica y puede ser configurado para accionar etiquetas sólo cuando sean necesarias, ayudando a que las páginas se carguen más rápidamente. (fuente).
Si utiliza Google Tag Manager también tendrá otra petición HTTP y búsqueda DNS para googletagmanager.com, aunque sea muy insignificante.
Le recomendamos buscar en Google Tag Manager en caso de sitios grandes sin optimizar que tienen un montón de servicios de terceros e integraciones. Para los sitios más pequeños con desarrolladores, probablemente no van a ver aumento notable en el rendimiento mediante el uso de GTM.
Analizar Problemas de Rendimiento de Terceros Intermitentes
La forma de resolver problemas intermitentes es la misma como que la manera de resolver los problemas continuos, pero identificar al culpable es más difícil. Implementar las soluciones anteriores podría ayudar ya, pero aún sería bueno saber qué está causando el problema. Una herramienta que nos gusta utilizar para esto es New Relic y de hecho, si usted es un usuario de Kinsta podemos monitorear esto en su sitio o permitirle utilizar su propia clave de licencia de New Relic. A continuación, puede ver un ejemplo de algunas redes de anuncios de terceros y tiempos de carga pesados asociados con ellos durante un período de tiempo.
Pero irónicamente, New Relic también puede causar problemas de rendimiento. En este caso se recomienda su uso hasta solucionar el problema y supervisión esporádica, no uso continuo. También puede utilizar una herramienta como GTMetrix para programar controles de velocidad por hora en su sitio. Después de un par de días puede comprobar y ver los resultados en un pequeño gráfico:
Esto le indica cuando el sitio fue más lento de lo normal. Haciendo clic en el pico del extremo derecho, primero para entrar en el informe creado en ese momento. Entonces podríamos ver la cascada para ver qué recurso creó el problema. Asegúrese de leer nuestra publicación en profundidad sobre cómo utilizar GTmetrix para diagnosticar problemas en el sitio.
Hay un activo que aparentemente bloquea los subsiguientes, eche un vistazo a la barra verde cerca del centro. Resulta que esta era de Google Recaptcha. 632ms puede parecer un parpadeo de ojos pero en realidad, es mucho. Una página realmente debe cargar en 2 segundos. Más de un tercio es absorbido sólo por este activo. El activo debe ser cargado más tarde, o debe ser echado en favor de otros métodos de verificación.
Resumen
Como puede ver, sólo unos pocos servicios externos pueden tener un impacto enorme. El rendimiento de terceros no debe ser ignorado y van juntos con optimizaciones in situ y de backend. Afortunadamente, hay mucho que se puede hacer, sobre todo si involucra un desarrollador. Deshacerse de servicios, modificarlos para cargar de maneras diferentes, como de forma asincrónica, proporcionando la misma cosa en una forma alternativa como un banner, todos ¡ellos pueden servir un largo tiempo haciendo a su sitio mucho más rápido!
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Deja una respuesta