엄청난 네트워크 페이로드를 피하는 방법(현명한 방법)

방금 Google PageSpeed ​​Insights 보고서를 실행했는데 진단 섹션에 다음 경고가 표시되었습니다.

처음에는 "거대한" 소리가 무섭게 들리지만 "거대한 네트워크 페이로드 방지" 메시지는 쉽게 고칠 수 있습니다.

이 가이드에서는 문제를 근절하고 경고가 다시 표시되지 않도록 하는 가장 효과적인 기술을 찾을 수 있습니다.

바로 다이빙하자!

네트워크 페이로드란 무엇입니까?

두 사람 사이의 대화와 마찬가지로 브라우저와 서버는 네트워크 요청 및 응답을 통해 통신합니다. 따라서네트워크 페이로드는 사용자가 웹사이트를 로드할 때 웹 브라우저와 서버가 교환하는 정보입니다.

보다 기술적인 의미에서 네트워크 페이로드는 HTML, CSS, 자바스크립트 파일, 이미지, 동영상 및 웹사이트를 구성하는 기타 콘텐츠와 같이 네트워크를 통해 전송되는 리소스의 총 크기를 나타냅니다 .

엄청난 네트워크 페이로드 방지 경고는 무엇을 의미합니까?

간단히 말해서 "거대한 네트워크 페이로드 방지"는 페이지 크기가 너무 크다는 것을 의미합니다. Google PSI 보고서에서 이 문제에 주목하는 이유는 권장되는 총 페이지 크기인 1.6MB(또는 1,600kB)를 초과했기 때문입니다.

기억하다!

이 경고의 경우 최적화 노력을 홈페이지에만 국한해서는 안 됩니다. 모든 페이지를 모니터링하고 가능할 때마다 크기를 줄여야 합니다.

최적의 페이지 크기는 얼마여야 합니까?

최적의 페이지 크기는 없지만 Google은 1.6MB의 상한선이 이론적으로 3G 연결에서 다운로드할 수 있는 최대 데이터 양이며 상호작용 시간을 10초 미만으로 유지한다는 것을 알아냈습니다.

Google PSI 테스트는 1.6메가비트 연결(상당히 느림)을 사용하므로 현실적으로 빠른 네트워크에 액세스할 수 있는 청중 사이에서 경쟁력을 갖추려면 1~1.5MB 사이를 목표로 해야 합니다.

이를 통해 Google Analytics, Facebook Pixel과 같은 인기 있는 타사 서비스와 사이트 속도에 나쁜 영향을 미치지 않고 상당한 양의 이미지를 전송할 수 있는 충분한 공간이 있습니다.

다음 중요한 비트로 이동합니다.

막대한 네트워크 페이로드가 유해한 이유는 무엇입니까?

네트워크를 통해 전송되는 대량의 데이터는 웹사이트 성능과 방문자에게 부정적인 영향을 미칩니다.

대규모 네트워크 페이로드는 다운로드하는 데 더 많은 시간이 필요하므로 다음과 같은 문제가 발생합니다.

• 로딩 시간
• 가장 큰 만족스러운 페인트 점수
• 전체 성능 점수 및 핵심 성능 보고서

한편, 느린 네트워크와 제한된 데이터 요금제를 사용하는 사용자와 모바일 사용자는 느리고 실망스러운 사용자 경험, 응답하지 않는 페이지, 심지어 웹 사이트에 대한 액세스 거부로 환영받습니다.말할 것도 없이, 네트워크 제공업체는 귀하의 웹사이트를 로드하려는 시도에 대해 추가 비용을 청구할 수 있습니다.

당연히 이는 귀하의 비즈니스가 더 높은 이탈률 및 이탈률, 사용자 참여 감소 및 나쁜 전환율을 경험하게 될 것임을 의미합니다.

궁극적으로 엄청난 네트워크 페이로드 방지 경고를 수정하지 않으면 온라인 비즈니스와 사용자에게실제 비용이발생합니다.

다행스럽게도 PageSpeed ​​Insights 보고서를 사용하면 보다 세분화된 보기가 가능하므로 문제 해결을 시작하기 전에 범인을 훨씬 빠르게 좁힐 수 있습니다.

