Estoy tratando de aumentar el rendimiento de mi sitio. Obtuve alrededor de ~ 87 en este momento, según Google Page Speed Insight. Si bien no es lo peor, tampoco es genial. Uno de los problemas es cargar demasiados activos y usar solo 1 o 2 de ellos
{{-- Audio --}} <audio id="audio-poop" src="/assets/be/img/baby/sound/poop.wav" autostart="false" ></audio> <audio id="audio-pee" src="/assets/be/img/baby/sound/pee.wav" autostart="false" ></audio> <audio id="audio-feed" src="/assets/be/img/baby/sound/feed.wav" autostart="false" ></audio> <audio id="audio-medicine" src="/assets/be/img/baby/sound/medicine.wav" autostart="false" ></audio> <audio id="audio-done" src="/assets/be/img/baby/sound/done.wav" autostart="false" ></audio> <audio id="audio-delete" src="/assets/be/img/baby/sound/delete.wav" autostart="false" ></audio> <audio id="audio-swipe" src="/assets/be/img/baby/sound/swipe.wav" autostart="false" ></audio> <audio id="audio-forward" src="/assets/be/img/baby/sound/forward.wav" autostart="false" ></audio> <audio id="audio-jump" src="/assets/be/img/baby/sound/jump.wav" autostart="false" ></audio> <audio id="audio-sleep" src="/assets/be/img/baby/sound/sleep.wav" autostart="false" ></audio> <audio id="audio-solidfood" src="/assets/be/img/baby/sound/solidfood.wav" autostart="false" ></audio>Reviso la pestaña de redes de mis sitios, veo que cargó todo esto. Esos son mini efectos de sonido que llamé solo cuando el usuario hizo clic en botones específicos. ¿Hay alguna manera de cargarlos solo cuando el usuario hace clic en un botón que los necesita?
Puede usar directamente en javascript usando la API de Audio :
function playSound() { const sound = new Audio(path); sound.play(); }De esta manera, el archivo de audio solo se cargará cuando se haga clic en el botón.