페이지 속도는 검색 순위에 영향이 있다고 합니다. -이미지 편
작성자
eungabi
작성일
2022-08-24 12:58
조회
232
안녕하세요.
샌드위치 입니다.
요즘은 애드센스에 대한 연구를 많이 하는 편 입니다.
사실 연구 해봤자 뭐가 나오진 않아서 그냥 쉽게 생각 하기로 했습니다.
단순히 애드센스의 수익을 얻기 위해서는 나의 사이트에 방문자가 있어야 하고, 방문자가 원하는 컨텐츠가 있어야 합니다.
네 한마디로 글을 써라 이겁니다.
그리고 그 방문자 중 컨텐츠를 읽는 중 호기심이 동하는 광고를 보게 되면 클릭을 하게 될 것이고, 그게 나의 수익이 되는 연결고리가 될 것 입니다.
사이트 페이지의 속도는 나의 글이 조금이라도 더 상위에 랭크가 되는 것에 기여를 한다고 합니다.
페이지 경험이 순위에 영향을 미치는 방식 이해하기에 따르면 페이지 속도 보다도 컨텐츠가 중요하지만, 만약 컨텐츠의 내용이 비슷하다면 페이지의 속도, 즉 페이지 경험이 좋은 페이지를 상위에 링크 한다고 합니다.
저는 페이지 속도가 사실 중요한지 제대로 이해하지 못했습니다. 왜냐하면 체감상 느리다고 생각하지 않았으니까요.
하지만 페이지 속도가 순위에 영향이 간다는 사실을 인지 한 후 부터는 페이지의 속도 최적화를 이루기 위해 PageSpeed Insights (페이지 속도 측정)을 통해 나의 사이트를 진단 해봤습니다.
여러가지 진단 결과와 피드백이 존재 하였습니다.
그 중 제일 쉽게 할 수 있지만 노가다 인 것이 이미지 최적화 입니다.
보통은 jpg, png, gif등 자주 사용하는 확장자를 그대로 이용 합니다. 기본적으로 용량 단위가 MB(메가) 단위인 경우가 많은데, 페이지에 이러한 이미지가 있다면, 이미지를 렌더링 하는 시간이 꾀 많이 소요 된다고 합니다.
구글이 개발한 webp 일명 웹피 라는 확장자를 사용하면, 이미지의 용량을 획기적으로 줄일 수가 있습니다.
위의 이미지에서 gif를 webp로 변환 하였습니다. 비록 프레임이나 여러 요소가 다운그레이드 되지만 표현을 하는데 있어서는 무리가 없습니다.
10배가 넘는 이미지 용량의 절감 효과는 페이지의 로딩 속도를 획기적으로 끌어 올려 줄수가 있습니다.
이 처럼 페이지에서 표현하고자 하는 이미지나 움짤 영상 등을 webp로 표현이 가능 합니다.
webp를 변환하는 사이트나 또는 그런 변환을 제공하는 프로그램을 사용하여 변환을 할 수가 있습니다.
표현하고자 하는 공간에 맞는 이미지의 사이즈를 사용하는 것 만으로도 페이지를 보다 빠르게 표현 할 수가 있습니다.
이미지에 대한 이미지 사이즈를 부여하고, 그에 맞는 실제 이미지를 사용 합니다.
이미지의 HTML태그에서는 width="가로 사이즈" height="세로 사이즈" 를 설정 할 수 있는 이미지 속성이 있습니다.
이미지 속성 사이즈를 부여하면 고정된 이미지 사이즈를 제공 할 수 있습니다.
반응형 웹에서는 미디어쿼리를 이용하여, 표현될 이미지 사이즈를 재설정 해줍니다.
로딩을 할때, 이미지가 스크롤을 내려야 볼 수 있는 곳에 위치 한다면, 로딩을 지연 시켜 페이지의 로드 속도를 빠르게 개선 할 수가 있습니다.
실제로 스크롤을 하여 이미지가 화면에 보여질 필요가 있을 때 부터 이미지를 로드 합니다. 한마디로 이미지의 로딩 시점을 뒤로 미루는 것으로 볼 수 있습니다.
이미지를 지연 로딩 시키면, 페이지가 처음 로딩 될때, 이미지에 대한 리소스를 다운 받지 않아도 되기 때문에, 그 만큼 페이지의 속도가 빨라 집니다. 전체적인 페이지 바이트 수가 줄어들기 때문 입니다.
이는 이미지 태그 속성 중 loading="lazy" 를 이용하면 손쉽게 구성 할 수가 있습니다.
예시
img src="https://apppars.com/img/info/info1.webp" alt="webp의 획기적인 용량 절감 효과" loading="lazy" width="100%" height="auto"
하지만 loading="lazy" 속성을 모든 이미지에 적용 한다면, 그것 또한 속도에서 문제가 될 수 있습니다.
보여져야할 이미지가 늦게 로드 되어 페이지 방문시 방문자는 글만 덩그러니 보이는 페이지를 볼 수 있습니다. 또한 모든 구성을 로딩 한 후 이미지를 로딩 하기 때문에 오히려 페이지의 로드 시점이 더 늦어 질 수가 있습니다.
이러한 문제의 해결은 첫 페이지에서 보여지는 이미지에는 loading="lazy" 속성을 부여하지 않는 것 입니다.
이 후 스크롤이 필요한 이미지 부터 loading="lazy" 속성을 적용하는 것이 바람직 합니다.
샌드위치 입니다.
요즘은 애드센스에 대한 연구를 많이 하는 편 입니다.
사실 연구 해봤자 뭐가 나오진 않아서 그냥 쉽게 생각 하기로 했습니다.
단순히 애드센스의 수익을 얻기 위해서는 나의 사이트에 방문자가 있어야 하고, 방문자가 원하는 컨텐츠가 있어야 합니다.
네 한마디로 글을 써라 이겁니다.
그리고 그 방문자 중 컨텐츠를 읽는 중 호기심이 동하는 광고를 보게 되면 클릭을 하게 될 것이고, 그게 나의 수익이 되는 연결고리가 될 것 입니다.
사이트 페이지의 속도는 나의 글이 조금이라도 더 상위에 랭크가 되는 것에 기여를 한다고 합니다.
페이지 경험이 순위에 영향을 미치는 방식 이해하기에 따르면 페이지 속도 보다도 컨텐츠가 중요하지만, 만약 컨텐츠의 내용이 비슷하다면 페이지의 속도, 즉 페이지 경험이 좋은 페이지를 상위에 링크 한다고 합니다.
저는 페이지 속도가 사실 중요한지 제대로 이해하지 못했습니다. 왜냐하면 체감상 느리다고 생각하지 않았으니까요.
하지만 페이지 속도가 순위에 영향이 간다는 사실을 인지 한 후 부터는 페이지의 속도 최적화를 이루기 위해 PageSpeed Insights (페이지 속도 측정)을 통해 나의 사이트를 진단 해봤습니다.
여러가지 진단 결과와 피드백이 존재 하였습니다.
이미지 최적화
webp 확장자를 사용하여 이미지 용량 최적화
그 중 제일 쉽게 할 수 있지만 노가다 인 것이 이미지 최적화 입니다.
보통은 jpg, png, gif등 자주 사용하는 확장자를 그대로 이용 합니다. 기본적으로 용량 단위가 MB(메가) 단위인 경우가 많은데, 페이지에 이러한 이미지가 있다면, 이미지를 렌더링 하는 시간이 꾀 많이 소요 된다고 합니다.
구글이 개발한 webp 일명 웹피 라는 확장자를 사용하면, 이미지의 용량을 획기적으로 줄일 수가 있습니다.
위의 이미지에서 gif를 webp로 변환 하였습니다. 비록 프레임이나 여러 요소가 다운그레이드 되지만 표현을 하는데 있어서는 무리가 없습니다.
10배가 넘는 이미지 용량의 절감 효과는 페이지의 로딩 속도를 획기적으로 끌어 올려 줄수가 있습니다.
이 처럼 페이지에서 표현하고자 하는 이미지나 움짤 영상 등을 webp로 표현이 가능 합니다.
webp를 변환하는 사이트나 또는 그런 변환을 제공하는 프로그램을 사용하여 변환을 할 수가 있습니다.
이미지 사이즈 최적화
이미지를 최적화 하는 요소가 비단 용량을 줄이는 것에만 있지 않습니다.표현하고자 하는 공간에 맞는 이미지의 사이즈를 사용하는 것 만으로도 페이지를 보다 빠르게 표현 할 수가 있습니다.
이미지에 대한 이미지 사이즈를 부여하고, 그에 맞는 실제 이미지를 사용 합니다.
이미지의 HTML태그에서는 width="가로 사이즈" height="세로 사이즈" 를 설정 할 수 있는 이미지 속성이 있습니다.
이미지 속성 사이즈를 부여하면 고정된 이미지 사이즈를 제공 할 수 있습니다.
반응형 웹에서는 미디어쿼리를 이용하여, 표현될 이미지 사이즈를 재설정 해줍니다.
이미지 지연 로드 최적화
웹 페이지가 로딩 될때는 맨 윗줄 부터 코드를 해석해 가며 브라우저에서 출력 해줍니다.로딩을 할때, 이미지가 스크롤을 내려야 볼 수 있는 곳에 위치 한다면, 로딩을 지연 시켜 페이지의 로드 속도를 빠르게 개선 할 수가 있습니다.
실제로 스크롤을 하여 이미지가 화면에 보여질 필요가 있을 때 부터 이미지를 로드 합니다. 한마디로 이미지의 로딩 시점을 뒤로 미루는 것으로 볼 수 있습니다.
이미지를 지연 로딩 시키면, 페이지가 처음 로딩 될때, 이미지에 대한 리소스를 다운 받지 않아도 되기 때문에, 그 만큼 페이지의 속도가 빨라 집니다. 전체적인 페이지 바이트 수가 줄어들기 때문 입니다.
이는 이미지 태그 속성 중 loading="lazy" 를 이용하면 손쉽게 구성 할 수가 있습니다.
예시
img src="https://apppars.com/img/info/info1.webp" alt="webp의 획기적인 용량 절감 효과" loading="lazy" width="100%" height="auto"
하지만 loading="lazy" 속성을 모든 이미지에 적용 한다면, 그것 또한 속도에서 문제가 될 수 있습니다.
보여져야할 이미지가 늦게 로드 되어 페이지 방문시 방문자는 글만 덩그러니 보이는 페이지를 볼 수 있습니다. 또한 모든 구성을 로딩 한 후 이미지를 로딩 하기 때문에 오히려 페이지의 로드 시점이 더 늦어 질 수가 있습니다.
이러한 문제의 해결은 첫 페이지에서 보여지는 이미지에는 loading="lazy" 속성을 부여하지 않는 것 입니다.
이 후 스크롤이 필요한 이미지 부터 loading="lazy" 속성을 적용하는 것이 바람직 합니다.
뉴스픽 & 오아시스 피드
전체 0