막대한 네트워크 페이로드의 원인 식별

"거대한 네트워크 페이로드 방지" 경고를 확장하면 파일 유형 및 파일이 제공되는 위치에 따라 페이지 가중치에 대한 자세한 분석이 제공됩니다.

대규모 네트워크 페이로드의 가장 일반적인 원인은 다음과 같습니다.

1. 최적화되지 않은 CSS 및 JavaScript 파일(타사 JS 포함)
2. 큰 이미지 및 비디오
3. 플러그인 또는 타사 라이브러리의 과도한 사용
4. 최적화되지 않은 웹 글꼴

당연히 다음 단계는 웹 페이지 크기를 가장 효과적으로 줄이는 데 도움이 되는 기술과 최적화를 탐색하는 것입니다.

DIY 할 시간이 없습니까? NitroPack은 자동 조종 장치에서 PSI 경고를 제거하는 올인원 플러그인입니다. 지금 사용해 보세요 →

WordPress에서 엄청난 네트워크 페이로드를 피하는 방법

1. 경량 WordPress 테마 및 페이지 빌더 선택

처음부터 경량 설정을 사용하면 페이지 크기가 줄어듭니다. 일부 WordPress 테마 및 페이지 빌더(예: Divi 및 Elementor)에는 과도한 기능, 사용자 지정 옵션 및 사전 로드된 자산이 포함되어 있어 웹 사이트가 빠르게 부풀어 오르고 속도가 느려질 수 있습니다.

웹 사이트를 개발하기 전에 CSS, JavaScript 및 글꼴 테스트를 고려하십시오. 또한 어떤 WordPress 테마가 속도와 Core Web Vitals 성능에서 뛰어난 결과를 보여줬는지 확인하십시오.

이미 부풀려진 테마나 페이지 빌더를 사용하고 있다면 최적화하여 네트워크 페이로드를 줄이는 몇 가지 방법이 있습니다.

• CSS에서 머리글, 바닥글 및 사이드바를 코딩합니다(페이지 빌더에서 이 작업을 수행하지 않음).
• 추가 페이지 빌더 플러그인의 사용을 제한하고 사용하기 전에 CSS 및 JavaScript를 테스트하십시오.
• 지연 로드 배경 이미지(권장하는 기술로 바로 이동)
• 페이지 디자인 및 리소스를 단순화하기 위해 일부 기능을 분리하는 것을 고려하십시오.

2. 웹사이트를 부풀리는 워드프레스 플러그인을 조심하세요

WordPress는 플러그인을 통해 많은 양의 기능을 제공합니다.

그러나 너무 많은 플러그인, 특히 동적 콘텐츠를 생성하거나 외부 리소스를 로드하는 플러그인을 사용하면 네트워크 페이로드가 증가할 수 있습니다. 각 플러그인은 브라우저에서 로드할 추가 CSS, JavaScript 또는 기타 자산을 추가하여 페이로드가 더 커질 수 있습니다.

다음은 WordPress 플러그인이 페이지 크기를 늘리는 것을 방지하기 위해 수행할 수 있는 작업입니다.

• 활성 플러그인이 여전히 웹사이트 및 비즈니스 요구와 관련이 있는지 확인하십시오. 플러그인 컬렉션이 많을 경우 사이트 소유자는 종종 특정 순간에 유용하다고 간주된 것을 추적하지 못하고 사이트 개발 과정에서 플러그인을 다시 방문하는 것을 잊습니다.
• 플러그인 CSS 및 JavaScript 언로드: 일부 플러그인은 실제로는 특정 페이지 또는 요소에서만 실행하면 되지만 사이트 전체에 로드되는 경향이 있습니다. Asset CleanUp과 같은 도구를 사용하면 이를 제한하는 데 도움이 될 수 있습니다. 사용하지 않는 스크립트와 스타일을 언로드하면 CSS 및 JavaScript 파일의 크기를 줄이고 네트워크 페이로드를 줄일 수 있습니다.
• jQuery 종속성 파악: 일부 플러그인은 jQuery에 크게 의존하거나 비효율적으로 사용합니다. PSI 경고 분류에서 가장 큰 CSS/JS 파일 중 플러그인을 발견하면 개발자에게 스크립트 종속성을 최적화하도록 문의하십시오.

