HTTP/2 및 반응 형 이미지

Question

현재 http/2 및 서버 푸시 규칙을 실험하고 있습니다. js 및 css 파일에 대한 푸시 규칙을 구현하는 것은 매우 쉽지만 picture 태그 및/또는 srcset 속성과 같은 반응 형 이미지를 사용하여 푸시 기능을 효과적으로 사용할 수있는 방법이없는 것처럼 보입니다. 물론 모든 버전의 이미지를 클라이언트에 전송할 수는 있지만 트래픽이 많은 모바일 장치의 경우 트래픽 재앙이 될 수 있습니다.

내가 아는 한, 브라우저는 각 파일 밀어 넣기에 대한 약속을 얻습니다. 약속은 파일이 이미 캐싱 된 경우 해당 푸시를 방해하는 데 사용됩니다. 이 진술이 정확하기를 바랍니다.

브라우저에 이미지가 특수 화면 크기 또는 픽셀 비율에 대한 것임을 알리는 방법이 있습니까?

Answer 1

은 물론, 나는 특히 제한된 트래픽이 탑재 된 휴대 기기에, 교통 재앙이 될 것이라고 클라이언트에 이미지의 모든 버전을 밀어하지만 수 있습니다.

그렇다면 다른 버전 (주로 대역폭 절약으로 사용됨)을 사용하지 않아도됩니다.

내가 아는 한 브라우저는 각 파일 푸시에 대한 약속을받습니다. 파일이 이미 캐시 된 경우 약속이 해당 푸시를 방해하는 데 사용됩니다. 이 진술이 정확하기를 바랍니다.

예. 그러나 브라우저에서 취소 요청을 취소 할 수 있다고 생각하면 브라우저는 일반적으로 이미 캐시에있는 요청에 대해서만이 작업을 수행합니다. 2) 취소하는 데 시간이 걸리므로 푸시 된 리소스의 일부 (또는 아마도 전체)가 불필요하게 다운로드되었을 수 있습니다.

브라우저에 이미지가 전용 화면 크기 또는 픽셀 비율 일 뿐이라는 것을 알 수있는 방법이 있습니까?

이미지를 화면으로 푸시하지 않고 브라우저 캐시로 푸시하면 푸시 된 리소스는 페이지 (예 : 올바른 srcset 값)에 따라 적절하게 사용됩니다. 그러나 위에서 언급했듯이 불필요하게 푸시되거나 대역폭을 낭비하지 않기를 바랍니다.

서버 푸시를 성공적으로 사용하기위한 핵심은 리소스가 필요하다는 것입니다. 실제로는 성능 병목 현상이 발생할 수 있습니다. 나는 솔직히 모든 것을 밀어 내지 말고 단지 중요한, 블로킹, 거의 확실하게 필요할 자원 (CSS, 자바 스크립트)을 추진할 것을 제안합니다. 일반적으로 이미지는 블로킹을 렌더링하지 않으므로 일반적으로 이미지를 밀어 낼 필요가 없습니다.

쿠키로 처리 할 수 ​​있습니다. 쿠키가 설정되어 있지 않으면 신선한 세션 일 가능성이 있으므로 중요한 CSS 파일을 푸시하고 "cssLoaded"쿠키를 설정하십시오. 페이지가 요청되고 해당 쿠키가 설정된 경우 CSS 파일을 푸시하지 마십시오. 나는 아파치에서 이것의 간단한 구현에 대해 블로킹했다 : https://www.tunetheweb.com/performance/http2/http2-push/. 클라이언트가 쿠키를 허용하지 않은 경우에도 계속해서 푸시로 이어질 수 있지만 대부분의 사용자에게는 괜찮을 것입니다.

JavaScript를 화면 크기로 설정 한 다음 후속 페이지를로드하도록 설정하면 서버가 해당 쿠키를 읽고 화면 크기를 알 수 있으며 적절한 크기의 이미지를 누를 수 있습니다.이렇게하면 초기 페이지로드에 도움이되지 않지만 방문자가 동일한 세션에서 사이트의 여러 페이지를 방문하면 다른 페이지로드에 도움이됩니다. 하지만 솔직히 잔인한 소리처럼 들리 겠지만 나는 단지 이미지를 푸시하지 않을 것입니다.