WordPress 및 GTmetrix YSlow에서 더 적은 HTTP 요청을 만드는 방법

WordPress 사이트에서 더 적은 HTTP 요청이 필요합니다.?


즉, 사이트에로드되는 요소 (요청) 수를 줄여야합니다..

더 적은 HTTP 요청

CSS와 JavaScript 파일을 결합하면 도움이 될 수 있지만 특정 페이지에로드 할 필요가없는 플러그인을 선택적으로 비활성화하거나 전자 상거래 이외의 페이지에서 WooCommerce 스크립트 및 스타일을 비활성화하거나 높은 CPU를 피하는 등 HTTP 요청을 줄일 수있는 다른 최적화가 있습니다. 많은 수의 요청을 생성하고 사이트 속도를 늦추는 플러그인.

더 적은 HTTP 요청 GTmetrix, Pingdom 및 기타 속도 테스트 도구에서 권장됩니다. 아래 권장 사항은 요청을 줄이고 사이트를 더 빠르게 만드는 데 도움이됩니다..

1. CSS 스타일 시트 + JavaScript 결합

CSS 스타일 시트 + 자바 스크립트 결합 CSS 파일의 모든 내용을 하나의 단일 파일로 복사 / 붙여 넣기해야 함을 의미합니다. 이를 통해 브라우저는 여러 요청 대신 CSS 파일에 대한 단일 요청을 할 수 있습니다. 대부분의 캐시 플러그인에는 CSS + JavaScript 파일을 결합하는 옵션이 있습니다.

1 단계: 캐시 플러그인 설정에서 CSS + JavaScript를 결합하고 축소하는 옵션을 찾으십시오..

2 단계: GTmetrix에서 각 설정을 한 번에 하나씩 활성화하고 테스트 결과.

결합 CSS 파일 축소

결합 JavaScript 파일 축소

3 단계: 웹 사이트에서 보이는 오류를 확인하십시오. 오류가 표시되면 소스 코드를보고 문제가있는 파일을 찾은 다음 CSS 또는 JavaScript 축소 설정에서 제외하십시오. 예를 들어, 특정 설정을 활성화 할 때 슬라이더가 사라지면 소스 코드에서 슬라이더 파일을 확인하고 문제가있는 파일을 제외하십시오. 오류가 표시되지 않으면이 오류가 필요하지 않습니다.

또는 모양 아래 WordPress에서 CSS 파일을 수동으로 결합 할 수 있습니다 > 테마 에디터. 모든 파일의 내용을 하나의 단일 CSS 파일로 복사하여 붙여 넣기 만하면됩니다..

워드 프레스 CSS 파일

2. 선택적으로 플러그인 비활성화

많은 플러그인은 필요하지 않은 페이지에서도 전체 사이트에서 실행됩니다..

연락처 양식, 소셜 공유, 리치 스 니펫, 슬라이더 및 기타 플러그인은 특정 콘텐츠 유형에만로드하면됩니다. 다른 곳을 사용하여 비활성화 할 수 있습니다 자산 정리.

로드 할 필요가없는 페이지에서 플러그인을 비활성화하면 HTTP 요청이 줄어 듭니다. 플러그인에만 국한되지는 않습니다. 특정 페이지에서 스크립트 및 스타일을 비활성화 할 수도 있습니다 (예 : 전자 상거래 페이지에서 WooCommerce 스크립트, 스타일, 장바구니 조각을 비활성화 할 수 있음).

1 단계: 자산 정리 설치 또는 성능 (두 가지 모두 선택적으로 플러그인을 비활성화 할 수 있습니다).

2 단계: 페이지 또는 게시물을 편집하고 자산 정리 섹션으로 스크롤 한 다음 페이지에로드중인 CSS + JavaScript 파일을 검토하십시오. 플러그인, 테마 또는 외부 스크립트에서 제공 될 수 있습니다..

워드 프레스 외부 스크립트 비활성화

