구글이 말하는 웹사이트 속도 높이는 3가지 방법: 자바스크립트, 리디렉션, 이미지

웹사이트 속도는 구글 검색 순위보다 사용자 경험을 위해 챙길 일이라고 구글이 설명했습니다. 구글 검색 센터의 마틴 스플릿이 영상 How to make your website faster: 3 quick tips에서 소개한 내용입니다. 속도를 높이는 방법 세 가지를 들었고, 기술적인 내용이 많아 개발자와 함께 보라고 권했습니다.

결론: 속도는 순위보다 사용자를 위한 일이다

마틴 스플릿은 먼저 구글 검색이 가장 관련성 높은 콘텐츠를 보여 주려 한다고 밝혔습니다. 페이지 경험이 가장 좋지 않은 페이지라도 마찬가지입니다. 그래서 페이지 로딩 성능과 코어 웹 바이탈(Core Web Vitals)은 사람들이 생각하는 만큼 중요하지 않다고 했습니다.

이건 제가 그동안 알고 있던 상식과 좀 다른 얘기입니다. 제 개인 블로그 페이지 로딩과 코어 웹 바이털 성능평가를 높이기 위해 엄청난 시간을 투자했습니다만…

다만 의미가 없다는 말은 아닙니다. 지나치게 매달리지 말라는 뜻입니다. 영상 끝에서는 속도 개선이 구글 검색 성과에 직접 영향을 주지는 않는다고 했습니다. 대신 사용자를 더 만족시킬 것이라고 정리했습니다.

구글의 페이지 경험 문서도 같은 흐름입니다. 이 문서는 코어 웹 바이탈이 구글 순위 시스템에 쓰인다고 밝힙니다. 하지만 순위를 정하는 단일 신호는 없고, 관련성 높은 콘텐츠를 먼저 보여 준다고 설명합니다. 도움이 되는 페이지가 비슷하게 많을 때 좋은 페이지 경험이 검색 성과에 보탬이 될 수 있다고 합니다.

방법	무엇을 하나	누가 하나
자바스크립트 줄이기	코드 분할, 콘텐츠 해시로 캐시 활용	개발자
불필요한 리디렉션 피하기	내부 링크를 새 주소로 바꿈	운영자, 개발자
이미지 최적화	파일 형식, 압축, 크기, 지연 로딩	운영자, 개발자

마틴 스플릿이 꼽은 웹사이트 속도 개선 3가지

1. 자바스크립트 사용을 줄인다

마틴 스플릿은 느린 웹사이트의 가장 흔한 원인으로 자바스크립트 파일을 꼽았습니다. 자바스크립트 파일은 대개 용량이 큽니다. 브라우저가 읽고 실행해야 해서 처리하는 데도 시간이 걸립니다.

그는 코드 분할(code splitting)로 페이지마다 필요한 코드만 불러오라고 했습니다. 콘텐츠 해시(content hashing)를 써서 파일 캐시를 최대한 활용하는 방법도 들었습니다.

코드 구조를 알아야 하는 일이라 개발자의 도움이 필요하고 쉽지 않다고 했습니다. 그래도 대개 웹사이트가 크게 빨라진다는 설명입니다.

2. 불필요한 리디렉션을 피한다

도메인을 바꾸거나 대규모 이전으로 사이트 구조가 바뀌면 리디렉션이 꼭 필요합니다. 이 조언은 실수로 생긴 리디렉션을 겨냥한 것입니다.

방법은 내부 링크를 점검하는 것입니다. 링크가 옛 주소가 아니라 새 주소를 가리키도록 고칩니다. 그러면 사용자가 콘텐츠에 닿기까지 거치는 네트워크 왕복과 지연이 줄어듭니다.

3. 이미지를 최적화한다

마틴 스플릿은 이미지 최적화가 복잡한 작업이라고 했습니다. 간단하게는 알맞은 파일 형식과 압축 설정을 고르는 일부터 시작합니다. 더 나아가면 사용자 기기에 맞는 크기의 이미지와 반응형 이미지를 제공합니다.

페이지 위쪽에 있지 않아 바로 보이지 않는 이미지에는 loading=”lazy” 속성을 쓰라고 했습니다. 사용자가 페이지를 열 때 성능이 좋아진다는 설명입니다.

구글의 이미지 SEO 권장사항 문서는 이미지가 페이지 용량에서 가장 큰 몫을 차지하는 경우가 많다고 합니다. 반응형 이미지는 picture 요소나 img 요소의 srcset 속성으로 지정합니다. 이때 src 속성으로 대체 주소를 늘 함께 적으라고 권합니다.

같은 문서에 따르면 구글 검색은 BMP, GIF, JPEG, PNG, WebP, SVG, 그리고 AVIF 형식을 지원합니다. 파일 이름의 확장자도 실제 파일 형식과 맞추는 것이 좋다고 합니다.