Cuando estamos desarrollando una web, debemos plantearnos que esa web tiene que ser amigable para los usuarios, debemos pensar no solo en la vistosidad de nuestra web final, sino tenemos que plantearnos como se usara y que problemas pueden darse. Para llevar un control de nuestros desarrollos Google ha creado un conjunto de herramientas conocidas como DevTools o en castellano Herramientas para desarrolladores y se incluye junto al navegador Google Chrome.
Abrir DevTools
Para poder analizar una web, abrimos el navegador Chrome, cargamos la web que queremos analizar y vamos al menú de Chrome de los 3 puntos verticales (arriba derecha) -> Más herramientas -> Herramientas para desarrolladores.
Veremos que se nos divide la pantalla en 2, en un lado veremos la web que queremos analizar y en el otro veremos las diferentes herramientas de DevTools.
Opciones de Devtools
Las opciones son las que se encuentran en la barra de arriba del todo de la pantalla de devtools y podremos cambiar entre una y otra en cualquier momento. Las opciones podemos resumirlas en:
- Revisar código fuente: Si empezamos por la izquierda el primer icono (Una especie de flecha o puntero) sirve para seleccionar un elemento dentro de nuestra web y nos cargará en DevTools el HTML y CSS del elemento seleccionado.
- Modo móvil o dispositivo: El siguiente es un icono (un móvil) que tras pincharlo podremos emular nuestra web en formato móvil.
- Pestaña Elements: Nos permite visualizar y editar el HTML y CSS de nuestra web. Nos permite hacer pruebas antes de subirlas a nuestra web final, ahorrando tiempo en subir y probar. Mediante el primer icono (Revisar código fuente) podemos ver el código de un elemento concreto.
- Pestaña console: Es muy útil para interactuar y hacer pruebas de javascript. Por ejemplo podemos llamar a funciones de nuestra página y ver sus resultados.
- Pestaña source: Nos permite depurar y encontrar errores de javascript poniendo puntos de interrupción, o podemos ver un css completo, copiarlo con los cambios y llevarlo a nuestro código.
- Pestaña Network: Nos permite ver los elementos que se descargar y sus tiempos, permitiéndonos localizar problemas sobre los que debemos prestar atención. Por ejemplo, podemos ver que imágenes tardan en cargar y reducir su size.
- Pestaña perfomance: Se usa para medir el rendimiento de la carga de la web, pudiendo ver mediante pantallazos la evolución.
- Pestaña memory: Se usa como complemento de la pestaña anterior.
- Pestaña application: Se pueden ver todos los recursos que se cargan en la página actual como son imágenes, js, fuentes, etc.
- Pestaña security: Sirve para comprobar si hay problemas de seguridad.
- Pestaña Audits: Permite realizar una auditoría de la página, mostrando errores que debes revisar para mejorar la velocidad de carga. Por ejemplo aporta información sobre la cantidad de css que se carga pero no se usa en esa página.
Resumen y problemas
En definitiva, si queremos que los diferentes buscadores nos den un empujón en sus rankings, deberíamos trabajar más estas herramientas que la vistosidad de las webs. Es de sobra conocido que Google cada día valora más la velocidad y rendimiento de una web.
Los problemas radican en los precios y tiempos de los desarrollos, webs corporativas con WordPress bastante vistosas las hacemos en 1 semana, pero estas herramientas (no solo WordPress, que es la que menos) generan problemas de rendimiento ya que son CMS pensados un poco para todo, y entre sus mayores problemas desde el punto de vista del rendimiento son:
- Cargan css para todas las páginas. Es decir, para contacto se cargan todos los estilos, cuando igual la mitad no se usan.
- Miles de temas y plugins. Hay plugins y temas que permiten hacer de todo, incluso permiten generar contenido al cliente mediante coger y arrastrar. Pero, generar un sinfín de código basura. ¿Qué pinta un product.css en la home si no hay productos?
Vamos que al final lo barato sale caro, como casi todo en la vida. Y más si queremos entrar en una pelea por los primeros puestos de Google.