CSS로드와 함께 이미지를로드하는 방법이 있습니까?

본인의 웹 사이트 로고를 우선적으로로드하고자했습니다. 프리로드 또는 프리 페치 이미지를 찾았지만 CSS가로드되고 평가 된 후에 이미지를로드합니다. 첫 페이지 페인트에서 이미지가 즉시 보여 지도록 이미지를 CSS 애셋과 병렬로로드하도록하려면 어떻게해야합니까?CSS로드와 함께 이미지를로드하는 방법이 있습니까?

출처

2017-11-29 Bee

왜 CSS를로드하기 전에 이미지를로드해야합니까? CSS를 처음로드 할 수없는 이유는 무엇입니까? –

기본적으로 CSS가로드되고 평가되므로 페이지가 렌더링됩니다. 페이지가 렌더링되는 동안 브라우저는 이미지 요청을 시작합니다. 그러면 로고 인 이미지의 렌더링과 미리보기가 지연됩니다. 내 목표는 첫 번째 페인트 또는 페이지의 첫 번째 미리보기에 즉시 로고를 표시하는 것입니다. 그래서 그것을하기 위해, 나는 css와 병행하여 이미지를 요청할 필요가있어서 css가 완료되기 전에 끝난다. 따라서 css가 마지막으로로드되고 평가되면 페이지가 렌더링되면 이미 이미지를 미리 볼 준비가 된 것입니다. – Bee

병렬 문제는 HTTP/2로 해결됩니다. – Rob

두 가지 옵션이 마음에 와서 :

가 바로 HTML에 당신의 로고의 SVG 버전을 사용하십시오.
로고의 크기가 충분히 작 으면 Base64로 인코딩 된 버전을 사용하십시오.

출처

2017-11-29 02:42:51 elliottregan

이것은 좋은 해결책이 될 수 있습니다. 그러나, 나는 그것이이 그룹과 화제가 아니라는 것을 안다. 그러나 나는 이것이 SEO에 영향을 미칠지도 모른다라고 걱정하고있다. 어떤 리소스가 그렇지 않다고 확인합니까? – Bee

저는 SEO 전문가는 아니지만 그 이유는 알 수 없습니다. SVG와 img에 적절한'title' 속성을 사용하는 방법을 살펴 보겠습니다. 두 가지 모두 일반적인 기술이며, 검색 엔진이 이미지 콘텐츠 (아직)를 고려하지 않고 제목과 관련 속성 만 고려한다고 생각합니다. – elliottregan

나는 이것이 좋은 선택이기 때문에 대답을 upvoted했지만 SEO에 대한 나의 관심 때문에 대답으로 표시하지는 않을 것입니다. 이 사실이 확인되면 올바른 답으로 표시 할 것입니다. – Bee

CSS로드와 함께 이미지를로드하는 방법이 있습니까?

답변

관련 문제