En el anterior post de WPO hicimos un breve análisis de escuelamarketingastronomico.net. Utilizamos herramientas como Builtwith, PageSpeed Insight, Web Page Test o la propia consola de Chrome. De esta forma, nos pudimos hacer una idea del estado de salud de la web, para acto seguido, profundizar en aquellas áreas que habíamos observado que eran susceptibles de mejora.

Si quieres realizar una auditoría WPO, puede que este resumen del proyecto que presenté te inspire a la hora de llevarla acabo. Let’s go!

 

1 – TTFB (time to first byte)

Como vimos anteriormente, el tiempo de envío del primer byte por parte del servidor era muy elevado. Esto puede ser debido a cinco problemas:

  • El código.
  • Base de datos no optimizada.
  • Mala configuración del servidor.
  • Latencia.
  • Servidor insuficiente.

Ante la imposibilidad de poder entrar al servidor, recurrimos a la herramienta domaintools.com para descartar problemas de latencia o de servidor insuficiente.

datos de whois

Herramienta whois.domaintools.com.

Como se observa en la fotografía, Escuela Marketing Gastronómico está alojada en un servidor dedicado, por lo que la posibilidad de un servidor insuficiente, al menos por compartir alojamiento, queda descartada.

Lo que si detectamos es un posible problema de latencia, no tiene sentido tener alojada la web en EEUU cuando el público objetivo radica en España.

Si quieres saber qué es el TTFB y saber qué tiempos se consideran óptimos te recomiendo este post de SEOCOM.

 

2 – Peticiones HTTP internas y externas

Recapitulando, el número de solicitudes era de 86. Estudiando cada una de esas peticiones llegamos a las siguientes conclusiones:

Fuentes

Existen hasta 7 solicitudes de fuentes según lo observado en Web Page Test. De las cuales, después de leer el código fuente de la home, sólo se cargan 4 de ellas.

Código html

Peticiones externas a dos fuentes.

No obstante, siguen siendo un número excesivo de peticiones, que, además de ser externas, podrían hacer referencia a un único archivo alojado en nuestro servidor.

Solicitudes externas

Igual que lo recomendado en el apartado anterior para las fuentes, sirve para el resto de solicitudes externas. Lo ideal es tratar de alojarlas en nuestro servidor. De esa manera no dependeremos de la velocidad de terceros para cargar dichos recursos, podremos combinarlos y minimizarlos.

Como se aprecia a continuación, alrededor del 25% del peso de las solicitudes son externas.

Gráficos de webpagetest

Gráficos de solicitudes externas e internas de WebPageTest.

Combinar archivos CSS y JS

Abrimos las consola de Chrome y nos vamos a la pestaña Audits, chequeamos el site y, como se puede apreciar en la imagen, la consola nos sugiere unir los archivos. Hay 14 CSS y 25 JS alojados actualmente que se podrían combinar en uno solo.

Consola de Chrome

Combinar archivos CSS y JS.

Minificar archivos CSS y JS

Otra de las acciones que podemos implementar es comprimir todos los archivos CSS y JS con herramientas como csscompressorjscompress.

Evitar llamadas a recursos 404 y 3XX

Seguimos en la consola y, analizando el waterfall, detectamos una redirección 302 a un archivo del plugin Zopim. Siempre que sea posible, deberemos enlazar al archivo correspondiente sin que exista un redireccionamiento (status code 200).

Consola de Chrome, zopim

Peticiones externas con redirección.

 

3 – Código CSS y JS

Dejamos a un lado las peticiones para centrarnos en el código. Enumeramos una serie de recomendaciones:

Evitar tener CSS en el cuerpo del HTML

Código fuente

CSS en <head>.

Colocación óptima de los scripts

Hay scripts que bloquean la visualización superior de la página. Si no afecta al rendimiento, una opción puede ser cargarlos de forma asíncrona:

<script async >

 Si no, modificar, en el archivo function.php (suele estar ahí normalmente), la función que gestiona los scripts para que estos se carguen en el <footer> y no en el <head>.

Otra posibilidad, es gestionarlos con Genesis, como se ve en la imagen.

Genesis

Posibilidad de añadir scripts en el head y el footer.

