Front-end/웹성능 최적화4 Cache-control로 캐시최적화하기 Cache란? 콘텐츠 요청에 빠르게 응답하기 위해 서버와 클라이언트 사이에서 응답 콘텐츠의 사본을 저장하는 공간을 캐시라고 합니다. 이 캐시를 유지하고 처리해주는 별도의 서버를 캐시 서버라고 합니다. 캐시는 보통 클라이언트와 서버 사이에 존재하며, 서버의 성능을 크게 향상시키는 역할을 합니다. 웹은 HTML, 이미지, CSS, 자바스크립트 등 정적 콘텐츠가 많기 때문에 캐시의 역할이 중요합니다. 웹 캐시는 서버와 브라우저 중간에 존재하면서 최초 원본 콘텐츠 요청을 최종 서버에 보내 응답을 받은 후 그 복사본을 만들어 저장하고 사용자에게 응답합니다. 이후 같은 콘텐츠에 대한 요청이 웹 서버에서 원본을 가져오는 대신 캐싱 서버에서 복사본을 받아 원본 서버로의 트래픽을 줄이고 사용자의 요청에 대한 반응 속도를.. 2022. 7. 12. Lazy loading 해서 중요한 리소스 순서 보장하기 웹사이트 페이지를 볼 때 많은 리소스들이 있는데, 그 중 중요하지 않은 리소스들이 먼저 네트워크를 통해 다운이 되고 그 이후에서야 여유가 될때 중요한 리소스가 다운되는 경우가 있습니다. 리소스들의 다운로드 순서가 보장이 되지 않기 때문인데요.(크롬 개발자 도구의 Network 탭에서 리소스들의 다운로드 상태가 pending인 경우 다른 리소들의 다운로드가 너무 많아 순서가 미뤄진 것입니다) 이럴 경우 사용자가 제일먼저 마주치는 최상위의 리소스가 제일 먼저 다운로드 되어서 사용자에게 가장 빨리 보여지도록 하위의 리소스들의 다운로드를 잠시 대기시켜놓는 것이 Lazy loading입니다. 말그대로 게으른(느린) 로딩이죠. 특정 리소스가 다른 리소들에게 밀려 느리게 로딩되는지 확인하기 위해서는 크롬 개발자도구의.. 2022. 5. 3. CSS sprite - 한번의 통신으로 여러개의 이미지를 한번에 불러와서 웹성능 개선하기 지금 바로 네이버 메인화면에서 F12를 눌러 개발자도구를 들어가봅니다. 개발자 도구에서 Network 탭을 들어가면, 네이버 메인화면을 띄우면서 이루어진 네트워크 전송들이 찍혀있는것을 볼 수 있는데요. 그 중 이미지 파일(.png) 하나를 눌러보면 다음과 같이 메인화면에서 사용된 이미지들을 하나의 png파일로 모아서 하나의 이미지로 만들어놓은 것을 볼 수 있습니다. 이런 방법을 CSS 스프라이트(sprite)라고 하는데, 여러개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방법입니다. 주로 위에서 처럼 아이콘이나 버튼 등 작은 이미지를 사용할 때 많이 사용합니다. 왜 이런 방법을 사용할까? 결론부터 말하자면 웹사이트 성능을 개선하기 위해 http 요청 수를 .. 2021. 12. 21. 크롬 Lighthouse로 내 웹사이트 성능을 측정해보자 Lighthouse를 통해서 웹 성능을 전반적으로 검사하고 성능을 향상하기 위한 가이드를 제공해줍니다 지금 F12를 눌러 [개발자도구]를 들어간 후 [Lighthouse] 탭 ( 크롬버전에 따라 이름이 [Audit] 일 수도 있습니다. ) Categories는 어떤 부분을 검사하고싶은지, Device는 어떤 기기환경에서의 성능을 검사하고 싶은지 선택해주시면 됩니다. 각각 선택해 준 후 [ Generate report ] 를 눌러 성능 검사를합니다. 그러면 웹 성능 최적화가 왜 중요한지에 대해서 열심히 설명을 해주다가 로딩이 끝나면! 검사를 한 웹 사이트는 제가 vue코드를 react코드로 바꾸면서 만들었던 사이트였는데요. 이런식으로 결과가 나왔습니다. 67점이라는 점수는 Metrics라는 기준에 의해 나.. 2021. 10. 28. 이전 1 다음