3 단계: 해당 페이지에서 필요하지 않은 모든 플러그인과 요청을 비활성화합니다. 전체 사이트에서 하나의 단일 페이지에서 게시물 유형별로 비활성화하거나 RegEx (정규 표현식)를 사용하여 특정 URL 패턴에서 비활성화 할 수 있습니다.. 정규식 Perfmatters 또는 Asset CleanUp Pro에만 포함.

3. WooCommerce 스크립트, 스타일, 장바구니 조각 비활성화

WooCommerce 사이트는 자연스럽게 더 많은 HTTP 요청을 생성합니다.

그들은 일반적으로 더 많은 플러그인을 필요로 할뿐만 아니라 추가 WooCommerce 스크립트를로드합니다, 스타일, 과 카트 조각. 이전 단계에서 플러그인을 선택적으로 비활성화 할 수있는 것처럼 전체 사이트에서 로딩되는 WooCommerce 요청을 선택적으로 비활성화 할 수도 있습니다..

Asset CleanUp 또는 Perfmatters를 사용하여로드 할 필요가없는 페이지에서이를 비활성화하십시오.

자산 정리 WooCommerce

또는 Perfmatters를 사용하면 한 번의 클릭으로 이러한 기능을 비활성화 할 수 있습니다.

퍼포머 스 우 커머스 최적화

4. 높은 CPU 플러그인을 피하십시오

높은 CPU 플러그인은 수많은 HTTP 요청을 생성 할 수 있습니다.

일반적으로 소셜 공유, 통계 (분석), 슬라이더, 포트폴리오, 페이지 빌더, 일정 관리, 채팅 및 연락처 양식 플러그인입니다. 기본적으로 외부 웹 사이트에서 외부 요청을 가져 오거나 진행중인 프로세스를 실행하거나로드하는 데 시간이 오래 걸리는 플러그인은 피하십시오.

1 단계: GTmetrix Waterfall 또는 쿼리 모니터.

저속 워드 프레스 플러그인

2 단계: 알려진 높은 CPU 플러그인을 피하십시오.

  1. 이거 추가 해봐
  2. 애드 센스 클릭 사기 모니터링
  3. 올인원 이벤트 캘린더
  4. 백업 버디
  5. 비버 빌더
  6. 더 나은 WordPress Google XML 사이트 맵
  7. 끊어진 링크 검사기 (Dr. Link Check 사용)
  8. WordPress에 대한 지속적인 연락
  9. 문의 양식 7
  10. 느린 플러그인 65 개 모두보기

3 단계: 느린 플러그인을 더 빠르고 가벼운 플러그인으로 교체하십시오. 연구 및 테스트가 필요합니다.

5. 플러그인을 코드로 교체

코드로 바꾸면 많은 플러그인을 피할 수 있습니다.

예 :

  • Google 글꼴 : 로컬에서 글꼴을 호스팅
  • Google 웹 로그 분석 추적 코드 : 수동 삽입
  • 목차 : HTML + CSS에서 수동으로 디자인
  • 임베디드 트윗 또는 Google지도 : 대신 스크린 샷 찍기
  • 내장 Facebook 위젯 : 실제 Facebook 위젯으로 교체

플러그인 통합 또한 도움이됩니다. 대표적인 예로는 호스팅 글꼴, 분석 및 Facebook Pixel, 지연 로딩 이미지 + 비디오, 데이터베이스 정리, 사전로드, 하트 비트 제어 및 Cloudflare 및 여러 CDN의 통합과 함께 제공되는 WP Rocket을 사용합니다. 다른 캐시 플러그인을 사용하면 (대부분 이러한 기능이 없기 때문에) WP 로켓에 내장 된 경우 속도 최적화를 위해 6-7 개의 추가 플러그인을 설치해야합니다..

6. 외부 스크립트 제거

외부 스크립트는 외부 웹 사이트에서 요청을 가져 오는 것입니다..

