Este documento presenta información sobre optimización del rendimiento web. Habla sobre la importancia de la velocidad, el uso de caché, imágenes optimizadas, minificación de CSS y JS, y tecnologías emergentes como AMP y PWAs. El orador comparte consejos sobre infraestructura, caché, frontend y tendencias para mejorar la experiencia del usuario.

2. Hola!
Me llamo Martín
Soy antiguo alumno de unileon
y responsable técnico de idealista/news
Me podéis encontrar en @mgzrobles

3. https://www.idealista.com/info/trabaja-con-nosotros

4. “Hay dos cosas que realmente importan,
el contenido y el tiempo que tardamos
en servirlo
Martín González Robles

5. 93%81% 2h

6. Casi el 90% del tiempo los usuarios
están conectados en sus móviles a partir
de aplicaciones.

7. 29%
of smartphone users will
immediately switch to
another site or app
if it doesn’t satisfy their
needs (for example, they
can’t find information or
it’s too slow)
40%
of shoppers will wait
no more than three
seconds before
abandoning a retail or
travel site
1s = $1.6 B
Amazon would lose $1.6
billion in sales every year if its
site took one more second to
load

8. “La velocidad no es solo una
característica, es LA característica
Urs Hözle, ingeniero de Google

9. SIEMPRE
hay que pensar en
el rendimiento

10. SIEMPREEn serio,

11. Psychological time in our
brain usually differs from
objective time on the clock
Denys Mishunov

12. ¿Qué vamos a ver?
● Infraestructura
● Cache
● Frontend
● Lo que viene (y ya está aquí)

13. Infraestructura

14. Infraestructura
Oracle/MySQL
Memcached/Redis
Solr/ElasticSearch
Apache/Nginx/Tomcat
Java/PHP
Load Balancer
HA Proxy / Varnish
CDN

15. Time To First Byte (TTFB)
El TTFB es el tiempo que tarda un navegador en
recibir la primera pieza de información desde un
servidor web después de realizar la petición al
mismo.

16. Time to upgrade

17. Cache

18. CACHE, CACHE, CACHE

19. Niveles de cache
● Browser
● Reverse proxy
● Memoria
● Disco
● Base de datos / Index

20. Cómo cachear
● Evita hacer el trabajo cada vez
● Evita hacer el trabajo en el path crítico
● Cache permanente
● Cache temporal
● Aplaza la ejecución para después del contenido principal

21. CACHE HIT
1 2
4 3
1
2
REQUEST
REQUEST
Miss vs Hit
CACHE MISS

22. max-age
Cuánto tiempo puede pasar hasta que se
considere un recurso como obsoleto.

23. “
Phil Karlton
There are only two hard things in
Computer Science: cache invalidation and
naming things.

24. Estrategia de Cache
Page
Cache
Page
Cache
Dynamic
Page
Cache
Usando
placeholdersy
cargando el
contenido dinámico
vía AJAX o ESI (Edge
side include)

26. Obteniendo los datos
● Monitoriza siempre
● La base de datos es lenta
● Usa buenos índices, revisa tus “where”
y tus índices
● Si es necesario cambia tus consultas a
solr o elastic

27. ¿FUEGO?
¿Muchas request/sec?

28. Reverse proxy
Capa extra de seguridad
Balanceo de carga
Content caching
301
...

29. Frontend

30. La importancia
está en las
imágenes
Suponen el 64% del payload de la página

31. ● El tamaño sí importa

32. ● El tamaño sí importa
● Lazyload y data URI
<img
src="data:image/gif;base64,R0lGODlhEAAQAMQA ..."
data-src="https://www.mysite.xyz/dog.png"
width="725" height="350" alt="My dog">

33. ● El tamaño sí importa
● Lazyload y data URI
● Responsive
<img
srcset="large.jpg 1440w,
medium.jpg 960w,
small.jpg 480w"
sizes="(min-width: 36em) 33.3vw, 100vw"
src="medium.jpg"
alt="…">
Usa srcset para diferentes tamaños por
breakpoints.
Usa <picture> si tus imágenes varían más
especialmente (art direction, croppings, styles, etc).

34. ● El tamaño sí importa
● Lazyload y data URI
● Responsive
● Usa CDN <img src="https://www.mysite.xyz/dog.png" alt="My dog">
<img src="https://cdn.mysite.xyz/dog.png" alt="My dog">

35. CSS/JS
● Minificación y unificación
● Evita cargar código innecesario según el dispositivo
● Pon inline el CSS que “pinte” la parte crítica de la página
● CSS Sprites
● El resto al final del DOM

36. Precarga de recursos
Dns-prefetch
(dns)
Preconnect
(dns+tcp)
Prefetch
(low priority, next navigation)
Prerender
(low priority, next navigation, all page)
Preload
(high priority, current navigation)
<head>
<link rel="prefetch" href="https://example.com/media/image.jpg">
...
<body>
<img src="https://example.com/media/image.jpg" alt="...">

37. Lo que viene (y ya está aquí)

38. Nuevas cabeceras
● Downlink Indica la velocidad máxima
de descarga.
● Save-Data Este booleano indica si se
deben tomar medidas adicionales para
reducir la carga útil.
<meta http-equiv="Accept-CH"
content="DPR,Width,Viewport-Width,Downlink,Save-Data">

39. AMP
Accelerated Mobile Pages ( AMP )
es un proyecto open source
que pretende ayudar a los editores a crear
contenido optimizado para móviles
y que pueda ser
cargado instantáneamente
en todas partes.

40. Progressive Web Apps
Experiencia en móviles lo más parecida a la de una aplicación nativa
● Carga instantánea
● Interfaz como una app
● Añadir la página a la HomeScreen del móvil
● Full screen
● Offline first con Service Workers
● Push notifications

42. Recursos
● https://es.slideshare.net/ckrina/improving-responsive-web-design-process-2016
● http://idealista.github.io/dcamp2016-amp/#/
● https://vimeo.com/166918786
● https://es.slideshare.net/EstebanTundidor/charla-web-performance-optimization-20212185
● https://info.varnish-software.com/blog/enhancing-mobile-web-performance
● https://info.varnish-software.com/blog/personalizing-mobile-web-experience
● https://info.varnish-software.com/blog/page-size-matters
● https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
● http://httpwg.org/http-extensions/client-hints.html
● http://deanhume.com/home/blogpost/service-workers--save-your-users-data-using-the-save-data-header/10139
● https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
● https://yuiblog.com/blog/2007/04/11/performance-research-part-4/
● http://www.ditrendia.es/wp-content/uploads/2015/07/Ditrendia-Informe-Mobile-en-Espa%C3%B1a-y-en-el-Mundo-2015.pdf
● https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset
● https://gomakethings.com/inlining-critical-css-for-better-web-performance/
● https://ericportis.com/posts/2014/srcset-sizes/
● https://developers.google.com/web/progressive-web-apps/
● https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
● https://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/#section:http-requests-and-dns-lookups
● https://www.keycdn.com/blog/resource-hints/

43. Esta tarde Drupal & Tapas
Hora: 19:30
Lugar: Four Lions (Calle Sierra Pambley, 6)
https://goo.gl/maps/nvrrqk3CwMS2
https://groups.drupal.org/node/516823

44. Gracias
¿Preguntas?
Me podéis encontrar en @mgzrobles