풍부한 콘텐츠와 빠른 웹 페이지 로드 속도의 균형을 맞추는 방법

빠른 페이지 로드 시간과 풍부한 대화형 콘텐츠는 모두 웹사이트를 성공적으로 만드는 데 중요하지만 이 둘 사이의 균형을 맞추는 것은 어려울 수 있습니다.

페이지 로드 시간 이 웹사이트의 성공에 매우 중요하다는 것은 대단한 비밀이 아닙니다. Google의 검색 알고리즘은 빠른 로드 시간을 선호하며 페이지 로드 시간을 조금만 늘리면 전환에 부정적인 영향을 줄 수 있다는 연구 결과도 많이 있습니다. Hallam 디지털 마케팅 관리자인 Tom Whiley는 작년에 페이지 로드 속도를 개선하는 방법에 대한 훌륭한 블로그 게시물을 작성했습니다. 호스팅 파트너인 WP Engine은 페이지 로드 속도에 대한 훌륭한 인포그래픽을 제작했습니다.

웹사이트는 또한 전환을 장려하기 위해 콘텐츠, 이미지 및 상호작용 이 풍부 해야 합니다. 이것은 필연적으로 더 큰 페이지로 이어져 자연스럽게 페이지 로드 시간을 늦춥니다.

속도에 대한 요구와 풍부한 콘텐츠에 대한 요구 사이의 갈등으로 인해 디자인 프로젝트가 중단될 수 있습니다. 따라서 두 요구 사항을 모두 충족하는 균형을 찾는 것이 중요합니다.

이 블로그에서는 이 두 가지 상충되는 문제의 균형을 맞추는 데 도움이 되는 접근 방식을 공유하겠습니다.

페이지의 속도를 목적에 연결

웹사이트가 상당히 성숙한 단계로 개발될 때까지는 로드 시간을 예측할 수 없으므로 속도를 측정하고 개선하기 위해 반복적인 접근 방식을 취하는 것이 가장 좋습니다.

핵심 출발점은 사이트의 SEO 랜딩 페이지와 리치 콘텐츠 페이지를 식별하는 것입니다. 그런 다음 SEO 페이지의 페이지 크기와 로드 속도를 최대한 줄이는 데 집중할 수 있습니다.

마찬가지로 리치 랜딩 페이지에는 사용자 상호작용을 위한 공간이 조금 더 허용될 수 있습니다.

적용할 수 있는 대략적인 프로세스는 다음과 같습니다.

1. 로드 속도 감소의 대상이 될 주요 방문 페이지를 식별합니다.
2. 낮은 로드 시간에 대한 모범 사례를 중심으로 설계합니다.
3. 낮은 로드 시간에 대한 모범 사례와 관련된 기능을 결정합니다.
4. 페이지를 개발합니다.
5. 로드 시간을 절약할 수 있는 기회를 측정하고 찾으십시오.
6. 적절하게 4-5를 반복합니다.

이것은 이야기의 첫 부분만 다룹니다. 그런 다음 주요 SEO 페이지는 페이지 로드 시간을 지속적으로 모니터링하여 페이지가 여전히 예상대로 작동하는지 확인해야 합니다. 특히 누구나 페이지를 편집할 수 있는 콘텐츠 관리 시스템을 사용할 때 그렇습니다.

따라서 웹 사이트를 시작한 후 따를 수 있는 두 가지 간단한 단계가 있습니다.

1. 주요 방문 주요 페이지가 여전히 작동하고 있는지 확인하기 위해 월간 점검을 설정합니다.
2. 페이지가 합의된 수준 이하로 수행되면 트리거되는 페이지 속도 모니터링 도구를 사용하십시오.

로드 속도 최적화를 위한 설계 고려 사항

사이트 디자인은 페이지 로드 시간을 얼마나 최적화할 수 있는지 결정하는 데 중요한 역할을 합니다. 웹 페이지의 경우 크기가 정말 중요합니다. 목표는 페이지 로드 시간을 이상적으로는 500k 미만으로 유지하는 것이지만 최대 1MB 미만으로 유지하는 것입니다.

로드 시간을 최소화하기 위해 취해야 할 몇 가지 단계는 다음과 같습니다.