Google Fonts는 1 개의 파일로 결합 될 수 있습니다. 비디오가 느리게로드되고 iframe이 미리보기 이미지로 교체됩니다. 많은 스크립트를 최적화 할 수 있지만 다른 스크립트는 최적화 할 수 없습니다. 아래는 몇 가지 예입니다.

  • 구글 글꼴: WP Rocket, Autoptimize, OMGF, Self-Hosted Google Fonts 및 Asset CleanUp과 같은 플러그인을 사용하여 글꼴을 결합하고 로컬로 호스팅.
  • Google 웹 로그 분석: WP Rocket / CAOS Analytics에서 로컬로 호스트 추적 코드.
  • Google 애드 센스: 비동기 적으로로드하고 Cloudflare Rocket Loader를 사용해보십시오..
  • 구글지도: Google지도를보고 사람들이 이미지를 클릭 할 때 운전 경로로 연결되는 링크를 포함합니다 (지도와 비슷하게 보입니다)!
  • Google 태그 관리자: 일반적으로 여러 스크립트를 결합 할 때 좋은 것보다 더 해 롭습니다. 최적화되지 않은 대규모 사이트에만 사용해야합니다..
  • 임베디드 비디오: WP Rocket 또는 WP YouTube Lyte를 사용하여 비디오를 지연로드하고 iframe을 미리보기 이미지로 바꿉니다 (비디오는 매우 무거운 요소입니다).
  • 임베디드 위젯 + 게시물: 스크린 샷을 삽입하는 대신 찍습니다..
  • 페이스 북 픽셀: WP Rocket, Facebook Pixel에 브라우저 캐싱 추가 가능.
  • 그라바타: Gravatars를 비활성화하는 것 외에는 아무런 효과가 없었습니다 (WP 로켓은 블로그에서도 사용하지 않습니다). 그러나 Harrys, FV 또는 Optimum Gravatar Cache를 시도하거나 확장 가능한 주석을 끊거나 숨길 수 있습니다..
  • 소셜 공유 플러그인: Facebook, Twitter 및 소셜 네트워크에서 악의적으로 요청을 생성하여 카운트와 같이 새로 고침합니다. 같은 빠른 플러그인을 사용해보십시오 소셜 퍼그, 매쉬 쉐어, 소셜 스냅AddToAny, WP 소셜 쉐어링, 또는 쉬운 사회 공유

7. 구글 글꼴을 결합

여러 요청 대신 하나의 요청을 생성하기 위해 Google Fonts를 결합 할 수 있습니다..

Google- 글꼴 -GTmetrix

다음 플러그인에는 Google Fonts 최적화 옵션이 있습니다.

  • WP 로켓
  • 자산 정리
  • 자동 최적화
  • OMGF

그러나 가장 좋은 방법은 Google Fonts를 로컬로 호스팅하는 것입니다. 여기에는 Google Fonts 웹 사이트에서 직접 글꼴을 다운로드하는 동시에 글꼴 수와 글꼴 두께가 최소가됩니다. 다음과 같은 도구를 사용하십시오. 트랜스 폰터 또는 글꼴을 웹 글꼴 파일로 변환하십시오. 그런 다음 새 웹 글꼴 파일을 wp-content / uploads 폴더에 업로드하고 CSS에 사용자 정의 글꼴을 추가 한 다음 글꼴이 작동하는지 테스트하십시오. 다시, 전체 튜토리얼을 보려면 해당 링크를 참조하십시오.

Transfonter-Google-Font-Conversion

7. HTML, CSS, JavaScript 축소

파일 축소는 일반적으로 캐시 플러그인에 의해 수행됩니다 (1 단계 참조).

그러나 때로는 웹 사이트가 손상 될 수 있습니다. 이 경우 각 설정을 하나씩 테스트하고 소스 코드에서 문제가있는 파일을 확인한 다음 캐시 플러그인을 사용하여 해당 파일을 축소에서 제외해야합니다. 눈에 보이는 오류가 표시되지 않으면이 작업을 수행 할 필요가 없습니다..

8. CSS 전달 최적화

이것은 수정해야합니다 렌더 차단 리소스 PageSpeed ​​Insights의 항목.

