빵 입니다.

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

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

프론트엔드 개발자를 위한 SEO 가이드프론트엔드 개발자를 위한 SEO 가이드 도서 표지📍 검색 엔진 최적화란?▪ 검색 엔진(Search Engine)정보를 검색할 수 있도록 도와주는 프로그램검색엔진 구성 단계크롤링(Crawling)웹에서 페이지를 수집한 뒤 인덱스(색인)를 생성하는 자동 소프트웨어로, 로봇(Robot) 또는 스파이더(Spider)라고 알려져 있다.웹 상에 존재하는 정보를 탐색하고 수집하는 것사용자가 키워드를 검색하면 검색 엔진은 미리 생성된 페이지를 활용하여 결과를 제공인덱싱(Indexing)검색어와 연관된 웹 페이지 정보를 담은 데이터 베이스로, 각 웹 페이지의 키워드, 제목, 본문 내용, 이미지 등의 다양한 정보가 포함된다.검색 엔진에서 수집한 정보를 분류하여 검색 결과를 빠르게 제..