WordPress 테마의 성능을 향상시키는 방법-Word누르다-php.cn

WordPress 테마의 성능 향상을위한 실용 가이드

코어 포인트 How to Improve the Performance of Your WordPress Theme

WordPress 테마 성능은 HTTP 요청 수, 다운로드 리소스 크기 및 페이지 효율의 영향을받습니다. 이러한 요소를 줄이면 성능이 크게 향상 될 수 있습니다. WordPress 성능을 신속하게 향상시키는 방법에는 다음이 포함됩니다. 호스트 컨설팅, GZIP 압축 활성화, WordPress 및 브라우저 캐싱 활성화, 사용되지 않은 플러그인 비활성화, 불필요한 리소스 제거 및 소셜 미디어 버튼 교체가 포함됩니다.

사진은 웹 사이트가 부풀어 오르는 주된 이유입니다. 불필요한 이미지를 제거하거나 교체하고, 올바른 형식을 사용하고, 큰 비트 맵 이미지 크기를 조정하고, 이미지 압축을 극대화하고, 게으른로드를 달성하면, 페이지 가중치를 크게 줄이고 성능을 향상시킬 수 있습니다.

더 철저한 솔루션에는 다음이 포함됩니다. 예정 프로세스 채택, 진보적 인 웹 애플리케이션 기술을 고려하고, 타사 코드를 피하고, 신중하게 WordPress 테마를 평가하고, 웹 사이트를 단순화하며, 처음부터 성능을 고려합니다.

이 기사는 Siteground와 공동으로 작성된 일련의 기사의 일부입니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다.
사용자 좌절 :

페이지보기는 11%감소했습니다 사용자 만족도는 16%감소합니다 전환율은 7%감소했습니다

모바일 터미널 :

모바일 액세스는 모든 네트워크 트래픽의 55%를 차지합니다. 장치 및 대역폭 기능이 모두 증가하고 있지만 속도는 페이지 중량의 성장률을 따라 잡지 않습니다. 사용자는 일반적으로 바이트별로 지불합니다. How to Improve the Performance of Your WordPress Theme 검색 엔진 순위 :

Google은 느린 로딩, 헤비급 웹 사이트를 처벌합니다.

호스트 비용 : 호스트와 같은 회사와 함께 일하는 것이 합리적이지만 헤비급 웹 사이트는 더 많은 리소스를 소비하고 간소화 된 대안보다 비용이 많이 듭니다. 유지 보수 : 웹 사이트가 더 많은 리소스가 필요할수록 유지 보수 비용이 높아집니다. 궁극적으로 느린 웹 사이트는 귀하와 사용자 비용이 비용이 듭니다. 다음에 상사가 불필요한 기능을 추가 해달라고 요청하면이 간단한 진실을 상기시켜주십시오!

이상적으로는 첫 번째 코드 줄을 작성하기 전에 성능을 고려해야합니다. 그러나 주제에 성능 문제가 있기 때문에이 기사를 읽고있을 수 있습니다. 다행히도 단점 없이이 문제에 대한 비용 효율적인 솔루션이 있습니다. 저축 된 모든 밀리 초에는 비용이 줄어들면서 사용자 만족도, 참여 및 수익을 증가시킵니다.

성능에 영향을 미치는 요인 성능은 다음과 같은 요인에 영향을받습니다

http 요청 수

다운로드 리소스 크기 페이지의 효율성

HTTP 요청 수는 페이지를 작동시키는 데 필요한 파일 수와 AJAX 호출에 따라 html, CSS, JavaScript, 이미지, 글꼴, 데이터 및 기타 모든 리소스에 따라 다릅니다. HTTP/2는이 문제를 해결하지만 서버와 사용자의 브라우저는 모두 지원을 활성화하도록 구성해야합니다. HTTP/2의 경우에도 20 개의 파일 요청은 여전히 10만큼 효과적이지 않습니다. 주요 요인은 각 파일의 크기입니다.

이를 설명하기 위해 2884KB는 ID 소프트웨어의 Doom의 원래 버전보다 20% 더 큽니다. 물론, 우리는 현대 웹 페이지를 25 년 전의 게임과 비교하고 있지만 대부분의 페이지는 몇 개의 단락만을 보여주고 Doom은 3D 엔진, 다중 레벨, 그래픽, 음악 및 음향 효과를 구현합니다. 비교적 가벼운 페이지조차도 비효율적 일 수 있습니다. 예를 들어, 3 페이지의 웹 사이트가 500KB JavaScript 프레임 워크에 의존하는 경우 첫 번째 문자를보기 전에 코드를 다운로드, 구문 분석 및 실행해야합니다. 총 리소스 크기가 500KB를 초과하더라도 서버 렌더링 된 HTML 파일이 완전히로드되기 전에 표시되기 시작합니다. 마지막으로 서버 속도, 압축 및 캐싱도 다른 중요한 고려 사항입니다.