WP Rocket, Autoptimize 및 기타 유사한 플러그인에는 CSS 전달을 최적화하는 옵션이 있어야합니다. 설정으로 이동하여 활성화했는지 확인하면 문제가 해결됩니다..

CSS 전달 최적화

9. 결합 된 JavaScript 파일을 비동기 적으로 지연 /로드

비동기 JavaScript는 파일로드를 의미합니다 페이지 다운로드가 완료되었습니다.

이것은 WP Rocket 또는 비동기 자바 스크립트 그리고 수정해야합니다 렌더 차단 자바 스크립트 항목 제거. 비동기 자바 스크립트를 사용하면 ‘비동기’또는 ‘지연’속성을 추가 할 스크립트를 완벽하게 제어 할 수 있으며 WP Rocket은 클릭 한 번으로 자바 스크립트를 자동으로 연기합니다.

자바 스크립트 파일

10. 게으른로드 비디오

임베디드 비디오는 HTTP 요청을 생성하는 외부 리소스입니다.

로드하는 데 2 ​​초 이상 걸릴 수 있습니다! 완전히 제거 할 수는 없지만 비디오 로딩 지연 사용자가 아래로 스크롤 (lazy load)하고 재생 버튼 (light embed)을 클릭 할 때까지.

여기에는 몇 가지 옵션이 있습니다. WP Rocket을 사용하여 지연 로딩을 활성화하고 YouTube iframe을 미리보기 이미지로 교체 할 수 있습니다. 그러나 WP Rocket이 없다면 WP YouTube Lyte 플러그인 또는 이것을 따르십시오 간단한 YouTube 임베드에 대한 자습서. 둘 다 잘 작동합니다.

다음은 예입니다 (워드 프레스 속도에 대한 훌륭한 비디오).

11. CDN 추가

CDN을 사용하면 HTTP 요청을 줄일 수 있습니다.

원본 서버가 요청에 응답하도록하는 대신 CDN의 데이터 센터는 대역폭을 오프로드하고 원본 서버의로드를 줄입니다. Cloudflare는 무료이므로 걱정할 필요가 없습니다..

여러 CDN = 더 많은 데이터 센터 = 더 빠른 콘텐츠 제공 및 더 많은 리소스 오프로드. 많은 사람들이 Cloudflare로 시작하여 여러 CDN을 사용할 때 결국 StackPath를 조사합니다 (현재 두 가지를 모두 사용합니다). KeyCDN도 좋습니다. 이것을 CDN의 “체인”이라고합니다.

여러 CDN 설정
Cloudflare를 사용하면 도메인 등록자에서 변경하는 2 개의 이름이 지정됩니다. StackPath 및 KeyCDN과 같은 다른 CDN을 사용하면 캐시 플러그인의 CDN URL 필드에 붙여 넣거나 CDN Enabler를 사용하는 CDN URL을 할당합니다..

여러 CDN

12. 리디렉션 최소화

불필요한 리디렉션으로 인해 추가 HTTP 요청이 발생할 수 있음.

이 오류의 원인을 확인하려면 GTmetrix 보고서를 확인해야합니다. 사이트의 외부 스크립트 또는 플러그인에 의해 생성됩니까? 해당 스크립트를 최적화하거나 더 가벼운 플러그인을 찾으셨습니까? 도메인 버전을 비 WWW 또는 HTTPS로 변경했지만 새 버전을 반영하도록 사이트의 모든 링크 / 이미지를 업데이트하지 않았기 때문입니까?

리디렉션 오류 최소화

일반적인 원인

  • 나쁜 플러그인
  • 외부 스크립트
  • WWW 대 비 WWW로 변경되었지만 링크를 업데이트하지 않았습니다.
  • HTTPS와 비 HTTPS로 변경되었지만 링크를 업데이트하지 않았습니다.

13. 이미지 최적화

이미지로 인한 HTTP 요청을 줄이려면 이미지를 최적화하는 3 가지 기본 방법이 있습니다.

