우리는 이전 게시물에서 모바일 페이지 속도와 모바일 우선 인덱싱을 추진하기 위한 Google의 노력에 대해 다뤘습니다. 많은 모바일 전자 상거래 사이트를 구축하고 조언하면서 저는 수백 가지의 최적화 전술을 발견했습니다. 이 게시물에서는 내 경험상 모바일 페이지 속도에 영향을 미치는 상위 XNUMX가지 문제를 공유합니다. 또한 평가하고 신속하게 수정할 수 있는 팁도 제공합니다.
5. 추적 태그
광고 서비스의 폭발적인 증가로 인해 사이트에서 수십 개의 픽셀을 설치하여 성능이 저하되었습니다. 많은 사이트가 정당하게 의존합니다. 구글 태그 관리자 그러나 해당 플랫폼 내에서 태그를 최적화하지 못했습니다. 결과적으로 Google Lighthouse는 종종 태그 관리자를 모바일 페이지 속도 문제로 표시합니다.
이를 해결하려면 태그를 실행해야 할 때를 평가하세요. 대부분의 사이트에서 태그는 즉시 실행되지 않아도 됩니다. 대신 페이지가 로드된 후 실행되도록 태그 관리자에서 트리거를 조정하세요.
4. WordPress 플러그인
전 세계 모든 웹사이트의 약 20%가 사용 워드프레스(WordPress). 이러한 사이트에는 다양한 기능을 관리하기 위한 XNUMX개 이상의 플러그인이 있습니다. 이러한 플러그인 중 일부는 속도에 최적화되어 있습니다.
모든 플러그인을 최적화하는 방법을 제안하는 것은 어렵습니다. 개발자와 협력하여 사이트 속도를 저하시키는 한두 가지를 식별하십시오. 일반적으로 양식 또는 페이지 공개 댓글을 지원하는 플러그인입니다. 성능을 저해하는 몇 가지 플러그인에 집중한 다음 로드해 보십시오. 시간 내에 페이지가 완전히 로드되고 "DOM 완료"라고 하는 프로세스입니다.
3. 자바 스크립트
JavaScript는 인터넷에서 유비쿼터스입니다. 종종 사이트의 다양한 상호 작용을 관리하며 일반적으로 하나의 큰 블록에 작성됩니다. 그러나 사용자가 페이지와 상호 작용하기 전에 페이지가 처음 로드될 때 큰 코드 블록을 다운로드하고 처리해야 하는 모바일 장치에 부담이 됩니다.
내 경험에 따르면 압도적으로 많은 웹사이트에서 사용자를 위해 페이지를 준비하는 데 다운로드된 JavaScript 코드의 5%만 필요합니다. 그러나 대부분의 모바일 사용자는 계속 진행하기 전에 전체 JavaScript가 처리될 때까지 10~XNUMX초를 기다려야 합니다.
가장 쉬운 수정은 JavaScript를 더 작은 청크로 나누는 것입니다. 개발자가 페이지를 처리하는 데 필요한 JavaScript 양만 모바일 브라우저에 피드하도록 합니다. 그런 다음 사용자가 페이지를 사용할 수 있게 된 후 나머지 JavaScript가 로드되도록 연기합니다.
2. 최적화되지 않은 이미지
크고 작은 회사는 가장 명백한 모바일 속도 문제인 대용량 이미지 파일에 대해 유죄입니다.
여기서 해결 방법은 간단합니다. 모든 이미지를 새로운 WebP 형식으로 변환합니다. 이전 형식 파일 크기의 절반으로 고품질 이미지를 렌더링합니다.
최소한 PNG 및 SVG 파일 유형을 JPEG로 대체하십시오. 아무 이유 없이 얼마나 많은 10MB JPEG 파일이 사용자의 부담을 주는지 알면 놀랄 것입니다. JPEG가 아닌 이미지 파일 디렉토리 전체를 스캔합니다. 그런 다음 교체하십시오. 유력한 범인은? 당신의 로고!
1. 캐싱되지 않은 구성 요소
대부분의 사이트 소유자는 콘텐츠 전송 네트워크의 캐싱이 페이지 속도를 높일 것이라고 당연히 믿습니다. 따라서 그들은 호스팅 서버에서 "캐시" 스위치를 켜거나 타사 CDN에 비용을 지불합니다. 그러나 사이트의 많은 구성 요소가 캐시되지 않은 상태로 남아 있을 가능성이 높습니다. 그 결과 페이지 속도가 거의 향상되지 않습니다.
사이트에서 캐시되지 않은 파일을 확인하려면 상당한 조사가 필요합니다. 나는 사이트를 검사하고 모든 URL에 대한 모든 파일의 다운로드 속도를 평가하는 Pingdom의 무료 도구를 선호합니다. 핑덤 느린 파일뿐만 아니라 다운로드에서 가장 많은 시간이 소요된 부분도 시각적으로 전달합니다.
파일 다운로드에는 (i) 서버 호출, (ii) 보안 응답 개발, (iii) 응답 대기 및 (iv) 파일 수신의 네 가지 구성 요소가 있습니다. 대부분의 웹마스터는 파일을 수신하는 네 번째 항목이 다운로드 속도 저하의 원인이라고 생각합니다. 그러나 내 경험상 다른 세 개는 가장 느린 구성 요소인 경우가 많으며 일반적으로 파일을 다운로드하는 사람과 지리적으로 가까운 서버에 파일이 캐시되지 않기 때문입니다.
Walmart.com의 홈페이지가 좋은 예입니다. 기본 HTM 파일 중 하나를 모바일 장치에 다운로드하는 것은 7.6밀리초로 매우 빠릅니다. 그러나 Walmart 서버에서 내가 파일을 요청했음을 인정하는 데 21배의 시간이 걸렸습니다.
Walmart.com에서 모바일 장치로 기본 HTM 파일을 다운로드하는 속도는 7.6밀리초로 매우 빠릅니다. 그러나 월마트 서버가 요청을 승인할 때까지 기다리는 데는 21배의 시간이 걸렸습니다. 확대하려면 이미지를 클릭하세요. 출처: 핑덤.
조금 더 자세히 살펴보면 파일이 실제로 캐시되었음을 알 수 있습니다. 그러나 쿠키가 파일을 저장하지 않도록 잘못 설정되었습니다. "no-store"로 설정된 'cache-control'에 대해서는 아래 행을 참조하십시오.
Walmart(전 고용주)에게 이 문제를 재빨리 지적했을 때 직원은 오류를 깨닫고 부적절하게 설정된 많은 파일에 대해 즉시 캐싱을 켰습니다. CDN 설정 내에서 또는 도메인 호스트에 연락하여 동일한 변경을 수행할 수 있습니다. WordPress에서 플러그인은 캐시를 빠르게 설정할 수 있습니다.
출처: https://www.practicalecommerce.com/top-5-mobile-page-speed-fixes
