이 6 가지 기술을 적용하여 비즈니스 사이트의 모바일로드 속도 향상

• 2 명 중 1 명이 페이지가 2 초 이내에로드 될 것으로 기대합니다.
• 페이지가 모바일 장치에서로드하는 데 3 초 이상 걸리면 방문수의 53 %가 포기 될 가능성이 큽니다.
• 46 %의 사람들이 휴대 기기에서 웹을 탐색하면서 페이지로드를 기다리는 데 불만을 표시했습니다.

모바일 인터넷에서 사이트 속도를 저하시키는 세 가지 주요 요인은 서버 요청 수, 파일 크기 및 페이지로드 요소의 순차 순서입니다. 이제 우리는 원인을 강조했습니다. 해결책을 찾으십시오.

모바일 사이트 속도를 높이는 방법

측정 및 서버 응답 시간 최소화

모바일 페이지 속도는 코드에 의존 할뿐만 아니라 서버라는 중요한 기술 도구에 의존합니다.

브라우저 요청에 응답하기 위해 서버가 대기하는 시간이 길수록 장치의 페이지로드 속도가 느려집니다. Google의 대부분 전문가는 귀하의 서버가 1^성 더 최적의 결과를 얻기 위해 200 밀리 초 이내에 요청을 처리 할 수 ​​있습니다.

일반적으로 서버 응답 시간을 높이는 데는 다음 세 가지 주요 방법이 있습니다.

• 웹 서버 구성 또는 소프트웨어 향상.
• 적절한 메모리 및 CPU 리소스를 확보 할 수 있도록 호스팅 서비스의 범위와 품질을 향상시킵니다.
• 웹 페이지에 필요한 리소스의 수를 줄입니다.

CSS를 사용하여 이미지로드

모바일 사용자를위한 콘텐츠 이미지를 숨기려면 CSS를 통해 배경 이미지로로드하고 미디어 쿼리를 사용하여 조건부로 숨 깁니다.

이 기술의 변형은 아마존에서 장치 별 이미지를 조건부로로드하는 데 사용됩니다.

리디렉션 수를 최소화하여 모바일 페이지 속도 향상

리디렉션은 웹 페이지 방문자를 한 페이지에서 다른 페이지로 자동으로 안내 할 수있는 지침입니다.

각 리디렉션은 귀중한 밀리 초를 소모하여 페이지로드가 느려질 수 있습니다. 특히 데스크톱 사용자보다 신뢰할 수없는 네트워크에 의존하기 때문에 모바일 장치에서 특히 문제가됩니다.

이 문제를 해결하는 첫 번째 단계는 리디렉션 매퍼와 같은 도구를 사용하여 사이트의 리디렉션 수를 조사하는 것입니다. 숫자가 너무 큰 경우 최소화하거나 이상적인 결과를 얻으려면 숫자를 0으로 낮추십시오.

JS 및 CSS 파일 최소화

데이터가 많으면 페이지 초과 량이 많습니다. 이렇게하면 모바일 장치에로드하는 데 페이지가 오래 걸립니다.

그렇기 때문에 대부분의 웹 개발자는 페이지 로딩 속도를 높이기 위해 애셋을 최적화하고 최소화 할 필요성을 알고 있습니다.

"축소"는 페이지 표시에 영향을주지 않고 중복성을 제거합니다. 다양한 Google 도구를 사용하면 다음과 같은 중복을 방지 할 수 있습니다.

• CSSNano (CSS 용)
• UglifyJS (JS 용)

이미지 대신 CSS3 사용

그림자, 둥근 모서리 및 그라데이션 채우기 - 이미지 대신 CSS를 통해 이러한 모든 기능을 수행 할 수 있습니다.

이렇게하면 HTTP 요청 수를 줄이는 데 크게 도움이되어 한 번에 로딩 시간을 단축 할 수 있습니다.

JPEG 대신 인라인 SVG 사용

데이터 URI와 마찬가지로 SVG (scalable vector graphics)를 페이지에 임베드하여 HTTP 요청 수를 줄일 수 있습니다.

이러한 파일은 Inkscape, Adobe Illustrator 등과 같은 벡터 그래픽 편집기에서 만들 수 있습니다. 일단 만들어지면 텍스트 편집기에서 열어 코드에 넣을 수 있습니다.

참고: SVG를 스타일 시트에 포함 시키려면 먼저 데이터 URI로 변환 한 후 다음 단계로 진행해야합니다.

그래서 다소 차이가 있습니다. 당신은 좋은 영감을 얻었기를 바랍니다.

Shutterstock을 통한 사진