Proyectos programación

WordCamp 2024 Torrelodones: desarrollo  de software


Mi primer tema a medida con el Editor del Sitio. Marta Torre

Principios básicos del proyecto martatorre.dev

  • Accesibilidad: hay que intentar que el contenido lo pueda consumir todo tipo de personas diversas. Por eso está realizado con el Editor de Bloques.
  • Sostenibilidad.
  • Diversidad.
  • Rendimiento.
  • Aprendizaje: hacer cosas nuevas para aprender.
  • Buenas prácticas: utilización de html semántico.
  • Eficiencia: no es necesario hacerlo desde 0.

Los maquetadores visuales no permiten la accesibilidad. Los maquetadores cargan más de lo que deberían. Las animaciones y maquetadores suelen tener peor rendimiento.

Repositorio del proyecto

Estructura del proyecto:

Iconos y logos deben ser SVG y pasar las imágenes a WEBP a nivel de rendimiento afecta positivamente.

Tecnologías

  • https://them.es/starter-fse/: Generación base del theme y te prepara los archivos para WebPack.
  • WebPack
    • JS Moderno
    • SCSS
  • Theme:
    • PHP Básico
    • HTML
    • CSS
    • JS Básico

Matomo Analytics en lugar de google analytic para analizar el tráfico web.

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

El Server Side Rendering es una técnica que consiste en renderizar el HTML en el servidor y enviarlo al cliente.

“No te obsesiones con hacer todo perfecto, investiga, aprende y rompe cosas”.


WPO con sentidiño: usando las DevTools para acelerar tu web. Carlos Longarela

WPO es una sigla para la expresión anglosajona «Web Performance Optimization». Consiste en un conjunto de estrategias y buenas prácticas para mejorar el desempeño de un sitio web en su aspecto técnico, como en la velocidad de carga de las páginas y la experiencia de navegación del usuario.

Todos los navegadores tienen herramientas similares para desarrolladores.

Para el WPO (Web Performance Optimization) en las herramientas de desarrollo tenemos:

  • Herramienta animaciones: lo que consumen las animaciones.
  • Herramientas 3D: se ve como estan las capas
  • Herramienta monitor de rendimiento: uso de la cpu, la memoria, los eventos que hay en la página.
  • Herramienta representación: la cpu, los core o emular escenarios en el navegador..
  • Herramienta Lighthouse: medir el rendimiento en desktop o en movile.
  • Herramienta performance:  grabar lo que pasa en la página web, lo que ocupa en memoria, cuando algo va lento…
  • Más herramientas: 

Lo recomendable para usar estas herramientas es abrir una ventana en modo incógnito que hace que no tenga cargado el cache, extensiones…

Nos ayudamos de las herramientas de red para el WPO, para ver donde hay problemas y qué cosas están pasando.

  • Recargamos página sin caché y ordenamos por tamaño y por tiempo. ¿Imágenes de más de 100-200 kb? ¿recursos que tardan segundos en cargar?
  • Simulamos una red 3G lenta y vemos como carga.
  • Ordenamos por cascada y vemos posibles cuellos de botella en la carga.
  • Modificar cabeceras para ver como se comporta sin compresión, diferentes tiempos de caché de navegador o bloqueos de seguridad.
  • Ver lo que pasa en segundo plano, por ejemplo plugins abusando del uso de admin-ajax.php o tiempos de carga lentos del mismo

Bloqueamos recursos de dominios externos (scripts de seguimiento, anuncios…) y comprobamos tiempos.

  • Bloqueamos los recursos de todos los plugins: https://dominio.com/wp-content/plugins/* 
  • De un plugin en concreto: https://dominio.com/wp-content/plugins/mi-plugin/*
  • Solo el JS o el CSS de ese plugin:
  • https://dominio.com/wp-content/plugins/mi-plugin/*.js
  • Del tema actual https://dominio.com/wp-content/themes/mi-tema/*
  • De todos los temas https://dominio.com/wp-content/themes/*
  • Bloquear todos los CSS locales y externos css o JavaScript js

Enlaces de interés