Usar devTools para mejorar el rendimiento

El marketing online está muy condicionado por las condiciones que implanta Google, y este está obsesionado con el rendimiento y la usabilidad de las webs, y precisamente las herramientas más conocidas (WordPress, Prestashop, etc) son cada vez más fáciles de usar pero se descuida el rendimiento. Por esta obsesión, el propio Google nos ofrece dentro de su herramienta para desarrolladores DevTools un modo de ver el rendimiento de nuestra web y nos da idea de porque va tan lento.

¿Por qué es tan importante?

Una web se compone de: HTML, CSS, JAVASCRIPT, imágenes, fuentes, en ocasiones AJAX, vídeos, etc. Y llevar un control sobre todo es IMPORTANTISIMO si queremos que nuestra web:

1. Cargue rápido.
2. No cargue información innecesaria.
3. Los usuarios no se desesperen esperando que se cargue nuestra web, ofreciéndoles contenido antes de que termine de cargar.
4. No deje a los usuarios sin datos en el móvil.
5. Google nos premiara con un buen posicionamiento (No solo con eso, claro).

Como he mencionado arriba, hay muchas herramientas que permiten construir webs rápidamente, y eso hace que el coste sea menor… pero, si de verdad queremos vender, necesitamos estar arriba en los buscadores, y para ello, cuidar los detalles del rendimiento es clave… y precisamente estas herramientas PUEDEN ser perjudiciales. Por qué¿? 

• Instalan muchas opciones que igual no necesitamos. (Los temas de WordPress de pago, vienen con muchas opciones, si no las necesitamos, a largo plazo son un problema)
• Instalan mucho código fuente de una página concreta para todas. Por ejemplo, si tenemos CSS exclusivo de una página lo ideal sería que no se cargue en el resto.
• Su sencillez las convierte en su mayor peligro. Comprar una plantilla y en 3-4 días tener una web visualmente decente, es un hecho. Pero, hay que fijarse en el rendimiento antes que en el diseño.
• Plugins al alcance de todos. Hay miles de plugins. Se instalan en 3 minutos, y se configuran en 2. Pero pueden lastrar nuestra velocidad o incluso la seguridad.

Pestaña Networks

En la pestaña Networks de las herramientas de desarrollo de Google Chrome podemos ver que debemos corregir. Para abrirla debemos ir a los 3 puntos verticales del Chrome (arriba derecha) -> Más Herramientas -> Herramientas para desarrolladores -> pestaña Network.

Su uso es muy sencillo, simplemente con la pestaña abierta, refrescamos la página y veremos cómo se genera una línea temporal con los diferentes recursos que se cargan en esa página. (OJO: Usa esta herramienta sin estar logueado en WordPress u otra herramienta, ya que analizaría los menús correspondientes y no lo que realmente ven los usuarios y buscadores).

La tabla nos devuelve un montón de información: Nombre del recurso, Estado del servidor, tipo de documento, etc. Pero hay 3 columnas que son realmente útiles:

• Size: Es el tamaño del recurso. En este caso cada recurso tiene sus particularidades: Por ejemplo, una imagen tiene un peso que se puede reducir a costa de perder calidad, y un CSS se puede reducir quitando comentarios o reduciendo líneas mediante minificación.
• Time: El tiempo que tarda en cargarse no solo depende del tamaño, la ubicación y/o el rendimiento del servidor puede incidir en este factor.
• Waterfall o cascada: Podemos ver, de forma gráfica, cuando se cargan los elementos y cuanto tardan.

Pinchando con el botón derecho encima de los nombres de la tabla se pueden cambiar los campos que queremos ver. Y en la línea de abajo podemos ver el tiempo de carga total (Finish).

Como medir

Otro aspecto con el que hay que tener cuidado es con la cache, siendo recomendable medir el rendimiento sin cache, ya que es como nuestros clientes llegarán por primera vez. Para ello podemos usar la herramienta con el navegador en modo incógnito, o podemos configurar que se ejecute sin cache desde el botón de arriba: Disable cache.

Otra buena idea es probar la carga para diferentes tipos de conexión y para ello a la derecha del Disable Cache tenemos un selector en el que podemos simular por ejemplo la conexión 3G de un móvil.

Otra característica importante es la posibilidad de capturar pantallazos durante la carga desde Network -> capture screenshots, activamos la cámara y recargamos la página, aparecerá un timeline con las capturas de pantalla. Podemos ver lo que el usuario verá durante la carga, es importante que el usuario pueda ver algo lo antes posible, por ejemplo cargar el texto de forma legible y luego los detalles visuales.

En que fijarnos

• En el tiempo total: Primero sin cache y desde un móvil, si es un buen resultado (2-4 segundos) estará todo genial. Luego para escritorio y con Wifi pero sin cache y finalmente probar con la cache activada.
• Revisar el tamaño del CSS y JS: Primero deberíamos reducir tu tamaño mediante la minificación (reducir espacios en blanco, comentarios, y líneas del fichero).
• Revisar el número de ficheros JS y CSS: Debemos intentar unificarlos en 1 único fichero CSS y 1 único fichero CSS, con ello evitaremos llamadas al servidor. Para estos dos últimos puntos podemos usar la herramienta clousure compiler de Google, que minifica y unifica ficheros.