웹페이지 열때 image 파일,font 등 다운로드 속도 빠르게 하는 방법이 궁금해요
안녕하세요 웹페이지 만드는 중인데 페이지를 새로고침하면 이미지들도 5~6초 있다가 뜨고
폰트 적용도 너무 늦게되서 구글에 검사 들어가서 네트워크 확인해보니
이미지랑 폰트 다운로드 속도가 엄청 느렸습니다 .
다운로드 속도가 느린 이유가 제가 한 페이지에 이미지 20개 정도 사용중인데 이게 문제인가요
아니면 html 이나 css 코드 작성에 문제가 있어서 느린건가요
파일 다운속도가 느려 새로고침 해보면 웹페이지가 끊기는 느낌이라 너무 보기 싫습니다 ㅠㅠ
이미지 용량이 매우 크다면 문제가 될 수 있다 생각됩니다.
하지만 현재 웹페이지가 어떻게 구성되었는지를 체크해볼 필요도 있습니다.
데이터베이스가 연동된 이미지 게시판이라면 쿼리속도도 체크해볼 요소라고 생각합니다.
GZIP 압축 활성화
W3Techs.com에 따르면 웹사이트들의 거의 절반이 압축을 사용하지 않는다고 합니다. 여러분이 직접 서버 설정을 변경함으로서 압축 전송을 활성화시킬 수 있고 PHP를 사용한다면 PHP 코드로도 압축 전송을 설정할 수 있습니다. 그렇지 않다면 서버 운영자에게 설정 변경을 요청하십시오.
브라우저 캐싱
만약 브라우저가 파일을 쉽게 캐쉬 할 수 있다면 앞으론 다시 그 파일을 다운 받을 필요가 없을 것입니다. 간단한 솔루션으로 HTTP 헤더에 만료 일자, 마지막 수정 일을 세팅하거나 ETags를 적용 시킬 수 있습니다.이것이 자동으로 이루어지도록 서버를 세팅할 수 있습니다. 예를 들어 아래와 같이 아파치 .htaccess 세팅으로 모든 이미지에 대한 캐시 만료 일을 1개월로 세팅할 수 있습니다.
올바른 이미지 포맷을 사용할 것잘못된 이미지 포맷을 사용하면 페이지의 부피가 늘어날 수 있습니다. 일반적으로는
1. 사진에는 JPG를 사용.
2. 그 외에는 PNG를 사용.
GIF는 제한된 색상 세트를 사용하는 작은 그래픽에 적합합니다. ― 매우 드물지만 어떤 경우에는 벡터 형식의 이미지가 더 적합할 수도 있습니다. 이는 나중에 별도로 다룰 예정입니다.다중 파일 일괄처리가 가능한 XnView와 같은 이미지 변환 프로그램이 도움이 될 것입니다. 그래픽 도구를 사용할 때 많은 옵션 설정 때문에 혼란스러울 수 있는데 다음 설정 정도는 기억해두는 것이 좋습니다.
1. JPG는 0에서 100사이로 품질의 손실을 조정할 수 있습니다. 100은 손실이 없는 가장 좋은 품질이고 0은 손실이 가장 많은 낮은 품질입니다. 대체로 30에서 70사이로 두면 web view 에 나쁘지 않습니다만, 허용 할 수 있는 가장 나쁜 값을 찾아 실험해 보는 것도 좋은 방법입니다.
2. PNG는 256-색상과 24비트-색상 두 가지를 옵션으로 선택할 수 있습니다. 만약 여러분이 투명도가 필요하지 않고 색상 사용을 제한할 수 있으면 256-색상 버전으로 저장하는 것이 압축률에 더 좋습니다.
큰 이미지 사이즈 줄이기이미지의 크기를 조정하면 페이지의 무게에 상당한 영향을 줄 수 있습니다. 50%의 사이즈를 축소함으로써 최대 75%로 전체 면적을 감소 시키고, 이것은 상당히 파일 크기를 감소 시킬 수 있습니다.
Compress images further
올바른 포맷으로 전환하고 이미지 사이즈를 변경 한 이후에도, 분석 도구를 사용하여 이미지 파일 용량을 축소하고 그래픽을 최적화 하는 것이 가능합니다. OptiPNG, PNGOUT, jpegtran 및 jpegoptim 등의 도구들이 있습니다. 대부분의 독립 실행 파일로 설치하거나 빌드 프로세스에 통합 할 수 있습니다. 또한, Smush.it 같은 온라인 도구는 클라우드에서 작업을 수행 할 수 있습니다.
Remove unnecessary fonts
웹 폰트는 디자인에 큰 변화를 가져다주었고 그래픽 기반의 텍스트에 대한 필요성을 감소 시켰습니다. 그러나 웹 폰트 때문에 여러분의 페이지에 수백 KB의 용량이 추가될 수 있습니다. 두 개 또는 세 개의 글꼴을 사용하는 것은 무리일 수 있습니다. 특히 웹폰트가 단지 하나의 제목을 위해 사용되는 경우 여러분의 상사나 고객이 이 끔찍한 필기 서체를 사랑 수 있지만, 과연 200KB의 글꼴 파일을 다운로드할만한 가치가 있는지 제고 해봐야 합니다.
안녕하세요.
이미지의 크기가 너무 큰 것은 아닐까요?
요즘은 크롬에서 이미지나 js 파일 등도 병렬로 다운이 되는데..
그래도 심각하게 느린 정도라면 이미지의 크기를 줄여보시고 (해상도 및 png 전환)
css 파일을 만들어서 화면을 구성해보세요.
아래 참고하시면 좋을 것 같네요!
https://kingbbode.tistory.com/1
도움이 되셨길 바랍니다!
이미지 optimizing 하시는 게 일단 맞는 것 같습니다.
다른 분들께서 좋은 설명 많이 해주셨네요.
웹 프레임워크로 어떤 것을 사용하시는지도 적어서 질문해주시면 더 좋았을 것 같습니다.
불러올 이미지가 많을 때 이미지가 로딩될 때까지 loading template 띄우면 사이트가 그나마 더 낫게 보이실 것 같아요
페이스북 들어가보시면 리소스 로딩되기 전에 로딩될 부분에 회색으로 임시로 보여주는 UI있는데 그런 부분 참고해보시면 좋을 것 같습니다.
gzip이라는 방법이 있습니다
웹사이트에서 압축해서 웹으로 보내는방법으로 속도가 많이 개선되는걸로 알고있습니다.
아래는 웹페이지 개선방법에 대한 글이있는 링크구요