3. CSS 및 JavaScript 파일 축소

축소에는 CSS 및 JavaScript 파일에서 공백, 주석 및 줄 바꿈과 같은 불필요한 문자를 제거하는 작업이 포함됩니다. 이러한 불필요한 요소를 제거하면 페이지 크기에 즉각적인 영향을 미칩니다.

한 줄의 코드를 작성하지 않고 CSS 및 JavaScript를 축소합니다. NitroPack 시작하기 →

4. 타사 JavaScript 지연

제3자 범인을 식별했으면 더 중요한 리소스를 위해 메인 스레드의 공간을 확보하기 위해 뷰포트 아래에 로드하여 우선 순위를 낮출 차례입니다.

제3자 코드의 영향을 수동으로 줄이는 것은 일부에게는 너무 기술적으로 느껴질 수 있습니다. 귀하의 경우에는 기성 솔루션을 선택하는 것이 좋습니다. 전문 솔루션 또는 NitroPack과 같은 완벽한 성능 최적화 플러그인을 위해 Flying Scripts로 전환하십시오.

5. 이미지 최적화

고해상도 이미지와 동영상을 최적화하지 않고 워드프레스에 직접 업로드하면 파일 크기가 커집니다.

그리고 웹 페이지에서 대용량 파일을 로드하면 어떻게 됩니까? 당신은 그것을 추측했다. 네트워크 페이로드 증가.

다음은 이미지를 최적화하는 몇 가지 방법입니다.

• 이미지 크기 조정: 이미지 편집 소프트웨어나 온라인 도구를 사용하여 수동으로 이미지 크기를 조정하는 것은 시간이 많이 소요될 수 있습니다. 장치 전체에서 이미지가 항상 올바른 크기인지 확인하려면 NitroPack의 적응형 이미지 크기 조정을 살펴보십시오.
• 이미지 압축: 이미지를 85%로 압축하면 시각적 품질에 큰 영향을 미치지 않으면서 파일 크기가 줄어듭니다. 이미지 압축 플러그인을 사용하여 미디어 라이브러리의 기존 이미지를 대량으로 최적화할 수 있습니다.
• WebP에서 이미지 변환: WebP와 같은 차세대 이미지 형식을 사용하면 이미지 파일 크기를 줄여 콘텐츠를 더 빠르게 로드하고 제공할 수 있습니다.
• 지연 로드 이미지: 이미지가 표시될 때까지 이미지 로드를 연기하도록 지연 로드를 구현합니다. 이 기술은 화면에 보이는 이미지만 로드하고 나머지는 사용자가 아래로 스크롤할 때 로드하여 초기 네트워크 페이로드를 줄입니다.

NitroPack을 사용하여 자동 조종 장치에서 모든 이미지를 최적화하십시오! 지연 로드, WebP, 적응형 이미지 크기 조정 등 →

6. 웹 글꼴 최적화

웹 글꼴은 리소스 최적화에서 종종 간과되지만 대규모 네트워크 페이로드를 유발하는 상위 자산 중 하나입니다.

웹 공간용으로 디자인된 글꼴을 사용했는지 확인하십시오. .woff2 형식으로 인식할 수 있습니다. 또한 로컬에서 호스팅하면 외부 요청 수가 줄어듭니다.

기타 효과적인 글꼴 최적화 기술은 다음과 같습니다.

• 사용자 상호 작용에 필요할 때까지 글꼴 로드 지연
• 글꼴에서 사용 가능한 모든 글리프 대신 페이지에 실제로 표시되는 문자만 사용하여 글꼴 하위 설정
  

네트워크 페이로드를 줄이기 위한 기타 기술

CDN 사용

CDN(Content Delivery Network)은 전 세계적으로 분산된 서버 네트워크입니다. CDN을 사용하면 이미지, CSS, JavaScript 파일 및 기타 미디어와 같은 웹 사이트의 정적 자산 사본을 다른 지역의 서버에 저장할 수 있습니다.