성능 측정 성능 측정은 병목 현상을 식별하고 업데이트가 페이지를 향상 시켰는지 확인하는 데 중요합니다. 다음 도구는 요청 및 응답 시간의 분석을 제공하고 제안을 업데이트합니다.

pingdom Google Pagespeed Insights gtmetrix WebPagetest

브라우저의 개발자 도구 네트워크 탭은 또한 레이아웃에 대한 정보와 페이지가 사용자 이벤트에 응답 할 준비가되는 데 걸리는 시간을 제공합니다.

빠른 승리 다음 업데이트는 몇 분 이상 걸리지 않아야합니다.

변명이 없습니다!

웹 호스트에 문의하십시오 좋은 웹 호스트는 사용량을 분석하고 서비스, 하드웨어 및 소프트웨어 업그레이드에 대한 조언을 제공합니다. 이를 통해 최소한의 노력으로 비용 효율적인 성능 개선을 제공 할 수 있습니다. 당사의 파트너 SiteGroun SiteGround는 다양한 WordPress 요금제를 제공하며 SitePoint 사용자는 최대 65% 할인을 즐길 수 있습니다. gzip 압축 활성화 웹 사이트의 거의 30%가 GZIP 압축을 가능하게하지 않습니다. 일반적으로 웹 서버 설정 또는 WP HTTP 압축 및 W3 총 캐시와 같은 WordPress 플러그인에서 활성화 될 수 있습니다.

WordPress 캐시 활성화 </press></p> <word> 페이지를 렌더링하고 첫 번째 요청의 캐시에 저장하는 몇 가지 WordPress 플러그인이 있습니다. 후속 요청은 템플릿에서 데이터베이스 컨텐츠를 재생하는 대신 캐시 에서이 페이지를 가져옵니다. 캐시 플러그인에는 W3 Total Cache, WP Super Cache, Hyper Cache, WP Fast Cache 및 Cache Enaber가 포함됩니다. 호스팅 제공 업체가 캐싱을 활성화 할 수 있습니다. 당사의 파트너 SiteGround에는 웹 사이트 속도를 크게 높일 수있는 맞춤형 캐싱 도구가 있습니다. <ul><ows> 브라우저 캐싱 활성화 <c> 사용자가 브라우저를 통해 리소스를 캐시하는 경우 사용자는 리소스를 다시 다운로드 할 필요가 없습니다. 간단한 솔루션에는 적절한 만료 헤더 설정, 최후의 수정 날짜 또는 HTTP 헤더에서 ETAG를 복용하는 것이 포함됩니다. 다음 .htaccess 예제에는 한 달 동안 브라우저가 이미지를 캐시해야합니다. <h3> <used> 미사용 플러그인을 비활성화하십시오 <will> 대부분의 플러그인은 사용하지 않더라도 추가 CSS 또는 JavaScript와 같은 웹 사이트에 코드를 추가합니다. WordPress 관리자는 WordPress 제어판에서 플러그인을 비활성화하거나 플러그인을 사용하지 않을 경우 플러그인 코드를 완전히 제거 할 수 있습니다. </will></used> </h3> <n> 불필요한 자원을 삭제하십시오 <plate> 템플릿이 실제로 15 개의 글꼴이 필요합니까? 7 개의 분석 시스템을 추가 했습니까? 제 3 자 위젯이 필요합니까? 50 개의 광고 네트워크에서 광고를 표시해야합니까? 여러 자바 스크립트 라이브러리가 필요합니까? JavaScript 애니메이션을 CSS3 효과로 바꿀 수 있습니까? 정리하고 필요없는 것을 제거하십시오. <p> <button> 소셜 네트워크 버튼을 교체하십시오 <twitter>> 페이지에 Facebook, Twitter, Google 및 LinkedIn 버튼을 공유합니까? 무해한 것처럼 보이지만 페이지에 수백 KB의 타사 자바 스크립트를 추가 할 수 있습니다. 이것은 성능에 부정적인 영향을 줄 수있는 부풀어 오른 보안 위험입니다. 타사 코드는 불필요합니다. 몇 줄의 HTML을 사용하여 페이지에 치명적인 소셜 버튼을 추가 할 수 있습니다. 소량의 JavaScript는 Google 웹 로그 분석에서 팝업 사용 또는 이벤트 추적 로그 사용법을 사용하는 경험을 향상시킬 수 있습니다. </twitter></button></p> <com> JavaScript 및 CSS <j> 개발 중에 JavaScript 및 CSS 파일을 별도의 모듈로 용해하는 것은 가능합니다. 그러나 프로덕션 서버에서 개별 파일을 호스팅하기 전에 주석과 공간을 제거하기 위해 이러한 파일을 병합하고 압축해야합니다. <your> (WordPress Style.css 파일은 상단의 주제 세부 사항을 유지해야합니다. 그렇지 않으면 끊어집니다!) <pre class="brush:php;toolbar:false"><code><ifmodule mod_expires.c=""> ExpiresActive On <filesmatch> ExpiresDefault "access plus 1 month" </filesmatch></ifmodule></code>

