웹성능최적화2 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 다음