방문자가 웹 사이트에 액세스하면 CDN은 해당 위치에서 가장 가까운 서버에서 이러한 자산을 제공하여 데이터 이동 거리를 줄이고 네트워크 대기 시간을 최소화합니다.

그 결과 콘텐츠 전송 속도가 빨라지고 네트워크 페이로드가 줄어듭니다. 또한 CDN은 트래픽 급증을 처리하고 여러 서버에 로드를 분산하여 웹 사이트의 전반적인 성능과 안정성을 향상시킬 수 있습니다.

고품질 Cloudflare CDN의 모든 특전을 얻고 NitroPack으로 완벽한 성능 최적화 →

GZIP 및 Brotli를 사용하여 자산 압축

CDN 사용의 논리적 확장으로 GZIP 및 Brotli와 같은 압축 기술을 활용해야 합니다. HTML, CSS, JavaScript 및 기타 파일을 포함하여 웹 사이트 자산의 크기를 크게 줄일 수 있습니다.

• GZIP은 웹 서버에서 사용할 수 있는 널리 지원되는 압축 방법입니다. 네트워크를 통해 전송되기 전에 자산을 압축하여 네트워크 페이로드를 줄이고 로딩 시간을 개선합니다.
• Brotli 는 더 나은 압축률을 제공하는 최신 압축 알고리즘입니다.

실제로 Brotli는 일반적으로 압축률이 더 높은 GZIP보다 더 유연합니다. 실제로 Squash Benchmarks 테스트는 Brotli가 모든 압축 수준에서 더 나은 압축률(더 작은 압축 파일을 생성함)을 제공한다는 결론을 내립니다.

캐싱 적용

캐싱은 후속 액세스 시간을 개선하기 위해 자주 액세스하는 데이터 또는 자산을 임시 저장소에 저장하는 기술입니다.

캐싱 메커니즘을 구현하면 서버에 대한 요청 수를 줄여 네트워크 페이로드를 최소화할 수 있습니다.

활용할 수 있는 다양한 유형의 캐싱이 있습니다.

• 브라우저 캐싱: 웹 서버에서 캐싱 헤더를 구성하면 방문자의 브라우저가 정적 자산을 로컬에 저장하도록 지시합니다.
• 서버 측 캐싱: 개체 캐싱, 페이지 캐싱 또는 데이터베이스 쿼리 캐싱과 같은 서버 측 캐싱 기술을 구현하면 동적 웹 사이트의 성능을 크게 향상시킬 수 있습니다.

NitroPack으로 자동으로 엄청난 네트워크 페이로드 방지 수정

대규모 네트워크 페이로드를 줄이기 위한 #1 테이크아웃은 웹사이트를 최대한 간결하게 유지하는 것입니다.

NitroPack을 사용하면 다음을 포함하여 35개 이상의 자동화된 최적화를 얻을 수 있습니다.

• 고급 캐싱 메커니즘
• Cloudflare의 내장 CDN
• HTML, CSS 및 JavaScript 축소
• 완전한 이미지 최적화 스택(지연 로드, 적응형 이미지 크기 조정, WebP 등)
• 글꼴 하위 설정

다른 성능 최적화 플러그인과 달리 NitroPack은 클라우드에서 작동하여 웹 사이트 팽창을 제거하고 별도의 최적화 플러그인의 필요성을 줄입니다.

웹 사이트에서 데모 테스트를 실행하여 NitroPack이 실제로 작동하는지 확인하십시오.

90점 이상의 Lighthouse 성능 점수로 180,000명의 사이트 소유자와 함께하세요! 3분만에 NitroPack 설정 →

향후 막대한 네트워크 페이로드를 방지하기 위한 모범 사례

이 경고가 실적 보고서를 다시 무시하지 않도록 하려면 다음을 수행해야 합니다.

• 정기적으로 웹사이트 자산을 감사하고 최적화합니다(적어도 28일에 한 번).
• 웹 개발 프로세스에서 성능 우선 순위 지정(예, 이는 디자인도 의미함)
• 다양한 장치 및 네트워크에서 웹 사이트 성능 테스트(GTmetrix로 시뮬레이션)
• 웹 성능 동향 및 기술에 대한 최신 정보 유지