모바일 사이트 속도 최적화에 대한 궁극적인 가이드

게시 됨: 2016-03-09

mobile-speed

우리 모두는 모바일 퍼스트 소비자 시장으로 나아가고 있으며 SMB는 모바일 최적화 웹사이트 측면에서 여전히 뒤쳐져 있습니다. 번개 속도 테스트로 인터넷 연결과 4G 표준이 이미 자리 잡고 있기 때문에 모바일 사용자의 성장에 이보다 더 좋을 수는 없습니다. ComScores 최근 글로벌 모바일 보고서 에 따르면 , 상위 100개 디지털 미디어 자산에 대한 트래픽 및 방문자의 절반 미만(49%)이 모바일 전용 입니다. 이것은 모바일 장치에 적합하지 않은 웹사이트가 청중의 절반을 잃을 위험이 있다고 주장하는 놀라운 통계입니다.

모바일 사용자에게 가장 중요한 유일한 것은 속도입니다( 아래 그림은 데스크톱 및 모바일 장치의 중간 로드 시간을 제공함 ).

로딩 시간

이 모바일 사이트 속도 최적화 가이드에서 설명하는 단계와 방법은 모든 유형의 모바일 장치에서 사이트 속도를 최적화하는 데 필요한 모든 수정 사항을 나열합니다.

모바일 장치에서 사이트 성능을 확인하는 방법은 무엇입니까?

웹사이트를 모바일 친화적으로 만들기 위해 가장 먼저 해야 할 일은 모바일 기기에서 웹사이트의 성능을 확인하는 것입니다. 이 작업에 사용할 수 있는 몇 가지 도구가 있습니다.

구글 모바일 친화성 테스트 - 이 도구는 URL을 분석하고 페이지에 모바일 친화적인 디자인이 있는지 보고합니다. Googlebot이 휴대기기에서 웹페이지를 올바르게 볼 수 있는 방법에 대한 문서를 제공하고 페이지를 모바일 친화적으로 만드는 방법에 대한 단계별 제안을 제공합니다.

Google 페이지 속도 통계 - 이 도구는 웹 페이지를 분석하고 더 빠르게 만들기 위한 제안을 제공합니다. 이 도구는 아래 스크린샷과 같이 빨간색(수정 필요), 노란색(수정 고려) 및 녹색(감지된 문제 없음)의 3가지 우선 순위 표시기를 제공합니다.

페이지 속도 표시기

GTMetrix - 이 도구는 Google Page Speed ​​Insights 및 Yahoo Slow 둘 다에서 데이터를 가져와 성능 보고서를 제공합니다. 또한 404와 같은 간단한 문제 또는 페이지 렌더링을 차단하는 외부 리소스와 같은 더 복잡한 문제를 발견하는 데 사용할 수 있는 폭포수 차트를 제공합니다.

문제를 식별하고 초기 수정을 수행했으면 이제 아래 제안을 구현하여 웹 사이트 속도를 더욱 높일 때입니다.

모바일 장치에서 웹사이트 속도를 높이는 방법 - 로드 시간을 줄이고 성능을 높이는 8가지 방법

아래 팁은 모바일 장치에서 웹사이트의 속도를 높이기 위해 시도되고 테스트되었습니다. 하나씩 하나씩 이해해 봅시다.

1- 적절하게 구성된 CDN 보유

속도와 접근성은 검색 최적화에서 가장 중요한 관심사 중 하나입니다. CDN(콘텐츠 전송 네트워크)을 통해 글로벌 콘텐츠 캐싱을 활용하는 것은 SEO 노력을 강화하는 좋은 방법입니다. 기본적으로 CDN은 웹 사이트 콘텐츠를 동적으로 캐시하는 전 세계 여러 위치에 분산된 서버 모음입니다. 기존 클라우드 호스팅 서비스를 넘어 활용 가능한 부가 서비스입니다. WordPress 사이트를 포함한 다양한 서비스와 호환됩니다.

CDN 캐싱 클라이언트에 가장 가까운 서버를 통해 캐시된 콘텐츠를 전달하는 데 도움이 됩니다. 이는 차례로 더 짧은 거리의 이점을 통해 대기 시간과 로드 시간을 최소화합니다( 아래 그림을 참조하여 CDN이 로드 시간을 획기적으로 줄이는 방법에 대한 아이디어를 얻으십시오). 유능한 CDN에는 DDoS 공격 방지 및 웹 앱 방화벽과 같은 인프라 최적화도 함께 제공됩니다.

