모바일 성능 | 사이트를 모바일 친화적으로 만드는 방법

모바일 성능이 중요한 이유는?

웹은 모바일로 전환되고 있습니다. Statista에 따르면 전 세계 웹 페이지 조회수의 51%가 모바일 장치에서 발생합니다. 아시아 및 아프리카와 같은 일부 지역에서는 그 비율이 훨씬 높습니다. 각각의 경우에 이 비율은 매년 꾸준히 증가하고 있습니다.

주요 검색 엔진에서는 이러한 추세를 알고 있으므로 모바일 로드 시간이 빠른 사이트의 우선순위를 매기고 있습니다. 모바일 사용자는 대역폭이 제한되어 있지만, 여전히 정보를 빠르게 찾고 싶어합니다. 모바일 사용자는 인내심이 떨어지는 경향이 있으며, 이는 느린 로딩 사이트의 경우 이탈률이 높다는 것을 의미합니다. ('이탈률'은 한 페이지만 본 후 사이트를 떠나는 웹 사이트 방문자의 비율입니다.)

Google 및 기타 사이트 속도 관련 당국에서는 모바일 사이트의 최장 로드 시간을 약 3초로 결정했습니다. 3초 후에는 사용자 유지율이 급격히 떨어집니다. 검색 엔진에서는 느리게 로드되는 사이트를 검색 결과에서 더 아래에 배치하여 '처벌'하며, 이는 특히 모바일 사용자를 위한 것입니다.

모바일 연결을 통한 3초의 로드 시간 제한은 그다지 관대하지 않지만, 모바일 로드 시간을 줄이기 위하여 검증된 전략이 있습니다.

모바일 성능 개선 방법

모바일 성능에 영향을 미치는 요소는 여러 가지이므로 여러 전략과 모범 사례를 통해 로드 시간을 개선할 수 있습니다.

파일 크기 및 파일 수 최소화

더 빠른 로드 시간을 보장하려면 모든 웹 사이트 파일을 가능한 한 작게 만들어야 합니다. 종종 요청되는 가장 큰 파일은 이미지 파일이며 이미지 최적화 도구를 사용하거나 SVG와 같은 경량 이미지 형식으로 변환하여 더 작게 만들 수 있습니다.

HTML, JavaScript, CSS 파일도 최소화를 통해 더 작게 만들 수 있습니다.코드 최소화는 코드에서 모든 공백과 주석을 제거하고 가능한 한 가장 간결한 방식으로 재구성하는 것을 의미합니다.이렇게 하면 파일 크기가 최소한으로 줄어듭니다.그러면 사람은 코드를 실제로 읽을 수 없지만, 웹 브라우저에서는 여전히 코드를 잘 실행할 수 있습니다.

파일 크기를 더 작게 하는 것 외에도 전체 파일 수를 최소한으로 유지해야 합니다. 웹 사이트를 로드하는 데 필요한 파일이 추가되면 요청 및 응답이 늘어나게 되며, 이러한 왕복 때문에 로드 시간이 늘어납니다. JavaScript 및 CSS 파일이 여러 개 있는 사이트에서는 모든 JavaScript 코드를 하나의 파일로 통합해야 하며 CSS에서도 동일한 작업을 수행해야 합니다. JavaScript 또는 CSS가 거의 필요하지 않은 페이지의 경우 인라인 스타일*을 사용하면 로드 시간을 크게 개선할 수 있습니다.

*일반적으로 웹 개발자는 HTML, JavaScript, CSS 코드를 서로 다른 파일로 작성합니다. 개발자는 '인라인 스타일'이라는 기술을 사용하여 HTML과 동일한 파일에 JavaScript 및 / 또는 CSS 코드를 작성할 수 있습니다.

에지에서 리소스 캐시

