All geek questions in one place

How to load background images faster?

I recently worked on a site that contains a large number of artwork in the form of large background images. On many sites with large budgets, large background images seem to load almost instantly, while mine seem to take 1-2 seconds on average.

My questions are: how can I achieve faster loading of background images? I have already compressed my images and used the appropriate file types.

Here is an example of a website with instant background image loading: http://lanadelrey.com/

+4
source share
3 answers

, :

  • CSS background-image head HTML , , CSS.

, , .

enter image description here

Google Chrome , , : https://varvy.com/pagespeed/display.html https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

  1. , ( ) . CDN.

  2. .

+1

? , , :

http://cdn1.umg3.net/89-cdn/splash2015/lana-splash-background-2.jpg?v=1

- 147 . , .

, :

  • ( , jpg ..)
  • . , , , .

, !

0

, . CSS.

-, , (, display: none), , CSS, . ( devtools, , .) , , ( , ), . , , , .

JavaScript, :

  • ( CSS)
  • dynamically insert CSS property backgroundinto elements immediately after loading is completed

Another solution would be to use lazy loading, in which instead of loading images in the background, you could start downloading images when you are (relatively) sure that the user will need to see a background image (for example, when the image is close to its position visible in the viewport).

0
source

Source: https://habr.com/ru/post/1661933/

More articles:


All Articles