-1

I've been working on improving the Google Page Speed of my site.

It's nearly a perfect score except for Largest Contentful Paint.

I've worked out this is because my Carousel at the top of my page is hidden on page load, then I'm using javascript to shuffle the slides randomly before showing it:

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
    }
},

This causes a delay because it has to wait until the DOM is fully loaded then run my script and therefore shows the LCP (the first slide image) later than it would otherwise.

Is there any way to shuffle the div's before the page loads?

I'm using Vite and Alpine.js.

My page is cached so I don't think it can be done server-side.

I was thinking I could maybe use CSS like this answer but I'm not sure random is possible in CSS?

fxfuture
  • 1,910
  • 3
  • 26
  • 40
  • https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – BGPHiJACK May 11 '22 at 14:14
  • @BGPHiJACK thanks but my issue is doing this before the page loads – fxfuture May 11 '22 at 14:15
  • You'd generally set your script to load before others in head of HTML document. This ensures script is running in a pre-loaded DOM state. You can code then but doing so if any calls to elements that do not exist yet due to DOM not fully loaded it'll error out. – BGPHiJACK May 11 '22 at 14:19
  • Another option is dynamic pages, when a user makes a request for that page pre-generate it at a server level before sending it out but this can be quite costly on cache/performance. – BGPHiJACK May 11 '22 at 14:24
  • @BGPHiJACK yes exactly, the page is cached – fxfuture May 11 '22 at 14:29
  • So maybe run an animation, hide the element at first on complete DOM load trigger the fadeIn with the results randomized. If this is many items and constantly changing though you should be making a fetch request for the list. – BGPHiJACK May 11 '22 at 14:33

1 Answers1

1

you could try to speed up the dom update by using createDocumentFragment api (instead of having an update for each element move)

something like:

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);
basdanny
  • 79
  • 1
  • 6
  • btw, if you want to try the CSS solution, you can use native CSS variables for the random order parameter, see example [here](https://css-tricks.com/random-numbers-css/) – basdanny May 11 '22 at 17:02
  • That looks promising. I will try – fxfuture May 11 '22 at 23:10