크롬 개발자도구 네트워크 패널은 개발자가 웹페이지에서 실제로 업로드와 다운로드가 잘 되는지 HTTP 헤더, 콘텐츠, 크기와 같은 개별 리소스의 속성 등을 체크해야 하는 2가지 경우에 이용을 합니다. 이 페이지에서는 ‘크롬 개발자도구 웹페이지 속도 측정’하는 방법과 네트워크 페널의 기본적인 사용법에 대해 다루겠습니다. CMS로 운영되는 워드프레스 웹사이트 및 쇼핑몰로 운영되는 사이트 등 웹사이트의 속도 개선으로 SEO에…
2010년 Google은 온라인 이미지를 줄이기 위해 ‘WebP 파일‘ 포맷을 만들었습니다. 사진의 그래픽과 크기를 줄여 더 빠른 웹사이트 로딩이 가능합니다. 무료로 사용할 수 있는 오픈 소스 파일입니다. 1. WebP 파일 정의 ‘WebP‘는 기존의 PNG 및 JPEG 파일보다 포맷 파일 크기가 작습니다. 확장자 또한 [.WEBP]로 표시되기 때문에 알아보기 쉽습니다. 두 개의 포맷 파일인 PNG와 JPEG…
레이지 로딩(Lazy Loading)은 웹페이지 로딩 시간을 줄이는 기술입니다. “이미지가 로드 되는 시간을 단축 시킨다”로 정의 내릴 수 있습니다. 페이지의 모든 이미지를 유지하면서 페이지 로드 시간을 개선하고 페이지 크기를 줄임으로서 웹페이지의 속도를 향상 시킵니다. ‘이미지 지연 로드’ 특징은 사용자가 페이지에 접속 후 아래로 스크롤을 할 때 이미지가 표시될 때만 로딩이 됩니다. 즉, 페이지 하단에…
워드프레스 CMS를 사용하면 테마는 필수로 사용하게 됩니다. 워드프레스 차일드 테마는 운영하는 워드프레스 사이트에서 필수 요소인지 먼저 생각해 볼 필요가 있습니다. 1. 차일드 테마란? 차일드 테마(Child Theme)는 워드프레스 프레임워크의 주요 기능 중 하나입니다. 사용 중인 테마 파일의 수정(커스터마이징)이 필요할 때 원본 테마(부모 테마) 대신 수정할 수 있게 만들어진 기능입니다. Child Theme는 기본 테마 업데이트가…
구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 1. 개발자모드 실행 방법 실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에…
웹사이트에 이미지 파일 확장자를 업로드 할 때 적절한 이미지 파일 형식을 고민하게 됩니다. 수 많은 이미지 파일의 확장자 중에 JPEG 파일과 PNG 파일 사이에서 고민하게 됩니다. JPEG vs PNG 파일의 다른 점은 무엇이며, 사이트를 운영하는데 있어 어떤 파일을 사용하는 게 효과적일까요? 우선 차이점부터 알아봐야 합니다. 이 글에서 다룰 주제는 다음과 같습니다. 무손실 vs…
jpg와 jpeg는 이미지 파일의 확장자입니다. E자가 중간에 추가로 붙는 것이 다른 동일한 파일입니다. JPG와 JPEG 차이점은 무엇일까요? 1. JPG와 JPEG 차이가 나는 이유 오래 전 MS사의 윈도우 OS가 사용되기 전 도스(DOS)란 프로그램이 사용 되었습니다. 도스는 확장자를 기재 시 3글자까지 기재가 가능했습니다. 이와 같은 이유로 도스 프로그램에선 4자리의 뜻을 가진 jpeg파일은 jpg로 줄여서 사용…
웹사이트와 앱 분석을 위한 GA4 보고서를 도입했지만 용어와 설정 방법 등에서 데이터 활용 방법을 어떻게 할지 고민할 수 있습니다. ‘GA4 애널리틱스 기본 보고서’의 유형에 대해 알아 보겠습니다. 1. GA4 애널리틱스 기본 보고서 GA4 기본 보고서는 [보고서 개요]를 클릭하면 추가 설정을 하기 전 기본 보고서를 확인할 수 있습니다. 기본 보고서의 구조와 어떠한 내용들이 있는지…
애널리틱스 GA4 계정 및 데이터 스트림을 생성했다면 ‘애널리틱스 데이터 설정’과 ‘내부 IP 제외’를 해서 통계를 보다 정확히 볼 수 있도록 하는 것이 필수 설정이라고 할 수 있습니다. 세 번째로 ‘추천 트래픽’을 제외 시키는 방법에 대해 알아 보겠습니다. 1. 애널리틱스 데이터 설정 1.1 GA4에서 데이터 수집하는 항목 이해 애널리틱스에서 데이터를 수집하는 항목은 다음과 같습니다….
구글 애널리틱스에서 구글의 서치 콘솔(Google Search Console)을 연결해서 사용할 수 있습니다. 애널리틱스 서치 콘솔 연결이 필요한 이유는 어떤 검색어로 유입되었는지 확인하는 것 뿐 아니라 검색 결과 페이지 노출 수와 순위, 노출 수 대비 순위 등을 알 수 있기 때문입니다. 1. 애널리틱스 서치 콘솔 연결 이점 서치 콘솔만 사용할 때 크롤링과 색인, 실적 등…
End of content
End of content