La nueva implementación del protocolo HTTP sobre QUIC (HTTP/3) o la última versión de PHP (PHP 7.4) son sólo dos de las últimas novedades tecnológicas relacionadas con la mejora de rendimiento de nuestro sitio web desarrollado con WordPress. Acompáñame a conocer que nuevas estrategias y técnicas, ya disponibles o de inminente aparición, puedes incorporar a tu proyecto web para mejorar y optimizar el rendimiento del mismo. WordCamp Zaragoza 2020

1.
HTTP/3, PHP 7.4
y otras novedades en WPO para WordPress
Fernando Puente
@fpuenteonline

2. BIO
@fpuenteonline - Informático de vocación y de profesión, formador
ocasional y beginner de comer y beber.
Desde 1996 trabajando en TI, y desde 2007 con WordPress para
medios de comunicación online y comercio electrónico
• Consultor Enterprise en SiteGround
• Consultor Desarrollo de Negocio en YITH
• CTO de Exprime Viajes y Dormir de Chollo
• Formador en Fundación COPE
• Consultor freelance especializado en performance

3. WPO y WordPress

4. ¡Que viene, que viene!

5. HTTP/3

6. HTTP/3
• HTTP-over-QUIC, renombrado a HTTP/3
• Sucesor de HTTP/2, conviven todas las versiones
• Mismas características que HTTP/2 pero sobre UDP
• Fallback: TCP + TLS
• Más rápido: reduce la latencia y la negociación del cifrado
• Más seguro: cifrado por defecto usando el protocolo TLS 1.3

7. https://blog.cloudflare.com/http-3-from-root-to-tip/
HTTP/3

8. HTTP/3
https://caniuse.com/#feat=http3

9. https://www.http3check.net/
HTTP/3

10. curl -I -X GET 'https://www.exprimeviajes.com'

11. Servicio adaptable a la red

12. Servicio adaptable a la red
• Adaptar el contenido a descargar en función de la calidad y
capacidad de la red. Mejor UX y rendimiento
• Utilizar Network Information API para conocer la capacidad de la
red del usuario (https://wicg.github.io/netinfo/)
• Podemos conocer sobre la conexión: tipo, calidad (capacidad de
descarga), cambio del tipo o si tiene habilitado Data saver
• Nota: tecnología todavía experimental

13. https://caniuse.com/#feat=mdn-api_networkinformation
Servicio adaptable a la red

14. Y un ojo en
• WebAssembly (Wasm)
• PHP 8 (2021)

15. ¡Ya disponible!

16. PHP 7.4

17. PHP (versiones)
https://w3techs.com/technologies/details/pl-php

18. PHP (versiones)
https://w3techs.com/technologies/details/pl-php/7

19. PHP 7.4
https://www.php.net/supported-versions.php

20. PHP 7.4
• Nuevas funcionalidades
• WPO: precarga de clases (script vía opcache.preload)
• Benchmark:
• +11% PHP 7.3
• +19% PHP 7.2
• +23% PHP 7.1
• +25% PHP 7.0
• Última versión 7.4.1 (18/diciembre/2019)
https://community.centminmod.com/threads/php-benchmarks-7-4-vs-7-3-vs-7-2-vs-7-1-vs-7-0-php-fpm.18741/

21. Fuentes variables

22. Fuentes variables
• Archivo único por fuente
• Se comporta como múltiples variaciones de la fuente
• Posibilidad de fallback

23. Fuentes variables
Ejemplo tamaño del archivo
• font-weight: 400 => 19kb
• font-weight: 200 900 => 37kb
https://fonts.google.com/specimen/Crimson+Pro?selection.family=Crimson+Pro

24. https://caniuse.com/#feat=mdn-css_properties_font-variation-settings
Fuentes variables

25. Lazy load nativo

26. Lazy load nativo
• Lazy load manejado por el navegador
• Imágenes e iframes
• Posibilidad de fallback usando librería tradicional
• Menor número de recursos cargados
• Mejor UX

27. https://caniuse.com/#feat=loading-lazy-attr
Lazy load nativo

28. MySQL (versiones)

29. MySQL 8.0
• Ideal para grandes instalaciones
• Necesario modificaciones en el modelo de datos para
aprovechar las mejoras (índices y ordenación)
• Necesario modificar la autenticación por defecto de PHP. Posible
solución en PHP 7.4.2

30. WebP
• Compresión:
§ 25%-34% menor que JPEG
§ 26% menor que PNG
• Transparencia
• Animación (más colores y posibilidad de transparencia)
• Loop

31. https://caniuse.com/#feat=webp
WebP

32. https://caniuse.com/#feat=brotli
Brotli

33. https://caniuse.com/#feat=av1
AV1

34. https://caniuse.com/#feat=apng
APNG

35. Y un ojo en
• Carga condicional de plugins
• Predictive Prefetching/Preloading
• Edge Computing (Fastly, AWS’ Lambda, CloudFlare Workers,
Akamai EdgeWorkers)
• Inline CSS/JS -> Cache Service Workers
• HTTP/2 Priorización

36. Bonus track

37. Red 5G

38. Red 5G
• Mayor velocidad de descarga (hasta 10Gbps)
• Reducción de latencia
• Mayor capacidad de concurrencia de dispositivos
• Mayor fiabilidad del servicio
• Menor consumo del dispositivo
• Ideal para IoT

39. https://www.gsma.com/r/mobileeconomy/
Red 5G

40. Ahora, estudia, analiza e
implementa

41. "Let's be careful out there“
Fernando Puente
@fpuenteonline
Muchas gracias