일반적으로 사용자가 웹 사이트를 방문하면 사용자의 장치가 웹 사이트 파일을 가져오기 위해 웹 서버와 통신해야 합니다. 웹 서버가 샌프란시스코에 있고 사용자가 버클리(10 마일 거리)에 있는 경우 매우 빠릅니다. 그러나 사용자가 도쿄(5,000 마일 거리)에 있다면 어떨까요? 이는 각 요청과 응답이 수천 마일을 이동해야 하므로 웹 사이트 로드에 상당한 지연이 추가됨을 의미합니다.

이 문제를 완화하는 일반적인 방법은 콘텐츠 전송 네트워크(CDN)를 사용하는 것입니다.글로벌 CDN은 네트워크 에지에서 콘텐츠를 캐시합니다.즉, CDN에는 전 세계 데이터 센터에 캐싱 서버가 있습니다.인터넷에 액세스할 수 있는 사람은 누구나 데이터 센터에서 너무 멀리 떨어져 있지 않습니다.이러한 데이터 센터 서버는 원본 웹 서버와 통신하여 웹 사이트 데이터를 캐시할 수 있으므로 CDN을 사용하는 웹 사이트를 방문하는 사용자는 로컬 데이터 센터에서 웹 사이트 파일을 가져올 수 있습니다.따라서 위치와 관계없이 사용자에게 빠른 요청-응답 시간이 보장됩니다.

캐시 API 호출

API 호출은 외부 리소스에서 데이터를 가져오기 위한 HTTP 요청입니다. 예를 들어 Rotten Tomatoes와 같은 영화 리뷰 사이트에서는 Fandango와 같은 예매 서비스에 대한 API 호출을 수행하여 Rotten Tomatoes를 검색하는 사용자가 지역 영화 상영 시간을 볼 수 있도록 할 수 있습니다. API 호출은 강력한 환경을 만들고 중복 작업을 줄이는 데 도움이 될 수 있지만, 새 HTTP 요청도 생성하므로 로드 시간이 느려질 수 있습니다.

이러한 추가 HTTP 요청을 최소화하기 위해 API 호출을 캐시할 수 있습니다. 위의 영화 상영 시간 예에서 Rotten Tomatoes는 하루에 한 번만 로스앤젤레스 영화 상영 시간을 가져오면 됩니다. 하루에 한 번 이 API 호출을 캐시하도록 사이트를 구성할 수 있습니다. 그러면 매일 10,000명의 로스앤젤레스 사용자가 Rotten Tomatoes를 방문할 경우 해당 사용자 중 첫 번째 사용자만 Fandango에 대한 API 호출을 기다려야 합니다.

표시되는 콘텐츠 우선순위 지정

웹 페이지를 로드할 때 사용자가 즉시 보는 것은 종종 빙산의 일각입니다. 페이지의 나머지 부분을 보려면 아래로 스크롤해야 합니다. 스크롤하기 전에 사용자 화면에 표시되는 콘텐츠를 '스크롤 없이 볼 수 있는 화면' 콘텐츠라고 합니다. 웹 개발자는 스크롤 없이 볼 수 있는 콘텐츠가 항상 먼저 로드되는 방식으로 코드를 작성해야 합니다. 이를 달성하기 위한 한 가지 기술은 지연 로드라고 하며, 이는 사용자가 페이지를 아래로 스크롤할 때 스크롤 없이 볼 수 있는 콘텐츠를 동적으로 로드하는 방식으로 작동합니다.

리디렉션 방지

여러 가지 이유로 일부 웹 사이트에서는 페이지를 로드할 때 리디렉션을 수행합니다. 예를 들어 301 리디렉션은 일반적으로 이름이 변경되거나 브랜드가 변경된 웹 사이트에서 사용됩니다. 리디렉션은 귀중한 로드 시간을 소모하므로 가능하면 이 방법을 피해야 합니다.

요약

모바일 브라우징이 웹을 장악함에 따라 고성능 모바일 사이트를 갖추는 것이 점점 더 중요해지고 있습니다. 빠른 모바일 사이트는 더 높은 참여와 향상된 전환율, SEO 속도 향상으로 보상을 받습니다. 웹 사이트 소유자는 이러한 이점을 얻기 위해 위에 설명된 전략의 일부 또는 전부를 구현해야 합니다.