빵 입니다.

회사 홈페이지 SEO 개선을 하면서 성능에 대해 관심이 많아졌다.이미지를 어떻게 로드해서 어떻게 보여줄지도 큰 관심거리다. 태그의 srcset, sizes 속성을 이용해 기기 해상도나 뷰포트 크기에 따라 적절한 이미지를 선택해서 로딩할 수 있다.구글링해봤는데 정리가 잘 된 자료가 있었고, 아래에 요약해서 정리했다. 더 자세히 알고 싶다면 원본글을 보시는 걸 추천합니다~~~ 📌 srcset브라우저의 뷰포트 너비나 디스플레이 해상도에 대한 반응형 이미지 소스를 정의// 사용 예시📍 언제 사용할까 1. 브라우저 뷰포트 너비에 대한 이미지 소스를 지정 2. 디스플레이 해상도에 대한 이미지 소스를 지정 3. 브라우저 뷰포트 너비에 대한 이미지 소스와 디스플레이 해상도에 대한 이미지 소스를 함께 지정 1. 브라..

대표 홈페이지 SEO 개선 작업을 시작했다.메인을 포함한 4개의 메뉴 페이지와 개인정보처리방침, 이용약관으로 이루어진 사이트이다. 📍 기존 사이트의 한계▪ 수동적인 작업 환경 - 동적 라우팅 미지원 - 불필요한 파일들과 미사용 코드 - 반복적인 하드 코딩 ▪ 플랫(Flat) 페이지 계층 구조 - 사이트 구조 재설계 필요 📍 웹 퍼포먼스 도구를 이용한 현재 사이트 성능(SEO 포함한) 테스트 ▪ 웹 퍼포먼스 도구- 웹사이트의 성능, 접근성, SEO 등을 분석하고, 공통적으로 Lighthouse 엔진을 기반으로 분석- Lighthouse와 PageSpeed Insights가 있다.더보기📍 Lighthouse V.S. PageSpeed Insights ▪ Lighthouse는 크롬 DevTools ..