cdn 캐싱

CDN을 구성하는 방법?

  • 선호하는 CDN 제공업체에 가입하고 웹사이트를 추가하세요.
  • CDN 네트워크를 통해 트래픽을 라우팅하려면 DNS 설정을 변경하십시오. A 레코드 를 업데이트하고 CNAME 레코드 를 만들거나 업데이트합니다. ( 아래에 Incapsula의 스크린샷이 제공되었습니다. 원하는 CDN 공급자를 선택하고 DNS 설정에서 필요한 변경을 수행할 수 있습니다 .)

DNS 지침

  • 그게 다야! 레코드 업데이트가 완료되면 CDN이 트래픽을 웹사이트로 라우팅하기 시작합니다.

CDN이 있으면 사이트 로딩 시간을 개선하고 사용자 경험을 개선하는 데 도움이 됩니다.

2- 액셀러레이티드 모바일 페이지 활용

10월에 Google은 더 빠르고 개방적인 모바일 웹을 위해 Accelerated Mobile Pages를 도입했습니다. Accelerated Mobile Pages는 검색 엔진이 콘텐츠를 매우 빠르게 표시할 수 있도록 하는 특수 형식의 웹 페이지이며 게시자가 콘텐츠의 모양과 느낌을 제어할 수 있도록 합니다. 모바일 웹사이트는 오픈 소스 AMP HTML 코드를 사용하여 훨씬 빠르게 로드할 수 있으며 검색 엔진 로드 시간을 효과적으로 억제하여 이탈률을 최소화할 수 있습니다.

사이트에 AMP를 구현하는 방법은 무엇입니까?

사이트에 AMP를 구현하려면 다음 단계를 따르세요.

