Prevent repaint background images on mobile

Question

I just won a "legacy" sitebuild project that I need to fix some issues on. There is a section which is work like a gallery. Every image is a background image (there are a LOT of them). When the user scrolls down, you can see, that the poor browser is trying to show the content to the user, but can't keep up with the user who has fast fingers.

Here is some of that beautiful html

<section class="gallery">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="columns-content">
                    <a href="imageurl1">
                        <div class="image-content" style="background-image('img1.png')"></div>
                    </a>
                    <a href="imageurl2">
                        <div class="image-content" style="background-image('img2.png')"></div>
                    </a>
                   <!-- there are 30 more images like that -->
                </div>
            </div>
        </div>
    </div>
</section>

and here are some styles:

.image-content{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 20vw;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  margin: 0px;
}

My question: Is there a way to prevent these images to repaint? I tried the transform: translateZ(0); and will-change: transform; tricks but none of them worked for me. Should I quit and start crying in the corner about how useless I am?

Cheers!

Have you tried to optimize your images? it looks like they're `png`, what about using `jpeg web`? can you reduce their resolution? can you post the URL so we can test the performance? — LunarParks, May 25 '17 at 09:03
@ArnauFernández Every image is .jpeg and none of them are bigger than 40kb — cs.matyi, May 25 '17 at 09:20

LunarParks · Answer 1 · 2020-09-04T09:29:21.930

You can try a few things in order to improve (and fake) performance.

Reduce img resolution
Use visibility: hidden and/or display:none (further explanation bellow)
Use a placeholder to at least show something to "fast-fingers users" so they know that the web is loading (this is the fake approach)

So for number 2 you can use an EventListener that captures user scrolling and hides/displays content according to user position.

Please note that if you switch from display: none to say display: block a reflow will occur. Switching from visibility: hidden to visibility: visible will only cause a repaint

Please have a look at this question.

PS: Another (completely different) approach would be to change from infinite scrolling to multi-page web. See if this suits your requirements.

tried the first 2 options. reduced all the images, changing the visibility property when a user scrolls, used the requestAnimationFrame too, but none of the solved completly the problem. Maybe should I slice the images in smaller pieces? — cs.matyi, May 26 '17 at 09:17

Prevent repaint background images on mobile

1 Answers1