웹 성능 및 속도: 최고의 기술
게시 됨: 2021-08-30로딩 속도와 웹 성능은 SEO 및 webperf 커뮤니티, 더 광범위하게는 전자 마케팅 및 전자 상거래에서 모든 사람의 입술에 있습니다.
웹 성능의 컨설턴트이자 참고 자료인 Andy Davies는 다음과 같이 상기시킵니다.
“상황은 경험에 영향을 미치고,
경험이 행동에 영향을 미치고,
행동은 비즈니스 수익에 영향을 미칩니다.”
따라서 수익, SEO 또는 둘 다를 늘리려고 하든 간에 빠른 페이지가 사용자 경험의 품질에 필수적이라는 것을 알아야 합니다. 속도는 또한 페이지 경험 업데이트 이후 속도를 고려한 Google에 올바른 신호를 보내는 데 도움이 됩니다.
아시다시피 사이트는 검색 엔진의 기대치를 충족시키기 전에 사용자의 기대치를 충족해야 합니다. 따라서 디스플레이 속도와 상호 작용은 주로 참여 및 전환을 촉진하기 위한 양질의 사용자 경험을 위한 전제 조건의 일부입니다! 예를 들어, Google 연구에 따르면 인터넷 사용자의 77%는 구매를 빠르게 완료할 수 있는 사이트나 애플리케이션에서 주문하는 경향이 더 많습니다.
그러나 방문자에게 부드러운 브라우징 경험과 진정한 속도감을 제공하기 위해 방문자에게 가장 가시적인 영향을 미치는 기술은 무엇입니까?
다음은 더 나은 디스플레이 속도와 상호 작용을 위해 최적화 레버로 구성된 체크리스트입니다.
사이트의 표시 속도 최적화
페이지가 가벼울수록 표시해야 하는 시간이 줄어듭니다.
리소스 최적화 외에도 페이지를 구성하는 다양한 요소의 표시 비율과 크기를 설정하여 속도와 사용성을 향상시킬 수 있습니다. 다음은 몇 가지 필수 기술입니다.
- 가장 효율적인 형식으로 이미지 압축
차세대 WebP(Google 권장) 및 AVIF(더 나은 결과 제공) 형식을 사용하면 최적의 시각적 품질을 유지하면서 JPEG에 비해 이미지 무게를 최대 50%까지 줄일 수 있습니다. 이미지의 무게가 페이지 무게의 약 50%를 차지한다는 것을 알기 때문에 페이지를 빠르게 만드는 데 필수적인 지렛대입니다. - 다양한 화면에 미디어 및 이미지 표시 조정
사용자가 모바일에서 사이트를 방문하는지 컴퓨터에서 사이트를 방문하는지에 따라 미디어 및 이미지의 크기를 조정하고 정의합니다. - 페이지 리소스의 무게 줄이기
코드 최적화: HTML, JS 및 CSS 파일의 축소(불필요한 문자 제거), 리소스 압축(Gzip 및 Brotli 형식), 경우에 따라 연결은 모두 페이지의 무게를 줄이고 속도를 높이는 좋은 방법입니다. 브라우저의 디스플레이. - 지연 로딩
이 기술은 전체 페이지를 로드하는 대신 화면에 보이는 것만 로드하는 것으로 구성됩니다. 즉, 브라우저는 방문자가 화면에서 볼 필요가 있는 것과 관련하여 엄격하게 필요한 노력만 제공합니다. - 글꼴 최적화
글꼴 형식을 최적화할 수 있으며(예: 파일 크기를 30~50% 절약하는 WOFF2) 또한 글꼴이 브라우저에서 아직 로드되지 않은 경우에도 텍스트를 표시하도록 선택하여 렌더링 속도를 높일 수 있습니다. - 차단 리소스 제거 및 비동기식 로드
페이지 렌더링 차단 방지: 특히 CSS(중요 CSS), JS(비동기 및 지연) 및 글꼴(display:swap)의 경우 리소스를 비동기식으로 로드하는 것을 선호합니다.
물론 페이지 로딩 초기에 일부 리소스가 필수적이어서 선택의 여지가 없다면 이러한 리소스는 최대한 가벼워야 합니다. - 올바른 캐싱 전략 채택
사용자에게 가능한 한 빨리 페이지를 표시하려면 정적 요소를 캐시하십시오.
이렇게 하려면 미리 동적 콘텐츠와 정적 콘텐츠를 식별하고 정적 콘텐츠를 캐싱하는 규칙을 정의해야 합니다. 기간 및 캐시(브라우저, 원본 또는 CDN).
[사례 연구] Google의 봇 크롤링 관리
사례 연구 읽기상호 작용 개선: 즉각적으로 반응하는 페이지
요소가 브라우저에 표시되는 속도 외에도 상호 작용 기능은 사용자에게 완전한 만족을 제공하는 데 필수적입니다.
그렇지 않으면 분노에 찬 클릭, 페이지에서 미친 듯이 움직이는 마우스, 페이지가 작동하는지 확인하기 위한 임의의 스크롤과 같은 행동으로 변환되는 좌절감을 느끼게 됩니다.
최악의 경우 방문자가 이전 페이지로 돌아가거나 Google에서 새로운 검색을 하기 위해 사이트를 떠나거나 경쟁업체로 이동합니다.
부정적인 경험의 경우 인터넷 사용자의 43%가 다음 구매를 위해 경쟁업체 사이트로 이동합니다. 따라서 방문자를 유치할 뿐만 아니라 유지하는 수단도 제공해야 합니다.
대부분의 경우 나쁜 상호 작용의 원인은 타사 스크립트 및 Javascript입니다. 실제로 브라우저가 JavaScript를 검색, 구문 분석 및 실행하는 동안에는 사용자의 상호 작용에 응답할 수 없습니다.
여기에도 귀하의 코드와 제3자를 최적화하고 방문자가 최적의 경험을 즐길 수 있도록 하는 기술이 있습니다.
- 로딩을 지연시켜 제3자의 영향을 줄입니다.
우선 순위 콘텐츠 요소가 페이지에 표시된 후 스크립트 로드 및 실행을 시작할 수 있습니다. 그러나 주의하십시오. JavaScript 로드를 연기한다고 해서 성능 면에서 자유롭지 않다는 점을 명심하십시오!
사용자를 안심시키기 위해 주요 요소를 표시한 후 일부 기능(채팅, 위젯, 추적...)의 로드를 연기하는 문제일 수 있지만 브라우저가 코드를 처리하는 데 필요한 시간을 취소하지는 않습니다. 시간에만 이동합니다. - 자바스크립트 실행 시간 단축
브라우저 시간이 걸리는 작업(긴 작업)을 나누고 사용자 상호 작용에 대한 응답으로 짧은 처리를 선호하십시오(예: 스크롤과 같은 특정 이벤트를 적극적으로 수신하지 않고 브라우저가 특정 JavaScript 처리를 실행할 자유 시간). - 메인 스레드의 작업 줄이기
브라우저는 요청 수와 교환 크기를 줄임으로써 상호 작용에 더 빠르게 응답할 수 있습니다.
시간도 절약하세요: 사이트 최적화 기술 자동화
우리는 사용자 경험의 매우 중요한 두 가지 측면인 디스플레이 속도와 상호 작용을 다루었습니다. 좋은 소식은 이 체크리스트에서 방금 언급한 모든 최적화가 자동화될 수 있다는 것입니다!
또한 이러한 측면을 각각 평가할 수 있는 두 개의 Google Core Web VItal(가장 큰 콘텐츠가 포함된 페인트 및 첫 번째 입력 지연)에 연결했을 수 있습니다.
물론, 누적 레이아웃 이동 점수로 작업하여 최적의 사용자 경험을 위해 페이지의 시각적 안정성을 개선하는 방법도 생각해야 합니다.
이 3가지 측정항목(LCP, CLS 및 총 차단 시간 또는 TBT, FID에 해당)은 PageSpeed Insights에서 부여한 점수의 70%를 차지합니다.
따라서 논리적으로 페이지 속도를 높이고 이러한 측정항목을 최적화하기 위해 수행하는 모든 작업은 성능 점수뿐만 아니라 사용자에게도 긍정적인 영향을 미칩니다.
간단히 말해서, SEO에서와 동일한 접근 방식을 UX에 적용할 수 있습니다. 양질의 콘텐츠와 경험은 사용자 만족도를 보장하고 Google에서 더 나은 색인을 생성하는 데 기여합니다.
또한 SEO에서와 같이 webperf 최적화는 시간이 지남에 따라 유지되어야 합니다.
기술과 지표가 빠르게 발전하기 때문에 이를 위해서는 시간과 전문성이 필요합니다. 또한 대규모 팀에서도 기술 리소스가 사이트의 속도를 효과적으로 유지할 수 있는 시간이나 지식이 항상 있는 것은 아닙니다. 수플레처럼 떨어지는 특공대 작전을 위해 자원과 에너지를 배치하는 것은 매우 실망스럽고 낙담하기까지 합니다.
따라서 유지 관리에 시간을 낭비하고 사이트가 발전할 때마다 부작용을 두려워하며 과부하 위험을 감수하고 플러그인을 늘리는 것보다 단일 도구로 모든 프론트엔드 최적화 기술의 적용을 자동화하는 것이 좋습니다!
대부분의 경우 트래픽이 많은 전자 상거래 사이트의 경우 webperf 최적화 솔루션의 ROI는 측정하기 쉽습니다.
실제로 Google은 -0.1초의 로딩 시간이 프론트엔드 최적화 솔루션이 매우 쉽게 달성할 수 있는 +8%의 전환으로 이어질 수 있다고 추정했습니다.
Fasterize에서는 종종 1포인트 미만의 전환율 증가만으로도 SaaS 솔루션의 ROI를 보장하기에 충분하다는 것을 발견했습니다. 기술 팀이 절약한 시간은 말할 것도 없습니다.
장사는 전쟁의 근간이라 스스로 계산할 수 있고, 하기 쉽습니다! 이를 통해 성능 최적화 자동화에 대한 관심을 이해하고 내부 팀을 설득하고 참여시킬 수 있습니다.
모든 면에서 시간을 절약하세요!