Para desarrollar un sitio web de calidad hay que entender primero qué es lo que necesitan los usuarios, conocer los navegadores y dispositivos para poder crear una buena experiencia.
Actualmente uno de los navegadores de escritorio que ha tenido muy buena aceptación por parte de los usuarios es Google Chrome, el cual tiene en México un 70
% de market share en el mes de Julio de 2017:
Ref: gs.statcounter.com
En dispositivos móviles Google también es el rey con un market share del 68% seguido por Safari con el 17% respectivamente.
Además Google siempre se ha destacado por el apoyo que da a los desarrolladores para que puedan probar y optimizar sus sitios web con una serie de buenas prácticas y herramientas que permitirán mejorar la experiencia de usuario con una carga más rápida.
Por otro lado no debemos olvidar la posibilidad de tener sitios web que puedan visualizarse de manera correcta en múltiples dispositivos utilizando “Responsive Web Design” o “Diseño Web Responsivo o Adaptable”, por lo que las pruebas y herramientas que estaremos realizando van enfocadas a la revisión y validación de la carga de contenidos y su velocidad en equipos de escritorio, portátiles, tablets y móviles.
No porque Google sea el rey de los navegadores debemos olvidar realizar pruebas en otros de menor uso.
Las siguientes herramientas van enfocadas a mejorar la visualización y los tiempos de carga de los sitios web:
Google Test My Site
Es una herramienta online que permite realizar un análisis de una página web para que podamos obtener un diagnóstico que incluye un par de sugerencias para mejorar la navegación y experiencia de usuario.
Realiza una prueba en https://testmysite.thinkwithgoogle.com.
Al finalizar el reporte podrás revisar algunos de los resultados y poder enviarlos a tu buzón de correo electrónico para que tengas el detalle del análisis.
Es importante considerar que la mayoría de herramientas para mejorar el performance de tu sitio web requieren conocimientos y experiencia previa de programación, por lo que si no cuentas con ello, puedes apoyarte del área de Sistemas/TI de tu empresa o de alguien que se dedique al diseño, desarrollo y programación de páginas web.
Google Chrome Dev Tools
Es un grupo de herramientas integradas al navegador Google Chrome que permiten analizar, editar, depurar y probar nuestras páginas web para entender mejor cómo el navegador interpreta y carga los diferentes recursos de los cuales depende la página web para su correcta visualización y funcionamiento.
Lo mejor que podemos hacer es descargar Chrome Canary que tiene integradas las herramientas más nuevas que va desarrollando Google. Para mayor información sobre Chrome Dev Tools te recomiendo los siguientes enlaces:
- Developers Google donde encontrarás las mejores recomendaciones de uso de Chrome Dev Tools.
- Udacity es una plataforma donde existen algunos de los mejores cursos sobre tecnología y algunas otras áreas de especialidad relacionadas con la programación y la web. Los cursos que recomiendo para temas de performance son: Web Accessibility, Asynchronous JavaScript Requests, Responsive Web Design Fundamentals, Responsive Images, Browser Rendering Optimization y Web Performance Optimization.
Algunos ejemplos de funcionalidad con la que cuenta Chrome Tools son:
Analizador de Performance
Analizador de tráfico de red
Inspector de código fuente
Hay que tomar en cuenta que con la cantidad de dispositivos y navegadores que tenemos en la actualidad, debemos de considerar el uso de herramientas que nos permitan hacer pruebas en ellos. Además de Google Chrome Tools tenemos:
- Safari y iOS Simulator donde podremos analizar y depurar nuestras páginas web para navegadores desarrollados por Apple para sus dispositivos. Es importante contar con un equipo con macOS y el entorno de desarrollo X Code. Safari cuenta con un inspector de código fuente al estilo Chrome DevTools.
- Android Studio para el desarrollo de aplicaciones en Android y que incluye un emulador donde podremos hacer pruebas en múltiples navegadores basados en Android. Disponible en Windows, macOS y Linux.
- Browser Stack – Herramienta online para probar nuestro sitio web en múltiples versiones de Internet Explorer.
- F12 devtools para probar nuestro sitio web dentro de Microsoft Internet Explorer/Edge. Otra opción parecida al estilo Chrome DevTools en Windows.
- Máquinas Virtuales para pruebas en múltiples versiones de navegadores de Microsoft en sistemas operativos como Windows, Mac y Linux usando software de virtualización como VirtualBox, VMWare, Parallels, Vagrant, Hyper-V y VPC.
- Portable Apps para instalar diferentes versiones de navegadores como Firefox y Google Chrome para equipos con Windows.
- Pingdom Tools y GTMetrix – Herramienta online para pruebas de performance de sitios web.
- Google Pagespeed Insights (online) y Yahoo YSlow (plugin)- Análisis de performance de sitios web.
- Compresores de imágenes en macOS como ImageAlpha, ImageOptim e iResize o en Windows como PNGGauntlet, Caesium y Riot.
Por lo pronto con estas herramientas podrás iniciar el análisis, depuración y optimización de tu sitio web independientemente de qué lenguaje de programación o sistema operativo en el que se encuentre.