로그인 후 복사

. 이미지 처리 이미지는 웹 사이트가 부풀어 오르는 가장 큰 이유입니다. 단일 500KB 고해상도 이미지를 삭제하면 무게와 다운로드 시간을 25% 이상 줄일 수 있습니다.

불필요한 이미지를 삭제하거나 교체하십시오 나는 영웅이 아름답고 브랜드 이미지에 적합 할 것이라고 확신하지만 고객을 잃게 되나요? 이미지의 전부 또는 일부는 CSS3 그라디언트, 경계, 필터 또는 기타 효과로 대체 할 수 있습니다.

올바른 이미지 형식을 사용하십시오 항상 적절한 이미지 형식을 사용하십시오. 일반적으로 말하기 :

벡터 로고 및 차트에 SVG를 사용하십시오 사진에 jpg를 사용하십시오 다른 모든 것에 png를 사용하십시오 그러나 애니메이션이있는 더 작고 제한된 색상 또는 이미지의 경우 GIF를 사용하는 것을 고려하십시오.

Webp와 같은 다른 형식이 있지만 브라우저 지원은 제한되어 있습니다. 확실하지 않은 경우 모든 적절한 옵션을 시도하고 가장 좋은 옵션을 선택하십시오. 그러나 참고 :

PNG는 256 및 24 비트 색상 범주로 제공됩니다. 256 컬러 버전은 일반적으로 작은 파일을 생성합니다.

PNG와 GIF는 둘 다 투명성을 제공합니다. 더 많은 바이트를 절약하기 위해 최대한 투명성을 끄십시오.

큰 비트 맵 이미지를 크기 르십시오 기본 카메라 나 전화로 촬영 한 이미지는 모든 장치에 표시되지 않기에는 너무 커서 너무 커서 너무 커서 모든 장치에 표시됩니다. WordPress는 크기 조정을위한 옵션을 제공하지만 최상의 결과를 얻으려면 편집자는 업로드하기 전에 자르고 크기를 조정해야합니다. 이미지 크기는 컨테이너의 최대 크기를 초과해서는 안됩니다. 고밀도/망막 디스플레이를 사용하는 사용자는 고해상도 이미지를 높이 평가할 수 있지만 IMG 태그 SRCSET 속성을 사용하여 대안을 제공 할 수 있습니다. 이미지 크기를 조정하면 페이지의 무게에 큰 영향을 줄 수 있습니다. 크기를 50% 줄이면 총 면적이 75% 감소하여 그에 따라 파일 크기가 향상됩니다.

이미지 압축 최대화 메타 데이터를 삭제하고 색 깊이를 줄이고 압축 계수를 조정하여 비트 맵 이미지의 크기를 크게 줄일 수 있습니다. WP Smush, EWWW 이미지 최적화기, Imagify, Kraken Image Optimizer, ShortPixel Image Optimizer 및 CW Image Optimizer와 같은 WordPress 플러그인은이 프로세스를 처리 할 수 있습니다. 최상의 결과를 얻으려면 업로드하기 전에 이미지를 처리해야합니다. 소프트웨어 옵션에는 Optipng, Pngout, JPEGTRAN 및 JPEGPTIM이 포함됩니다. Windows 사용자는 우수한 폭동을 사용해 볼 수 있습니다. 또는 TinypNG/TinyJPG와 같은 온라인 도구를 사용할 수 있습니다. SVG 이미지는 값을 더 적은 소수 자릿수로 반올림하여 압축하고 경로를 단순화하며 XML에서 불필요한 주석, 속성 및 공간을 제거하여 압축 할 수 있습니다. SVG 편집기에는 파일을 압축 할 수있는 옵션이 있거나 SVG 편집기 및 SVGO와 같은 도구를 사용할 수 있습니다. 스타일 지침을 CSS로 옮길 수도 있습니다.