1. 주요 랜딩 페이지에 이미지 사용을 최대한 최소화합니다. 도상과 디자인의 미묘한 사용이 같은 효과를 낼 수 있을 때 이미지를 사용하여 페이지를 풍부하게 보이게 하는 것은 너무 쉽습니다.
2. 이미지가 사용되는 경우 허용할 수 없는 품질 저하가 없는지 확인하면서 최적화해야 합니다.
3. 자연 검색에 최적화된 린 랜딩 페이지를 사용하고 자연 검색을 대상으로 하지 않는 심층 페이지에 풍부한 콘텐츠를 유지합니다.
4. 여러 템플릿에서 고유하고 복잡한 레이아웃을 많이 사용하지 마십시오. HTML 마크업이 단순할수록 파일 크기가 작아집니다.
5. 무거운 자바스크립트 라이브러리에 의존하는 복잡한 대화형 요소를 피하세요. 화면을 가로질러 움직이는 무언가를 보는 것이 멋져 보일 수 있지만, 정말 필요한가요?

구현 중 기술 고려 사항

마지막으로 호스팅 선택의 일부로 고려해야 하는 페이지 로드 속도의 기술적인 측면에 대해 알아볼 수 있습니다.

1. 가능한 경우 타사 스크립트에 대한 의존도를 제거하십시오. 이는 페이지가 로드되기 전에 로드되는 스크립트에 의존할 뿐만 아니라 때때로 로드가 높고 로드 속도가 평소보다 느리기 때문에 문제가 발생합니다. 이로 인해 "덩어리진" 로드 시간이 발생할 수 있습니다.
2. 사용자가 보기로 스크롤할 때 스크롤해야 볼 수 있는 부분에 표시되지 않는 이미지가 로드되도록 지연 로드 기술을 사용합니다.
3. 반응형 이미지를 더 잘 활용하세요. 브라우저에서 반응형 이미지를 처리하는 방식이 약간 발전했습니다. 즉, 모든 보기 포트에서 작동하는 하나의 큰 이미지를 제공할 필요가 없으며 특정 해상도에 대해 더 나은 이미지를 제공할 수 있습니다.
4. 삽입된 비디오 임베드가 페이지 로드의 일부가 아니라 페이지가 로드된 후에 로드되는지 확인합니다. 즉, 사용자는 비디오의 미리보기 이미지를 본 다음 링크를 클릭하면 실제 비디오를 보게 됩니다.
5. 301 리디렉션을 위한 대용량 htaccess 파일을 피하고 개별 페이지 간 리디렉션이 아닌 대량 카테고리 리디렉션에 규칙을 결합합니다.
6. 이미지에 CDN을 사용합니다. 사이트의 사용자 기반이 특히 지역화되어 있는 경우 CDN이 성능에 해로울 수 있으므로 이를 측정해야 합니다.
7. CSS 및 Javascript 파일을 최소화합니다. 대부분의 경우 이미 이 작업을 수행해야 하지만 주요 페이지의 일부 파일을 줄일 수 있는 추가 기회가 있을 수 있습니다. 이것은 새로운 플러그인 설치에 대한 결정을 내리는 데 있어 핵심적인 부분입니다.
8. 이전 브라우저에 대한 지원을 중단합니다. 이전 브라우저에서는 특정 CSS 및 JS 파일을 생성하여 조건부로 사이트에 로드해야 합니다. 이것들을 완전히 제거할 수 있다면 요청해야 할 것이 하나 줄어듭니다.
9. 사이트에서 사용되는 플러그인 수를 최소화합니다. 우리는 플러그인 팽창으로 고통받는 웹사이트를 정기적으로 상속받습니다. CMS로 작업할 때 새로운 문제는 아니지만 여전히 큰 문제입니다.
10. 이메일 서명을 위한 이미지 호스팅과 같이 필수적이지 않은 호스팅 요구 사항에 대한 의존도 제거
11. 데이터베이스 최적화 쿼리를 실행합니다. 귀하의 웹사이트가 한동안 존재했다면 쿼리가 실행되는 시간을 최적화하는 데 사용할 수 있는 여러 데이터베이스 기술이 있습니다.

요약하자면 고도로 최적화된 사이트를 만드는 것은 사양, 디자인 및 구현 간의 균형입니다. 저에게 핵심 요소는 고도로 최적화된 SEO 페이지를 가능한 다른 페이지와 차별화하고 가능한 한 이를 최적화하는 데 집중하는 것입니다.

웹 개발에 도움이 필요하면 주저하지 말고 저희에게 연락하십시오.