Usar devTools para mejorar el rendimiento

Home » Blog » 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.

Categorías


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023