Análisis
forense
de una web
por Miguel Ángel Holmes Durán
Ponente:
Miguel Ángel Durán García
Profesión:
Enabler Frontend en Schibsted Spain
Twitter:
@midudev
Tabla de contenidos
1. Introducción
2. Observación básica
3. Nuestro telescopio
3. Medición
4. Simulación
5. Experimentación
5. Automatización
6. Aprendizaje
7. Preguntas
Introducción
¿Y este quién es?
@galileo_galilei 🇮🇹 Vengo dall'Italia. Adoro mangiare la pizza mentre guardo il cielo. #imprenditore #scientifico #adoroJavascript
Ocupación:
Ástronomo, filósofo, ingeniero, matemático, físico y programador web.
Padre de:
la ciencia
la física moderna
la astronomía moderna
¿Quién soy? 🤔
geocentrismo
Y también se cargó el geocentrismo
tuvo algún problema con la iglesia... ¡por hereje!
🌍
¿Y por qué estamos hablando de este buen hombre aquí?
La importancia de los instrumentos para observar y medir
La importancia de los instrumentos para observar y medir en la web
No admitir como verdad lo que no sea evidencial o probado, ordenándolo de lo sencillo a lo complejo, y enumerando sin omitir nada.
Metodología:
Extraído de Wikipedia: https://es.wikipedia.org/wiki/Medicina_forense
La medicina forense enseña y aplica el método galileico.
Mi profesor de física en el instituto, orgulloso de que haya colado a Galileo en una charla de desarrollo web.
Observación básica: Código fuente
ViolaWWW, 1992
W3C Internet History https://www.w3.org/History/19921103-hypertext/hypertext/Viola/Review.html "The third is is source viewer which allows you to see the HTML source of a document in a separate window. This is useful for information providers, and also for explaining how WWW works!"
view-source:https://www.google.es/
¿Qué podemos ver en el código fuente de una web?
Conocer rápidamente si usa alguna tecnología
Wordpress 🧐, jquery y un trillón de plugins 🤪
Drupal 🧐, Google Maps, posible PWA...
Mensajes ocultos
Mensajes NO tan ocultos 😋
Text
VISTO EN TV! 📺
Cosas que no deberían estar ahí...
Malware
Comentarios de compañeros que decidieron dejar para el futuro sus problemas y se lo hizo saber a todo el mundo.
Cosas que detectas que se pueden mejorar...
Y más...
Soporte de navegadores (< IE11)
Dependencias actualizadas
Estrategias de performance
Importancia del SEO en la página
Si a una web le han puesto cariño
La observación básica nos permite hacernos una idea pero podemos llegar a conclusiones erróneas...
🤪
emojicentrismo
Nuestro telescopio:
Las Developer Tools
y otras herramientas
Nuestro telescopio:
Las Developer Tools
Herramientas:
Venkman JS Debugger
View Rendered Source Chart Console2
Aardvark
MochiKit
The History of Firebug: http://flailingmonkey.com/the-history-of-firebug/
Nunca un programa con el logo de una cucaracha llegará tan lejos. ¡Gracias Firebug!
El padre de las Developer Tools
Y la actualidad...
Medición:
Peticiones, performance y cobertura de código
Midiendo las peticiones
Midiendo las peticiones
Ejemplo: bytes.schibsted.com
Ejemplo: bytes.schibsted.com
- Cargamos algunas imágenes duplicadas y ocupan MUCHO. Tardan hasta segundos. Eliminar duplicidades, optimizar imágenes.
- Cargamos demasiadas cosas de forma síncrona. Dejar de bloquear el render con async.
- 18 archivos JS, 14 CSS. ¿Unificar? ¿Hace falta cargarlas todas?
- Cargamos imágenes que no se ven desde el principio. ¿Simplificamos el diseño? ¿Lazy Load?
- 10 de los 11 MB que cargamos son imágenes.
¡GRATIS POR TIEMPO LIMITADO!
Midiendo la performance
Midiendo la performance
- Analizar los frames por segundo
- Encontrar cuellos de botella
- Observar el renderizado de nuestra página
- Detectar posibles leaks
- Calcular complejidad de la página
Ejemplo: fotocasa.es
Midiendo la cobertura de código
Midiendo la cobertura de código
- Detectar código y estilos usado en
la página
- Priorizar qué deberíamos cargar cuanto antes en nuestra página web
- Localizar recursos que no estamos usando o lo infra-utilizamos.
- Descubrir ramas de código que no se ejecutan.
- Entender como nuestros recursos se van utilizando conforme vamos navegando.
Ejemplo: fotocasa.es
Saber medir,
nos permite extraer evidencias probadas y acciones efectivas.
Grupo de gente que ha seguido estos pasos exitosamente.
Emulación:
Simulando condiciones
¿Y qué podemos simular?
Las medidas e interacción del dispositivo
La conexión de internet...
- Desactiva la cache
- Simula estar offline, ideal para probar PWA
- Emula diferentes velocidades de conexión
- Permite añadir conexiones totalmente personalizadas
Incluso el procesador...
- Detecta problemas y cuellos de botella para conexiones lentas.
- Entiende cómo los usuarios realmente ven tu página en sus dispositivos
- Prioriza qué ve antes el usuario.
Medición
+ Simulación
= Hipótesis contrastadas
Y, por lo tanto,
podemos refutar falacias,
prejuicios, incongruencias...
Descartes, uno de los revolucionarios del método cientifico, molando mucho, después de usar las DevTools.
Experimentación:
HTML, CSS y Local Overrides
Podemos modificar el código fuente
Podemos modificar el CSS
¡Pero se pierden los cambios cada vez que recargo la página! 😥
¡Local Overrides al rescate! 🤩
Sobreescribe código, experimenta con él, observa y mide los cambios, itera...
No soporta cambiar el HTML!!!!!! 😙
Ejemplo: fotocasa.es
Automatización:
Robots forenses
Lighthouse
GTMetrix
WebpageTest
Pingdom Tools
psi
Hay muchas librerías y utilidades que son los roomba del análisis forense web
pero ninguna va a ser mejor que tú...
Aprendizaje:
Dominando las herramientas
miguel
miguel
¿Preguntas?
¡Gracias!
¡Sígueme en @midudev!
Análisis forense de una web
By Miguel Angel Durán García