게으른 하중을 구현

마지막으로, 게으른로드 기술은 이미지가 포함 된 상자가 뷰포트에서 볼 수있는 경우에만 다운로드되도록합니다. 게으른 하중을 구현하는 WordPress 플러그인에는 게으른 부하, jQuery 이미지 게으른 부하 WP, BJ 게으른 부하, 로켓 게으른 부하, 게으른 부하의 공개 및 게으른 부하가 포함됩니다. 기타 리소스 :

웹 사이트 성능을 향상시키기위한 5 개의 이미지 대기 시간로드 기술 자신의 진보적 인 이미지 로더를 구축하는 방법

더 철저한 솔루션 피험자가 여전히 과체중 인 경우 더 강렬한 다이어트 요법을 고려할 수 있습니다… 건설 과정 사용 빌드 프로세스는 이미지를 자동으로 최적화하고 CSS 및 JavaScript 파일을 병합하고 압축 할 수 있습니다. WordPress 테마에 대한 Gulp 빌드 프로세스를 채택하여 시간의 시간을 절약하고 페이지 성능을 향상 시키며 개발을 더 재미있게 만들 수 있습니다.

진보적 인 웹 애플리케이션 기술을 고려하십시오 Progressive Web Application 기술을 사용하면 웹 응용 프로그램이 기본 및 공통 리소스를 캐싱하여 오프라인으로 작동 할 수 있습니다. 이것은 종종 응용 프로그램에 사용되지만 웹 사이트를 진보적 인 웹 애플리케이션으로 변환하고 빠른로드 및 오프라인 작업의 이점을 누릴 수 있습니다.

타사 코드를 피하십시오 알 수없는 개발자에게 웹 사이트 코드에 액세스 할 수있는 무제한 권한을 부여 하시겠습니까? 습관? 그렇다면 소셜 미디어 공유 버튼 및 토론 포럼과 같은 타사 위젯을 신뢰하는 이유는 무엇입니까? 이러한 위젯은 보안을 거의 손상시키지 않지만, 어떤 숨겨진 리소스를로드하고 성능에 미치는 영향을 평가해야합니다.

워드 프레스 테마 를주의 깊게 평가하십시오 무료 및 상업용 워드 프레스 테마는 재정적으로 의미가 있습니다. 기성품 테마가 몇 달러에 대한 모든 요구를 충족 할 때 개발자를 고용하는 이유는 무엇입니까? 그러나 숨겨진 비용에주의하십시오. 개발 노력을 복구하기 전에 범용 템플릿은 수천 부서를 판매해야합니다. 구매자를 유치하기 위해 개발자는 필요하지 않을 수있는 많은 기능을 번들로 묶습니다. 하나 확인 : 테마가 좋아 보입니까? 확인 2 :

테마는 다양한 장치 및 네트워크에서 어떻게 수행됩니까? 참조 : 고급 WordPress 테마의 10 가지 기능.

웹 사이트를 단순화하십시오 한 가지 추세는 더 간단하고 간소화되며 고객 중심의 온라인 경험을 향해 나아가는 것입니다. 이것은 소리보다 어려울 수 있지만 모든 사용자에게 상상할 수있는 모든 기능을 제공하는 옛날은 끝났습니다. 상사/고객을 설득 할 수 있는지 여부는 또 다른 문제입니다!

개발 라이프 스타일을 바꾸십시오 2.8MB에 도달하는 웹 페이지에 대해 누가 책임을 져야합니까? 그것은 우리입니다. 웹 사이트가 부풀어 오르는 이유는 중요하지 않습니다. 개발자가이를 수행합니다. 빠른 개발 및 비용 절감은 여전히 중요하지만, 아무도 사용하고 싶지 않은 느리고 서투른 웹 사이트로 이어질 때 전체 프로세스가 헛된 것입니다. 고객/상사는 기술적 인 문제를 이해하지 못할 수도 있지만 결과를 설명해야합니다. 성능은 처음부터 고려됩니다. 콘텐츠, SEO, 유용성 및 접근성과 마찬가지로 성능을 무시해서는 안됩니다! 빠른 WordPress 테마를 만드는 것은 어렵지만 나중에 "추가"성능은 훨씬 어렵고 비용이 많이 듭니다.

<: :> 기타 제안 :