스케일 이미지 제공: 큰 이미지의 크기를 작게 조정합니다. GTmetrix는 너무 큰 이미지와 자르거나 크기를 조정해야하는 올바른 크기를 알려줍니다. 슬라이더, 전체 너비 블로그 이미지, 위젯 및 웹 사이트의 다른 영역의 크기를 측정하여 이미지 차원 치트 시트를 작성하십시오. 그런 다음 업로드하기 전에 이미지를 올바른 크기로 조정하십시오. 이렇게하면 크기 조정 이미지 오류가 발생하지 않아야합니다..

이미지 최적화 (무손실 압축): ShortPixel (권장), Smush 또는 Imagify와 같은 플러그인을 사용하여 이미지를 압축합니다. 이 플러그인은 무손실이라고 말하지만 품질이 약간 저하되는 경우가 있습니다. 그렇기 때문에 웹 사이트의 모든 이미지를 일괄 최적화하기 전에 이미지를 백업하고 몇 가지 이미지를 테스트하는 것이 가장 좋은 이유입니다..

이미지 치수 지정: 이미지의 HTML 또는 CSS에 너비 + 높이를 추가합니다. 이 작업은 Visual Editor에서 자동으로 수행되지만 사용자 정의 HTML, 일부 페이지 빌더 및 WordPress 사이트의 다른 영역은 아닙니다. GTmetrix는 이러한 오류가있는 이미지를 보여주고 정확한 치수를 제공합니다. 오류를 해결하려면 WordPress 대시 보드에서 이미지를 찾아 HTML 또는 CSS를 편집 한 다음 너비 + 높이를 추가해야합니다.

여전히 적은 수의 HTTP 요청이 필요함?

여전히 도움이 필요하면 의견을 남겨주세요. 그만큼 워드 프레스 페이스 북 그룹을 가속화 또한 도움이되거나 GTmetrix 보고서 이전 + 이후로 WordPress 속도 서비스를 위해 우리를 고용 할 수 있습니다.

워드 프레스 페이스 북 그룹을 가속화

자주 묻는 질문

&# x1f680; HTTP 요청의 원인?

HTTP 요청은 서버에 대한 요청을 작성하는 모든 것입니다 (예 : 단일 이미지가 1 개의 요청을 작성 함). GTmetrix의 워터 폴 탭은 페이지에로드하는 모든 요청을 알려줍니다.

&# x1f680; HTTP 요청을 줄일 수있는 5 가지 사항?

CSS + JavaScript 파일, 지연로드 이미지 및 비디오를 결합하고, 높은 CPU 플러그인 목록을 피하고, Perfmatters 또는 Asset CleanUp을 사용하여 특정 페이지 / 포스트에서 플러그인을 선택적으로 비활성화하고 글꼴을 최적화하는 5 가지 쉬운 작업.

&# x1f680; 캐시 플러그인이 HTTP 요청을 줄이는 데 도움이됩니까??

예, 올바른 캐시 플러그인은 파일을 최소화하고 결합하는 데 도움이 될뿐만 아니라 올바르게 구성된 HTTP 요청을 줄여야합니다. 거의 모든 캐시 플러그인에 대한 자습서가 있습니다..

&# x1f680; 다른 GTmetrix 항목을 수정하면 HTTP 요청이 줄어 듭니다.?

예, 많은 경우 특히 파일 축소 및 결합, 리디렉션 오류 제거 및 CDN 사용이 도움이 될 수 있습니다..

&# x1f680; HTTP 요청을 가장 줄이는 캐시 플러그인 및 구성 방법?

대부분의 Facebook 설문 조사에서 1 위를 차지하고 대부분의 캐시 플러그인보다 속도 최적화 기능이 더 많은 WP Rocket을 추천합니다. 이것이 GTmetrix에서 더 나은 점수와로드 시간을 생성하는 이유입니다. WP Rocket 설정 구성에 대한 튜토리얼을 확인하십시오..

읽어 주셔서 감사합니다 :)

건배,

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map