반응 형 모바일 웹 개발을위한로드 속도.

Question

저는 웹 사이트를 방문하여 모바일 반응이 원활하도록 준비하고 있습니다. 웹 사이트. 아마도 부트 스트랩을 활용할 것입니다.

나는 몇 가지 연구를 해왔으며 훌륭한 자원을 발견했습니다. 로드 속도와 모바일 장치가 궁금합니다.

예를 들어

---

:

는 말 이초 및 전송 데이터 3MB의 내 웹 사이트 부하의 데스크톱 버전을 할 수 있습니다.

이제 휴대 전화로 이동하여 내 웹 사이트로 이동하십시오. 모바일 브레이크 포인트 버전은 3MB의 데이터를 모두 전송하여 페이지를로드합니까?

개발자가 모바일인지 여부에 따라 요청 크기를 줄이고로드 시간을 개선하는 방법을 잘 모르겠습니다.

브라우저를로드하고 모바일 브레이크 포인트의 크기를 조정하면 데스크톱과 동일한 리소스를 계속 사용한다고 가정합니다.

제 질문에 도움이 되었기를 바랍니다. 나는 그것을 어떻게 말해야할지 잘 모르겠다.

알려주세요. 감사합니다.

Answer 1

모바일 브라우저는 사용자가 지정하지 않으면 데스크톱 브라우저와 완전히 동일한 콘텐츠를 가져옵니다.

모바일에서 작은 이미지를 가져 오는 것과 같이 모바일 용 페이지 크기를 줄이려면 할 수 있습니다. 이렇게하는 한 가지 방법은 화면 너비에 따라 다른 이미지 크기를 지정하는 HTML 그림 태그를 사용하는 것입니다. https://www.w3schools.com/tags/tag_picture.asp

<picture> 
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> 
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
</picture> 

또한 빠르게로드하는 것 아래로 잡아 당기거나 대역폭 사용량을 줄이거 나 페이지를 만들기 위해 다른 이벤트에 반응, 화면 크기에 반응 자바 스크립트가있을 수 있습니다. 예를 들어 게으른로드, 지연로드는 DOM로드 후 오프 스크린 이미지를 가져 오는 javascript입니다.

여기 마지막으로, 웹 캐시의 내용을 브라우저를 페이지 이미지 https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

에 대한 게으른 부하에 큰 가이드입니다. 따라서 모든 스타일 시트, 자바 스크립트 파일 또는 페이지간에 공유 된 이미지를 장치 캐시에 저장해야하므로 브라우저가 각 페이지로드시 동일한 파일을 반복해서 가져올 필요가 줄어 듭니다.