He estado trabajando para mejorar la velocidad de la página de Google de mi sitio.
Es casi una puntuación perfecta, excepto por la pintura con contenido más grande.
Me di cuenta de que esto se debe a que mi carrusel en la parte superior de mi página está oculto al cargar la página, luego estoy usando javascript para barajar las diapositivas al azar antes de mostrarlo:
shuffle(selector) { let $elements = document.querySelectorAll(selector) let array = [] $elements.forEach(($el) => { array.push($el.cloneNode(true)) }) $elements.forEach(($el, i) => { $el.replaceWith(array[i=Math.floor(Math.random()*array.length)]) array.splice(i,1) }) }, init() { const $carousel = document.querySelector('.carousel.shuffle'), if ($carousel) { this.shuffle('.carousel-card') $carousel.style.opacity = 1 } },Esto provoca un retraso porque tiene que esperar hasta que el DOM esté completamente cargado y luego ejecutar mi secuencia de comandos y, por lo tanto, muestra el LCP (la primera imagen de la diapositiva) más tarde de lo que lo haría de otra manera.
¿Hay alguna forma de barajar los div antes de que se cargue la página?
Estoy usando Vite y Alpine.js .
Mi página está en caché, por lo que no creo que se pueda hacer del lado del servidor.
Estaba pensando que tal vez podría usar CSS como esta respuesta , pero no estoy seguro de que el azar sea posible en CSS.
podría intentar acelerar la actualización de dom utilizando la API createDocumentFragment (en lugar de tener una actualización para cada movimiento de elemento)
algo como:
let elements = document.querySelectorAll(selector) const frag = document.createDocumentFragment(); const shuffledList = Array.from(elements).sort(() => (Math.random() > .5) ? 1 : -1); for (let item of shuffledList) { frag.appendChild(item); } document.querySelector('.carousel.shuffle').appendChild(frag);