-2

When loading my site at https://latestfooty.co.uk, there's always a flash of grey before the site loads. The site is a relatively lightweight landing page that shouldn't be taking this long to load, so I suspect the issue is due to the combination of linear gradients and scanline effects that I'm using as background images. Previously I was using an SVG solution to generate the scanlines instead of an image, and the "flash" effect was so pronounced that I had to switch back to the image method.

How can I get rid of this flash of colour from my site so that it loads more smoothly to a user?

EDIT: The PageSpeed analysis doesn't seem to suggest anything is wrong, even though there very clearly is, suggesting this might be less of a performance problem and more of a bug.

Hashim Aziz
  • 4,074
  • 5
  • 38
  • 68
  • I'm not understanding why this was downvoted? [Similar](https://stackoverflow.com/questions/16258062/white-flash-on-first-page-load-can-this-be-fixed) questions have been considered on topic before, and it is a very clear technical problem. – Hashim Aziz May 02 '20 at 19:34
  • 1
    It's off topic. Read on [ask] and provide a [mcve], not a link to a website. – MrUpsidown May 02 '20 at 22:25
  • 2
    I'm not sure what better reproducible example I could provide other than a live website. It is impossible for me to minimally reproduce a problem that I don't understand the cause of, that's why I'm here asking the question. – Hashim Aziz May 02 '20 at 22:28
  • 1
    Read on [ask]. Again. It clearly says you need to provide a [mcve] and **not** a link to a website. Reproducing the issue with minimal code might even help **you** find the answer. So again, **no**, this is not a reproducible example. I haven't even clicked on your link, and I will not click on it. – MrUpsidown May 03 '20 at 08:31

2 Answers2

1

If you mean the grey behind the white text before the picture appears, this is almost certainly the time spent downloading the background graphic.

Your current (at time of writing) background is set by:

html {
     background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), 
                 url('images/StockSnap_POIHJNTKDB_1920.jpg') right/cover;
}

Which shows that a grey (black at 50% opacity) linear gradient is applies before then a background image is loaded.

You have a few options to improving upon this, doing any of the following (combined or alone):

  • The Preloader that Zen references is an option. This looks like you need to install this product as a whole to use this single feature of it, which may actually cause you more overhead.
  • You can change the grey background to some other colour or remove it entirely.
  • You can reduce the image filesize (currently 686kb) of the background image to make it load faster.
  • Your PageSpeed Insights shows you are not caching this image (or any images) which could improve loading performance. PageSpeed Insights probably isn't set to judge CSS resources, that's why it's given you a high mark.

  • You can apply some CSS @media queries so you only call the image with the dimensions large enough to fill the viewport screen.

    This alone will not solve the problem but will definitely help re: filesize. Your current image is 2,343px × 1,080px which would be huge on anything but a desktop/TV sized screen.

    You would need to create numerous images of different dimensions to forfil this action.

Martin
  • 22,212
  • 11
  • 70
  • 132
  • 3
    It was the same user who downvoted the question and all other answers. I've upvoted this question because it's a good answer and I appreciate the effort put into it but unfortunately I can't accept it because the other one contains the main solution for me. The linear gradient is a "filter" over the background image that makes the white text better readable on the bright background, and is therefore necessary. – Hashim Aziz May 03 '20 at 16:04
  • 1
    I'll apply a bounty to this as soon as I can purely for the comprehensiveness of the answer. – Hashim Aziz May 03 '20 at 16:26
  • 2
    @Hashim that's very kind but there is no need, if this answer is good enough then over time other visitors will +1, I can fully accept that (I assume) Zen's answer does indeed cover what you need more comprehensively. Thanks. – Martin May 03 '20 at 18:02
-2

try this body{ background:none important }

madi.wd
  • 148
  • 1
  • 3