A- AMP HTML(기본 페이지의 AMP 버전이라고도 함)을 사용하여 기본 페이지의 별도 버전을 만듭니다 . 첫 번째 AMP HTML 페이지를 디자인하기 위한 기본 코드는 다음과 같습니다.

  • <!doctype HTML>
  • <html amp lang="ko" >
  • <머리>
  • <메타 문자 집합="utf-8" >
  • <title> AMP 페이지 제목이 여기에 표시됩니다. </title>
  • <link rel="canonical" href="비 AMP 버전의 URL이 여기에 표시됩니다." />
  • <메타 이름="viewport" content="width=device-width, minimum-scale=1,initial-scale=1" >
  • <스크립트 유형="응용 프로그램/ld+json" >
  • {
  • "@context": "http://schema.org",
  • "@type": "뉴스 기사",
  • "headline": "콘텐츠 게시를 위한 오픈 소스 프레임워크",
  • "날짜 게시": "2015-10-07T12:02:41Z",
  • "이미지": [
  • "로고.jpg"
  • ]
  • }
  • </스크립트>
  • <style amp-boilerplate >body {-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both; -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{ from {visibility:hidden} 에서 {visibility:visible}}@-moz-keyframes -amp-start{visibility:hidden} 에서 {visibility:visible}}@ - ms-keyframes -amp-start{visibility:hidden 으로 } 에서 {visibility:visible}}@-o-keyframes -amp-start{visibility:hidden} 에서 {visibility:visible}}@keyframes -amp-start{visibility : hidden} 에서 {visibility:visible} 로 }</ 스타일 >< noscript >< 스타일 amp-boilerplate > 본문 {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript>
  • <스크립트 비동기 src="https://cdn.ampproject.org/v0.js" ></script>
  • </head>
  • <본체>
  • <h1> AMP에 오신 것을 환영합니다 </h1>
  • </바디>
  • </html>

B- 이미지를 삽입하려면 다음 코드를 사용하십시오.

<amp-img src="welcome.jpg" alt="환영" height="400" width="800" ></amp-img>

C- 공통 CSS 속성을 사용하여 페이지의 프리젠테이션 및 레이아웃을 수정합니다 . 다음은 스타일 지정 코드의 예입니다.

<style amp-custom > /* 모든 사용자 정의 스타일이 여기에 표시됩니다. */ body { background-color: white; } amp-img { 배경색: 회색; 테두리: 1px 단색 검정; } </스타일>

D- AMP 페이지를 미리 보고 확인하고 게시합니다.

E- 검색 엔진 봇이 웹페이지의 AMP 버전을 식별할 수 있도록 페이지의 비 AMP 버전에 amphtml태그를 추가합니다 .

<link rel="amphtml" href="웹페이지의 AMP 버전이 여기에 표시됩니다." />

AMP 페이지의 라이브 예

다음은 작동 중인 AMP 페이지의 실제 예입니다. 그리고 여기 일반 페이지가 있습니다 . 단순히 각 페이지의 소스 코드를 보고 속도와 코딩의 차이를 알 수 있습니다.

AMP 학습 리소스

AMP HTML 학습을 위한 코드를 찾으려면 아래 리소스에서 자세한 내용을 참조하세요.

  • AMPProject.org
  • Github AMP 프로젝트

3- 사이트 구조, 콘텐츠 개선 및 사용자 경험 향상

사이트 아키텍처는 사이트 디자인과 관련하여 종종 간과되는 영역이지만 그렇지 않아야 합니다. Google 알고리즘은 검색자의 정보를 사용하므로 좋은 사용자 경험은 더 높은 순위를 의미합니다. 사이트 구조가 적절하지 않으면 페이지를 로드하는 데 더 많은 시간이 걸리고 사용자는 사이트를 떠납니다. 이것은 나쁜 사용자 경험을 제공합니다.

사이트 구조를 개선하는 방법?

좋은 검색 경험의 가장 중요한 측면 중 하나는 더 나은 크롤링을 위해 사이트를 최적화하는 데 도움이 되기 때문에 좋은 사이트 구조를 갖는 것 입니다.

사이트 구조를 향상시키기 위해 따라야 하는 8단계는 다음과 같습니다.

  • 사이트 계층 구조를 계획하고 논리적으로 유지하십시오. 또한 범주와 하위 범주의 수를 균형 있게 조정합니다. 세분화된 사이트 구조의 예는 다음과 같습니다.

세련된_그림2-1

  • 카테고리 및 하위 카테고리의 이름을 지정할 때 검색 가능한 키워드를 사용하십시오. 올바른 이름을 선택하면 사이트 최적화에 큰 도움이 됩니다.
  • 사용자 친화적인 URL 구조 를 갖고 사용자가 모든 페이지에 도달하기 위해 세 번 이하의 클릭만 하도록 합니다.
  • 가능한 한 많은 사이트링크를 추가하세요. 사이트의 탐색 가능성을 높이는 것 외에도 사이트링크는 브랜드 평판을 높이고 CTR을 높이며 전환 유입경로를 줄이는 데 도움이 됩니다.
  • 가능한 한 많은 내부 링크를 추가하되 모두 관련성이 있는지 확인하세요. 견고한 내부 링크를 만드는 방법에 대한 훌륭한 예를 찾고 있다면 Wikipedia를 따르십시오. 향상된 SEO 친화적인 내부 링크 구조를 통해 링크 주스가 모든 내부 페이지에 동등하게 전달되고 모든 페이지가 Google에서 좋은 순위를 차지할 수 있으므로 트래픽과 전환이 증가합니다.
  • 중복 카테고리 및 태그 문제를 피하십시오. Yoast 태그 최적화 도구 는 WordPress 사이트의 중복 태그 문제를 해결하는 좋은 방법입니다.
  • 가장 중요한 페이지에 더 자주 그리고 스크롤 없이 볼 수 있는 부분에 링크하십시오. 수익을 높이려면 최대 링크 주스를 주요 수익 생성 페이지에 전달하는 것이 매우 중요합니다.
  • 홈 페이지에서 수익 창출 페이지에 도달하는 데 단 2번의 클릭이 필요하다는 2번의 클릭 규칙을 따르십시오 .

사이트 콘텐츠를 개선하는 방법?

Google의 순위 알고리즘은 콘텐츠 품질에 중점을 둡니다. 팬더 업데이트는 특히 웹 사이트에 사용자 친화적인 콘텐츠가 낮거나 덜 포함된 사이트의 순위를 낮추는 것을 목표로 합니다. 사이트에 콘텐츠를 표시하는 방식은 사이트 속도와 많은 관련이 있습니다.

다음은 사이트 콘텐츠의 품질과 표현을 개선하여 사이트 속도를 높일 수 있는 5가지 방법입니다.

  • 블로그가 있습니다. 검색 엔진은 독특하고 신선한 콘텐츠를 좋아하며 블로그를 갖는 것은 그 목적에 부합합니다. 전체 로딩 시간을 줄이는 것을 목표로 하는 정말 유용한 플러그인을 제공하는 WordPress에 블로그를 두는 것이 좋습니다. WordPress에서 블로그를 만드는 것은 매우 쉽습니다. 단계별 지침을 보려면 블로그 시작 방법에 대한 무료 초보자 가이드를 다운로드하세요. . 이미지 및 캐시를 최적화하는 데 사용할 수 있는 일부 플러그인은 다음과 같습니다.EWWW Image Optimizer ,구글 라이브러리 ,WP 최적화 및WP 슈퍼캐시 .
  • 이미지를 한 번에 로드되는 하나의 큰 이미지로 결합하는 데 도움이 되는 CSS Sprites를 사용 하여 이미지를 최적화하십시오.

CSS-Sprites

  • 반응형 테마는 속도를 고려하고 더 빠르게 로드하므로 반응형 테마를 사용 하세요.
  • Google 페이지 속도 설치 및 MemeCached 당신의 서버에. 이렇게 하면 웹 성능 모범 사례를 구현하기 위해 해당 웹 페이지의 리소스를 변경하여 웹 페이지 대기 시간과 대역폭 사용량이 향상됩니다.
  • 사용자가 사이트에 리뷰를 남길 수 있습니다 . 진정한 긍정적인 리뷰와 댓글은 사이트의 신뢰도를 높이는 큰 요인입니다. Getreviewed.org 는 귀하의 제품 및 서비스에 대한 정직한 통찰력을 공유하고자 하는 수백 명의 잠재적 블로거와 손을 잡을 수 있는 훌륭한 플랫폼입니다. Disquss 및 Facebook 댓글 플러그인은 빠르게 로드되며 댓글을 색인화할 수 있기 때문에 사용자가 사이트의 전체 콘텐츠 품질을 최적화하는 진정한 리뷰와 댓글을 추가할 수 있습니다. 따라서 속도 저하 없이 사이트에 가치 있는 콘텐츠를 추가할 수 있습니다.
  • 브라우저 캐싱 사용 및 HTML5 웹 저장소 API 구현 .

4- 반응형 디자인 활용

Google의 모바일 SEO 가이드에 따르면 반응형 디자인은 Google에서 권장하는 디자인 패턴입니다. Google은 또한 모바일 검색에서 모바일에 최적화된 사이트의 순위를 더 높게 지정한다고 밝혔습니다. 또한 반응형 디자인은 다음과 같은 주요 이점을 제공합니다.

  • 링크가 단일 도메인으로 연결되어 검색 엔진 순위가 향상됩니다.
  • Google에서 순위를 낮추기 위해 자주 사용하는 높은 이탈률을 제어합니다.
  • 사용자 경험 측면의 개선 사항은 특히 봇뿐만 아니라 실제 청중에게 플러스입니다.

반응형 디자인

반응형 사이트 속도를 높이는 방법

반응형 사이트의 속도를 높이려면 다음 전략을 사용하십시오.

  • 소셜 위젯, 이미지, 지도 등 모든 종류의 콘텐츠가 로드되지 않도록 하는 데 사용되는 조건부 로드 를 사용하고 특정 조건과 일치하는 콘텐츠만 로드합니다.
  • 부트스트랩 과 같은 프레임워크 사용 및 재단 빠른 모바일 기능과 속도를 제공합니다.
  • 사용 가능한 화면 크기에 따라 자동으로 크기가 조정되는 적응형 이미지 를 사용합니다. 이렇게 하면 전체 이미지 파일을 로드할 필요가 줄어듭니다. 대신 마크업을 변경하지 않고 축소 및 포함된 HTML 이미지를 로드할 수 있습니다.
  • m-dot 리디렉션을 줄이고 웹 페이지에 단일 URL을 선호합니다.
  • FitText 와 같은 플러그인 사용 이는 글꼴 크기를 유연하게 만들어 부모 요소에서 제공하는 너비에 맞도록 합니다.

5- 더 나은 크롤링을 위해 Sitemap 및 GWT 사용

사이트 순위는 종종 지속적으로 작동하고 사이트를 크롤링하고 검색 엔진 최적화 요소를 기반으로 콘텐츠 순위를 지정하고 분석하는 작은 봇에 따라 달라집니다. 다음 단계는 크롤러가 사이트를 효과적으로 크롤링하고 다운타임을 최소화하도록 허용하여 웹사이트 속도를 높이는 데 도움이 될 수 있습니다.

  • 사이트맵을 만들고 콘텐츠가 중복되지 않도록 하십시오. 사이트맵은 동영상, 이미지, 모바일 콘텐츠를 포함하여 페이지의 특정 콘텐츠 유형에 대한 메타데이터를 Google에 제공하므로 매우 유용합니다. 예를 들어 사이트맵 동영상 항목은 동영상 실행 시간, 카테고리 및 연령 적합성 등급을 지정할 수 있는 반면 사이트맵 이미지 항목에는 이미지 주제, 유형 및 라이선스가 포함될 수 있습니다.
  • Google WebMasters 도구를 통해 Google 크롤링 속도를 최적화합니다. 자세한 내용은 크롤링 속도를 변경하는 방법에 대한 Google 가이드를 참조하세요. .
  • Google 봇이 새로운 콘텐츠에 매료되어 있으므로 콘텐츠를 계속 업데이트하세요.
  • 신뢰할 수 있는 서버를 사용하고 필요할 때마다 항상 HTTPS 보안 사이트를 제공하십시오.

6- 클릭 이벤트 대신 Ajax 및 터치 이벤트 사용

모바일 사용자는 리소스를 클릭한 다음 다른 리소스가 로드되기를 기다리는 것을 싫어합니다. 대신, 더 쉬운 솔루션은 터치 표면의 다른 위치에서 동시 터치를 지원하는 TouchEvents를 사용하는 것입니다. 버튼에 적용될 때 이러한 터치 이벤트는 로드 시간을 크게 줄이고 사용자 경험을 향상시킬 수 있습니다.

아래 그림은 사용자가 모바일 장치와 상호 작용하는 동안 생성할 수 있는 일련의 터치 이벤트를 제공합니다.

touch_events

또한 AJAX를 사용하면 코드가 실행되는 페이지를 새로 고치지 않고도 웹 서버에서 데이터를 가져올 수 있으므로 사용하는 것이 좋습니다.

7- 클라이언트 측 처리 최적화

모바일 장치의 경우 CPU 속도가 느리고 메모리가 적기 때문에 클라이언트 측 처리가 크게 줄어듭니다. 페이지 처리의 효율성을 높이기 위해 이미지, 스크립트와 같은 스크롤 없이 볼 수 있는 콘텐츠의 로딩을 연기하는 것이 좋습니다. 이 스크립트를 다운로드하고 구문 분석하는 것은 onload 이벤트 가 끝날 때까지 안전하게 연기할 수 있습니다. 일부 스크립트는 사용자가 끌어서 놓기와 같은 작업을 시작한 후에만 호출해야 하므로 사용자가 작업을 수행할 준비가 되도록 화면에 도달하지 않는 한 이러한 스크립트를 로드해서는 안 됩니다.

이러한 지침과 웹사이트 인프라의 변화를 통해 웹사이트 속도를 높이고 더 높은 순위를 달성할 수 있습니다. 웹사이트의 로딩 시간을 크게 줄이는 데 도움이 된 다른 기술을 구현한 적이 있습니까? 아래 의견에 알려주십시오.

엄선된 관련 기사:

  • 웹사이트가 모바일 친화적인지 테스트하는 5가지 도구
  • 웹 페이지 속도 향상: JavaScript 최적화
  • Q: 내 모바일 웹사이트에 어떤 URL을 사용해야 합니까? A: 반응형 디자인

* Eole에서 가져온 리드 이미지 . 일부 권리 보유 .