내 페이지 중 하나에서는 여러 CSS 배경 설정을 이미지로 사용했습니다. 이미지 크기는 아마도 수십 K일 것입니다.
이제 처음 웹 페이지를 열면 이러한 장소는 분명히로드 속도가 느리고 모든 것처럼 보입니다. 스타일이 누락되었습니다. 로드한 후 사진이 표시됩니다.
CSS 로딩 속도를 높일 수 있는 방법이 있습니까? 즉, 로드를 기다리는 공백을 남기지 않고 이 사진을 로드하고 페이지와 더 동기화되도록 할 수 있습니다!
nginx를 사용하는데 https와 http2가 나오네요...
가속화는 아닌데 해결책이 있을까요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
게으른 상태에서 단호하게 로드하세요. 간단하고 사용하기 쉽습니다
이미지를 미리 로드하고 로딩 레이어를 추가하면 성능은 약간 떨어지지만 경험은 훨씬 좋아집니다
페이지를 여러 곳에서 사용하는 경우 먼저 요청 수를 줄이고 이미지를 스프라이트 이미지로 처리한 다음 이미지를 압축하는 것이 실제로는 여전히 특정 문제를 분석하는 것이 가장 좋습니다. 더 구체적인 코드를 보려면
정적 리소스는 CDN에 배치할 수 있습니다. 이미지가 큰 경우 사전 로드 또는 지연 로드를 권장합니다. Lazy Loading 시 불필요한 Reflow를 피하기 위해 CSS를 사용하여 미리 공간을 점유하는 것이 좋습니다. 또한: 사진이 너무 크면 스프라이트 사진을 사용하지 않는 것이 좋습니다.
1. 가장 게으른 방법은 게으른 로드입니다
우선 스프라이트 이미지는 말할 것도 없고 크기도 봐야겠죠
둘째, 사진이 위치한 영역을 살펴보세요. 일부 사진이 바로 보이는 영역에 없으면 지연 로딩을 사용할 수 있습니다.
위 조건 중 어느 것도 충족되지 않으면 이미지 압축을 통해 이미지 크기를 줄일 수 있습니다