Lazy load and Google Audits?

Hey guys, so I am trying to lazy load images as I believe it is really burdening my google audit performance. I am very confused because about a month ago the performance was in the 90’s. What is happening here and how can I fix this issue? I have tried two React Lazy Load libraries and they didn’t seem to help performance at all.

Why are my local and production so much different as well? Any help would be appreciated.

https://www.chizetteart.com/

Local:

Production:
Screen Shot 2020-03-13 at 10.53.42 AM

Is the local running in developer mode? How are you serving the images locally, through the CDN or just using file paths?

On the live site I got 85% which I don’t think is bad and the page seems to load fast enough. Some of the lighthouse metrics are apparently also being deprecated and the total score might go up then.

Yeah, I am running a server in developer mode, so that’s probably why.

Probably.

  • The gallery images do seem to be bigger then they need to be for the size you are using. Do you plan on having a full-screen view, or is that the max size they will be on the screen? If not, they can get resized to a smaller size.

  • You have jquery and materialize loading before the page content if you can move them after the page or defer, the blocking score might go up.

  • Not sure if this does anything, but you can try adding a page load spinner to have content on the page sooner.

Filter the art, then click on one (those are the largest they will be on the single view). I realized i didn’t need the jQuery or materialize.

Screen Shot 2020-03-13 at 12.16.27 PM

Thank you!

Edit: I posted too slow, I see the new score, nice job!

For the image you mean the lightbox view of them, right? If so, that isn’t very big compared to the actual intrinsic size they have. More knowledgeable people might right-click the images to get to the full size. But if you want people to get the full size you should make an interface for that.

If you don’t need the scripts and can remove them the score definitely should go up a bit.

I will continue to dig further into it. One last question I have for you, I always develop on Chrome, however it is pretty important to me this works on Safari as well. Seems like it does, however on iPhones, the main images that fade into each other (the fading parallax) are blown way oversized and blurry. If you have an iPhone could you go to the site and check to see what I’m talking about. No idea why this is happening as I have the width set to 100% and the height at around 85vh. Damn browsers haha. Can also scroll right and left because of it, even when I have overflow: hidden.

I believe iPhone/Safari may have some issues with background-attachment: fixed and background-size: cover

I cannot figure out this background-size: cover issue. If you have any ideas I would love to know. The culprit is:

  background-size: cover;
  background-position: center;
  background-attachment: fixed;

On the element. I’ve tried setting the parent to background-attachment: scroll, but to no avail.

Using position: fixed instead of background-attachment: fixed might help.

However, it looks like that breaks react-scroll-parallax and will likely require other changes to make the page look the same. You can try making the change just to see if it fixes the image issue or not. No need to worry about making it work if it does not help anything.

Why do you think no need to worry about making it work?

That is not what I meant. I just mean you should worry about it before testing if it even helps with the image problem.

Did you test it?

I did but it broke. I’m working on trying to stop the main component rerender on every filter currently.