Además, cargar antes los CSS externos que los JS externos, siguiendo las indicaciones de la consola de Chrome.

Consola de chrome y el orden de las peticiones

Ordenar los estilos y los scripts correctamente.

Ejemplo de lo que hay que evitar:

Código fuente

Reordenar, primero los CSS y luego los JS.

 

4 – Compresión Gzip o Deflate

Habilitar la compresión gzip o deflate. Lo ideal es ir al archivo .htacces que cuelga de la raíz, y pegar uno de los códigos. Como vemos en la imagen, escuelamarketingastronomico.net tiene margen de mejora.

check gzip compression

Herramienta checkgzipcompression.

 

5 – Cache del navegador

El cache en el navegador reduce los tiempos de carga cuando el usuario accede por segunda vez a una url, mejorando así la experiencia de navegación.

Como en el caso anterior, colocar el siguiente código en el archivo .htaccess.

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault "access plus 600 seconds"

ExpiresByType image/x-icon "access plus 604800 seconds"

ExpiresByType image/jpg "access plus 604800 seconds"

ExpiresByType image/jpeg "access plus 604800 seconds"

ExpiresByType image/png "access plus 604800 seconds"

ExpiresByType image/gif "access plus 604800 seconds"

ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/javascript "access plus 604800 seconds"

ExpiresByType application/x-javascript "access plus 604800 seconds"

ExpiresByType text/html "access plus 7200 seconds"

ExpiresByType application/xhtml+xml "access plus 7200 seconds"

</IfModule>

<IfModule mod_expires.c>

<filesmatch ".(gif|GIF|png|jpg|jpeg|JPG|js|css|swf|ico)$">

ExpiresActive On ExpiresDefault "access plus 30 day"

</filesmatch>

</IfModule>

Como último recurso, si no podemos acceder a .htacces, podemos instalar un plugin como WP Super Cache.

 

6 – Optimización de imágenes

El número total de imágenes que se cargan en la home es de 19, con un peso total de 834 KB. Los tamaños son correctos y la extensión también salvo en el caso de la imagen OK-logos-clientes.jpg cuyo peso se puede reducir a la mitad sólo con el hecho de guardarla como.png.

JPG = 82Kb          VS          PNG = 47 Kb

Logos clientes marketingastronomico.net

Una vez revisado tamaño, extensión y paletas de colores utilizadas, las comprimimos utilizando la herramienta tinypng (se adjuntan con el documento).

Antes de la compresión = 834 Kb     VS     Después de comprimirlas =326 Kb

 

7 – Inspeccionando el código fuente

Revisamos el código fuente de la página principal, con el objetivo examinar qué se carga exactamente en el header (lugar dónde suele haber más problemas).

Llaman la atención tres enlaces a diferentes páginas de wordpress.org y de wordpress.com. No tiene sentido mantener dichos enlaces en el <head>.

Código fuente

Seguimos inspeccionando el código fuente y nos encontramos con que el código de seguimiento de Analytics lo introduce un plugin, MonsterInsights cuando lo podemos hacer nosotros mismos.

Código Analytics

 Comentarios innecesarios y otro enlace a una web de WordPress, con redirección 301.

Código html Como se comentó anteriormente, para evitar que el javascript bloquee la visualización de la parte superior de la página, colocar todos los CSS antes de los scripts.

 Reordenar scripts en html

Más enlaces a páginas de WordPress y de nuevo insertado el código de Analytics mediante el plugin de Woocommerce.

Código Analytics insertado con woocommerce

 

Conclusiones

Hasta aquí lo que dio de sí el proyecto de la auditoría WPO de escuelamarketingastronomico.net. A la hora de chequear una web es importante no solo utilizar PageSpeed Insights, sino también otras herramientas como WebPageTest para corroborar datos y recolectar el máximo de información. Una vez hecho esto, este caso práctico te puede servir de guía a la hora de auditar una web.

¿Te ha resultado útil?, ¿tienes alguna duda?

Artículos relacionados

0 comentarios

Enviar un comentario

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


He leído y acepto las políticas de privacidad

Recursos de marketing online

Contacto

Copyright 2018 | Indexingdata® Agencia de Maketing Digital y Publicidad en Soria | Políticas de privacidad Política de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies