단 1초만 지연해도 고객 만족도는 16% 감소할 수 있으며, 로드하는 데 4초 이상이 걸리면 방문자 4명 중 1명은 사이트를 떠나게 됩니다. 강력한 Google이 사이트 속도가 모바일 사이트의 순위 요소라고 말하는 것은 말할 것도 없습니다.
따라서 사이트가 빠르지 않으면 청중과 Google 모두 잘못된 방향으로 생각할 것입니다. 가시성과 교통량을 잃게 됩니다. 그렇다면 귀하의 사이트는 얼마나 빠른가요?
로드하는 데 1~2초 이상 걸리면 지금 당장 트래픽이 손실되고 있는 것입니다.
사이트가 느리더라도 괜찮습니다. 속도를 높이고 한 명의 방문자가 손가락 사이에서 빠져나가는 것을 방지하기 위해 따를 수 있는 단계가 있습니다.
1. 모바일 사이트 디자인을 완성하세요
웹사이트를 개발할 때를 떠올려보세요. 모바일 장치를 염두에 두셨나요? 아직 그렇지 않다면 지금이 바로 모바일 우선 사고방식으로 디자인을 다시 생각해 볼 때입니다.
최근 몇 년 동안 모바일 사이트가 많이 바뀌었습니다. 이전에는 사이트에 모바일용과 데스크톱용의 두 가지 버전이 있었습니다. 이런 상황에서 모바일 사이트와 데스크톱 사이트는 별도로 운영되는 전혀 다른 두 동물입니다.
이것은 사실이 아닙니다. 이제 대부분의 사이트는 반응형 디자인을 사용합니다. 반응형 디자인을 사용하면 액세스 방법에 따라 동적으로 변경되는 사이트를 가질 수 있습니다.
따라서 모바일 및 데스크톱 장치 사용자에게는 동일한 사이트가 표시되지만 각 장치마다 다르게 표시됩니다. 이것이 실제로 Google이 선호하는 것입니다.
반응형 디자인은 일반적으로 모바일 전용 사이트보다 빠르게 로드되므로 엄청난 SEO 이점을 얻을 수 있습니다.
반응형 디자인을 사용하면 소셜 활동의 형태로 사이트가 더 많은 관심을 받게 되며, 이는 SEO도 향상시킵니다.
사이트를 반응형으로 만드는 것은 단기적으로나 장기적으로나 좋습니다. 아직 반응형 사이트가 없다면 최대한 빨리 찾아보는 것이 좋습니다.
2. 사이트를 밝게 유지하세요
가능한 가장 훌륭하고 가장 만족스러운 디자인을 만드는 데 몰두하는 것은 너무나 쉽습니다.
때로는 너무 갇혀서 결과적으로 점점 더 많은 것을 추가하기 때문에 사이트가 점점 느려지는 경우가 있습니다. 이는 개발자가 비대해진 코드라고 부르는 조건입니다.
코드 팽창은 사이트에 너무 많은 코드가 과부하되면 발생합니다. 대부분의 경우 디자이너가 사이트의 시각적 표현에 너무 집중하면 코드가 부풀어 오른다.
오해하지 마십시오. 사이트의 외관은 매우 중요합니다. 하지만 성능이 외모에 뒤처질 수는 없습니다.
3. 단순하게 유지하라
주위를 둘러보세요. 과거의 복잡한 디자인은 미래의 미니멀리스트 디자인으로 대체되었습니다. 이는 웹사이트에도 적용됩니다. 특히 모바일 사이트.
모바일 화면에서는 사이트가 너무 쉽게 채워질 수 있으므로 모든 것을 열어두고 질서있게 유지하는 것이 중요합니다.
4. 단계 제거
사용자가 많은 작업을 수행할 필요가 없으면 더 좋습니다. 생각해 보세요. 고객과 판매 사이에 3단계만 있을 수 있는데 왜 7단계가 있어야 합니까?
이는 판매 퍼널의 기간을 단축할 뿐만 아니라 고객 경험도 최적화합니다. 많은 전자상거래 사이트는 매출을 늘리기 위해 이 전략을 사용합니다 홈페이지제작.
5. 더 적은 수의 이미지를 사용하세요
본 내용에 들어가기 전에 좋은 이미지는 모든 사이트에서 확실히 중요하며 SEO 이점도 있다는 점을 말씀드리고 싶습니다. 그러나 좋은 것이 너무 많다는 것이 있습니다.
이 시나리오에서는 그래픽에 열광하는 동시에 사이트 속도도 느려질 수 있습니다.
6. 맞춤 글꼴을 사용하지 마세요
사용자 정의 글꼴이면 충분하지만 일부 글꼴에는 유지 관리가 많이 필요합니다. 일부 글꼴은 엄청난 양의 CSS를 사용하는 반면 다른 글꼴은 많은 JavaScript를 사용합니다.
어쨌든 많은 코드를 다루고 있습니다.
7.코드를 최소화하세요
축소는 코드를 단순화하는 데 매우 유용한 기술입니다. 기본적으로 코드를 축소하면 중복되고 불필요한 모든 항목이 제거됩니다. 사이트에서 필요한 코드만 사용하는지 확인하세요.
이는 귀하의 사이트를 밝게 만드는 데 큰 도움이 됩니다. 코드를 수동으로 축소할 수 있지만 코딩 경험이 없으면 다소 겁이 날 수 있습니다.
다행히도 코드를 즉시 축소하는 데 사용할 수 있는 몇 가지 무료 도구가 있습니다.
Minifycode.com은 HTML, CSS, JavaScript 등을 단순화할 수 있는 다양한 축소 도구를 제공합니다.
8.리디렉션 감소
SEO와 사용자 경험에 정말 도움이 될 수 있습니다. 그러나 코드와 마찬가지로 리디렉션의 용도는 제한되어 있습니다. 전체 장소에 걸쳐 리디렉션을 사용할 수 없으며 사이트가 잘 작동하기를 바랍니다.
이는 리디렉션이 본질적으로 사이트 속도를 저하시키기 때문입니다. 일반 모바일 링크를 클릭하면 서버는 해당 링크에 있는 문서를 제공합니다. 그러나 리디렉션은 해당 특정 링크에 문서가 없음을 의미합니다.
따라서 서버는 문서가 있는 페이지로 이동하여 문서를 검색해야 합니다.
이 프로세스는 웹페이지의 모든 파일에 대해 발생해야 합니다. 결과적으로 모든 사진, CSS 파일 및 JavaScript 파일이 리디렉션됩니다.
따라서 올바른 페이지가 로드되기까지 몇 초가 걸릴 수 있습니다. 그 무렵에는 사용자가 사라진 지 오래되었을 것입니다.
9. 먼저 접힌 부분 위에 로드하세요.
사용자는 분명히 다른 콘텐츠를 보기 전에 스크롤 없이 볼 수 있는 콘텐츠를 먼저 보게 됩니다. 그렇다면 왜 한 번에 전체 페이지를 로드해야 할까요?
처음에는 접힌 부분에만 콘텐츠를 로드하고 필요에 따라 나머지 콘텐츠를 로드하면 어떨까요? 이는 “지연 로딩”으로 알려진 개념이며 사이트 속도에 놀라운 효과를 줄 수 있습니다.
지연된 로드를 구현하면 사이트에서 필요한 작업만 수행하고 다른 작업은 수행하지 않도록 요청하게 됩니다.
10. 압축된 이미지를 사용하세요
웹사이트에 이미지가 너무 많으면 로드하는 데 시간이 오래 걸립니다. 작업 속도를 높이려면 압축된 이미지를 사용하고 모바일용으로 크기를 조정하세요. 웹사이트의 이미지 수를 줄일 수 있다면 더 좋을 것입니다.
웹사이트 로고나 이와 유사한 필수 그래픽을 제외하고는 이미지가 없는 것이 더 좋습니다.
11. 브라우저 캐싱 켜기
이제 모바일 브라우저는 페이지를 “기억”하고 나중에 사용할 수 있도록 스마트폰이나 태블릿에 데이터를 저장할 수 있습니다. 브라우저 캐시 저장을 활성화하면 모바일 장치에 페이지를 게시하는 속도가 더 빨라집니다.