빠른 200Mbps 연결에서 개발할 때 대역폭을 잊기 쉽습니다. 신호가 불량한 영역에 연결을 제한하거나 웹 사이트를로드하십시오. 좌절감을 느끼면 사용자가 좌절감을 느낄 것입니다! 페이지 무게를 고려하고 주제에 추가 된 모든 리소스에 의문을 제기하십시오. 예를 들어, 20kb의 글꼴을 추가하는 경우 다른 곳에서 20kb를 절약해야합니다. 불완전한 성능 사이트는 전염병이되었지만, 그에 대해 우려하는 개발자는 거의 없다는 것은 분명합니다. 관심있는 사람들은 더 많은 방문객, 더 높은 전환율 및 더 높은 급여를받을 것입니다! WordPress 테마의 성능 향상에 대한 자주 묻는 질문

더 나은 성능을 위해 WordPress 테마를 최적화하는 방법은 무엇입니까?

더 나은 성능을 위해 WordPress 테마를 최적화하려면 여러 단계가 포함됩니다. 먼저 속도를 위해 설계된 가벼운 테마를 선택하십시오. 이러한 기능이 웹 사이트 속도를 늦추기 때문에 필요하지 않은 기능을로드하는 주제를 사용하지 마십시오. 둘째, 좋은 캐시 플러그인을 사용하십시오. 이렇게하면 웹 사이트 버전을 서버에 저장하고 방문자에게 제공하여 서버가 수행 해야하는 작업의 양을 줄입니다. 셋째, 이미지를 최적화하십시오. 대형 고해상도 이미지는 웹 사이트 속도를 늦출 수 있으므로 이미지 최적화 플러그인을 사용하여 품질을 잃지 않고 이미지 크기를 줄입니다.

~~내 WordPress 웹 사이트가 속도를 늦출 수있는 FAQ는 무엇입니까?~~

WordPress 웹 사이트가 속도가 느려질 수있는 몇 가지 일반적인 문제가 있습니다. 이러한 문제에는 느린 호스팅 제공 업체, CDN (Content Distribution Network) 사용 없음, 과도한 플러그인, 대형 이미지 및 캐시 플러그인 사용이 포함됩니다. 웹 사이트의 성능을 정기적으로 모니터링하고 발생하는 모든 문제를 해결하는 것이 중요합니다.

빠른 WordPress 테마를 선택하는 방법은 무엇입니까?

워드 프레스 테마를 선택할 때 가볍고 속도를 위해 설계된 것을 찾으십시오. 웹 사이트 속도를 늦추기 때문에 필요하지 않은 많은 기능이있는 테마를 사용하지 마십시오. 또한 주제에 대한 등급과 의견을 확인하여 다른 사용자가 속도에 문제가 발생했는지 확인하십시오.

CDN WordPress 웹 사이트의 성능을 향상시키는 방법은 무엇입니까?

CDN (Content Distribution Network)은 WordPress 웹 사이트의 성능을 크게 향상시킬 수 있습니다. 귀하의 웹 사이트 사본을 전 세계 서버에 저장하여 작동합니다. 사용자가 귀하의 웹 사이트를 방문하면 CDN은 서버에서 가장 가까운 서버에서 콘텐츠를 제공하여 콘텐츠로드하는 데 걸리는 시간을 줄입니다.

WordPress 웹 사이트에서 이미지를 최적화하는 방법은 무엇입니까?

이미지 최적화 플러그인을 사용하여 WordPress 웹 사이트에서 이미지를 최적화 할 수 있습니다. 이 플러그인은 품질을 잃지 않고 이미지의 크기를 줄이며 웹 사이트의 로딩 시간을 크게 향상시킬 수 있습니다. 해상도를 줄이거 나 압축하여 이미지를 업로드하기 전에 이미지를 수동으로 최적화 할 수도 있습니다.

너무 많은 플러그인이 WordPress 웹 사이트의 성능에 어떤 영향을 미칩니 까?

플러그인은 WordPress 웹 사이트에 유용한 기능을 추가 할 수 있지만 너무 많은 플러그인은 웹 사이트 속도를 늦출 수 있습니다. 각 플러그인에는 웹 사이트가로드되어야하는 코드가 추가되어 로딩 시간이 증가합니다. 실제로 필요한 플러그인 만 사용하고 더 이상 필요없는 플러그인을 정기적으로 확인하고 삭제하는 것이 중요합니다.

내 WordPress 웹 사이트의 성능을 모니터링하는 방법은 무엇입니까?