nika-blog

오늘은 web 서비스 속도 개선을 위해 실무에서 어떤일들을 할 수 있는지 경험에 기반해서 작성해보고자 합니다.  1. 사이즈가 큰 이미지 체크하기웹 서비스 속도를 가장 쉽게 개선할 수 있는 방법 중 하나는 이미지 최적화입니다.브라우저의 캐시를 무효화하기 위해 강제 새로고침을 한 후, 개발자 도구의 네트워크 탭에서 img 필터를 적용하고 크기(size) 기준 내림차순 정렬을 해보세요.만약 1MB 이상의 이미지가 있다면,해당 이미지가 정말 필요한지용량을 줄일 수 있는지확인해보는 것이 좋습니다.실제 프로젝트에서도 2MB 이상의 이미지를 발견하고 최적화한 경험이 있습니다.이미지 압축이 필요하다면, 아래 사이트를 활용해보세요.👉 TinyPNG TinyPNG – Compress AVIF, WebP, PNG and..

이 포스팅은 재직하던 회사 인사팀의 요청으로 작성한 회사 기술 블로그에 게재된 글의 초안입니다.  lazy-loading이 필요했던 이유구현 방법현실적인 문제해결방법배포 후 발생한 문제결과lazy-loading이란lazy-loading은 브라우저가 요구 사항에 따라 필요한 구성 요소 또는 모듈만 로드하는 기술입니다. url과 관계없이 모든 모듈이 다운로드되지 않아서 성능에 이점이 있습니다. 장점필요한 부분만 로딩하므로 초기 로딩의 부하를 분산할 수 있습니다.더 이상 부모 모듈이 자식 모듈을 호출하지 않아도 됩니다. 즉, 느슨한 연결로 구성하므로 서로 독립적으로 구성할 수 있으며 쉽게 붙이거나 뗄 수 있도록 구성됩니다.단점첫 로딩 시 한꺼번에 저장해두는 방식 보다 늦게 로딩 되므로 즉시 전환보다는 약간의 ..