프런트엔드 - CSS 배경 이미지 로딩 속도를 높이는 방법

Question

내 페이지 중 하나에서는 여러 CSS 배경 설정을 이미지로 사용했습니다. 이미지 크기는 아마도 수십 K일 것입니다.
이제 처음 웹 페이지를 열면 이러한 장소는 분명히로드 속도가 느리고 모든 것처럼 보입니다. 스타일이 누락되었습니다. 로드한 후 사진이 표시됩니다.
CSS 로딩 속도를 높일 수 있는 방법이 있습니까? 즉, 로드를 기다리는 공백을 남기지 않고 이 사진을 로드하고 페이지와 더 동기화되도록 할 수 있습니다!
nginx를 사용하는데 https와 http2가 나오네요...
가속화는 아닌데 해결책이 있을까요?

Answer 1

게으른 상태에서 단호하게 로드하세요. 간단하고 사용하기 쉽습니다

Answer 2

이미지를 미리 로드하고 로딩 레이어를 추가하면 성능은 약간 떨어지지만 경험은 훨씬 좋아집니다

Answer 3

페이지를 여러 곳에서 사용하는 경우 먼저 요청 수를 줄이고 이미지를 스프라이트 이미지로 처리한 다음 이미지를 압축하는 것이 실제로는 여전히 특정 문제를 분석하는 것이 가장 좋습니다. 더 구체적인 코드를 보려면

Answer 4

정적 리소스는 CDN에 배치할 수 있습니다. 이미지가 큰 경우 사전 로드 또는 지연 로드를 권장합니다. Lazy Loading 시 불필요한 Reflow를 피하기 위해 CSS를 사용하여 미리 공간을 점유하는 것이 좋습니다. 또한: 사진이 너무 크면 스프라이트 사진을 사용하지 않는 것이 좋습니다.

Answer 5

1. 가장 게으른 방법은 게으른 로드입니다

Answer 6

우선 스프라이트 이미지는 말할 것도 없고 크기도 봐야겠죠

둘째, 사진이 위치한 영역을 살펴보세요. 일부 사진이 바로 보이는 영역에 없으면 지연 로딩을 사용할 수 있습니다.

위 조건 중 어느 것도 충족되지 않으면 이미지 압축을 통해 이미지 크기를 줄일 수 있습니다