WP Engine의 친구들은 최근 Beaver Builder로 구축된 아름다운 새 홈페이지를 출시했습니다. 우리는 Beaver Builders Facebook 그룹의 페이지 링크를 공유했으며 몇몇 사람들은 페이지의 전체 로드 시간이 상당히 길다고 지적했습니다. 우리의 좋은 친구이자 탁월한 WordPress 개발자인 Jon Brown이 훌륭한 설명으로 도움을 주었습니다.

페이스북 대화

여기서 대화를 아주 빠르게 바꿔보겠습니다.

Beaver Builder 걱정: XYZ 테스트 도구로 페이지 로드 테스트를 했는데 로드하는 데 거의 10초가 걸렸습니다!

Jon: 속도와 성능은 디자인 선택이며 판매 전환에 매우 중요합니다. 하지만 이것이 다른 더 가치 있는 도구와 절충되지 않는다는 의미는 아닙니다.

사람들이 폭포수를 이해하지 못한 채 문자 등급과 총 로드 시간을 보는 경우가 많습니다. 매우 간단한 사이트를 보지 않는 한 그것은 당신을 잘못된 길로 이끌 것입니다…

이러한 테스트 도구 등급은 정말 조잡하며 많은 실제 현실을 무시합니다. 그들은 광고, 추적 스크립트 및 반드시 그런 식으로 작동하는 기타 작업에 대한 리디렉션을 피하라고 말할 것입니다. 그들은 종종 HTTP/2를 무시하고 요청을 줄이고 중요하지 않고 해를 끼칠 수도 있는 자산을 연결하도록 권장합니다... 그들은 속도 지수와 스크롤 없이 볼 수 있는 부분의 렌더링에 초점을 맞추지 않습니다...

실제 페이지 로드는 1.5초 미만입니다.

더 자세히 알아보자

나는 Jon에게 성과에 관해 몇 가지 질문을 더 할 수 있는지 물었고 그는 매우 정중하게 동의했습니다. 이것은 Jon의 답변과 함께 내 (Robby의) 질문입니다.

아, Jon이 9seeds라는 맞춤형 개발 상점을 운영하고 있어 WordPress 웹사이트의 성능을 미세 조정하는 데 도움을 줄 수 있다고 언급했나요?

1. '폭포'를 언급하셨는데요. 폭포가 무엇인지 좀 더 설명해 주실 수 있나요?

웹사이트 성능을 평가할 수 있는 도구는 많이 있습니다. 이들 중 다수는 이해하기 쉬운 문자 등급이 포함된 보고서를 제공합니다. 이러한 문자 등급은 매우 무뚝뚝한 도구이며, 모든 것을 얻을 때는 좋지만, A를 바로 보지 못할 때는 도움이 되기는커녕 특별히 통찰력이 있는 것은 아닙니다. 내가 도움이 된다고 생각하는 유일한 문자 등급은 쉽게 수정할 수 있는 이미지 압축입니다. 최적화 프로그램을 통해 이미지를 실행하세요.

저는 일반 개발자와 초보 개발자가 문자에 눈이 먼 경우를 너무 자주 봅니다. 프런트엔드 웹 성능에 영향을 미치는 많은 요소가 있으며 모든 HTTP 요청이 시작되고 완료될 때를 보여주는 그래프인 "폭포수"를 실제로 살펴봐야 합니다. 나는 이것을 생성하기 위해 WebPageTest.org를 사용합니다.

"폭포"는 로드하는 데 너무 오래 걸리거나 다른 자산의 로드를 차단하는 특정 자산이 무엇인지 "확인"하는 곳입니다.

마지막으로 A를 얻는 것보다 사이트 소유자에게 더 가치 있는 디자인 선택(예: 슬라이더 제거) 및 타사 자산(예: Google Analytics, HotJar 등) 제거가 필요할 수 있다는 점을 인식하십시오. 고통스러운 희생없이 똑바로 나아가십시오.

2. 선택한 테스트 도구로 WebPageTest를 추천하셨습니다. 이를 선호하는 이유는 무엇이며 Pingdom, GTmetrix(및/또는 Google Page Speed?)와 같은 도구와 어떻게 다릅니까?

개인적으로 저는 WebPageTest.org보다 이러한 작업을 수행하는 데 있어 더 좋고 유연한 것을 본 적이 없습니다. 하지만 과거에도 GTMetrix, Pingdom, Google Page Speed ​​등을 사용해 본 적이 있는데 괜찮습니다. Lighthouse와 같은 일부 새로운 기능은 프로그레시브 웹 앱에 정말 좋습니다(WordPress 사이트의 99%는 아님). 하지만 사람들에게 도구를 바꾸라고 말하는 것은 아닙니다. 알고 이해하는 도구를 사용하십시오. 어떤 도구도 모르는 경우 WPT는 배우기에 좋은 무료 도구입니다. 문자 등급을 넘어 문자 등급의 원인이 무엇인지 이해하기 시작하십시오.

3. "요청 감소 및 자산 연결"이라는 메모에서 이는 더 이상 모범 사례가 아닌가요? 왜?

대부분의 사이트가 HTTPS가 아닌 HTTP였고 웹 서버가 모두 HTTP/1.1 프로토콜을 사용하던 시절에는 웹 서버가 너무 많은 자산을 병렬로 전송할 수 있었습니다. 각 자산(이미지, 스크립트, 스타일시트)은 별도로 전송되었으며 각각 고유한 오버헤드가 있어 작업 속도가 느려졌습니다. 가능한 모든 것을 함께 연결하면 HTTP 요청 수가 줄어들고 성능이 크게 향상되었습니다.

지난 몇 년 동안 모든 곳에서 HTTPS를 향한 엄청난 추진이 있었고 웹 서버는 새로운 HTTP/2 프로토콜을 지원하기 시작했습니다. HTTP/2는 프리페치 및 프리로드와 같은 큰 이점을 제공할 뿐만 아니라 모든 작은 자산을 병렬로 전송할 수 있으므로 이를 연결할 필요가 없습니다. 실제로 각각의 작은 자산을 독립적으로 캐시할 수 있도록 하지 않는 것이 더 나을 수 있습니다.

이는 웹 서버가 HTTP/2를 지원하는 경우에만 작동하며 사이트가 HTTPS인 경우에만 가능하다는 점을 명심하는 것이 중요합니다.

그런데 요즘 우리가 작업하는 사이트는 모두 HTTPS이고 HTTP/2 지원 서버에서 실행되기 때문에 더 이상 자산을 연결할 생각조차 하지 않고, 절대 놓치지 않는 시점입니다!

4. 권장할만한 다른 "통념"이나 오래된 성능 권장 사항이 있습니까?

가장 큰 장점은 디자인 변경이나 통제할 수 없는 제3자 자산 제거와 같은 고통스러운 양보 없이 모든 사이트가 제대로 작동할 수 있다는 점입니다. 하지만 속도 지수라는 것을 살펴보아야 하기 때문에 정말 괜찮습니다! WPT는 이에 대해 잘 설명하고 있지만 기본적으로 사용자가 "스크롤 없이 볼 수 있는 부분"이 완전히 로드된 것으로 인식되는 시점을 고려하고 있습니다. 페이지가 실제로 완성되기보다는 사용자 경험의 속도에 관한 것입니다. WP 엔진의 새로운 첫 페이지 디자인에 관한 내용 중 하나였는데, 속도 지수가 정말 훌륭했습니다. 로드하고 완료하는 데 오랜 시간이 걸리는 것은 지연된 스크립트였습니다.

5. 누군가에게 추천하고 싶은 다른 성능 도구, 팁 또는 요령이 있습니까?

제가 수년 동안 의지해 온 도구는 다음과 같습니다.

• WebPageTest.org – 내가 가장 좋아하는 것!
• ImageOptim – JPG/PNG 압축을 위한 데스크톱 앱
• ImageAlpha – PNG를 압축하는 데스크탑 앱(주로 색상 수를 줄여서)
• CloudFlare – 대규모 글로벌 CDN 및 기본 WAF로 무료입니다. 또한 즉각적인 이미지 최적화, 경로 최적화 등과 같은 인상적인 유료 프로 기능도 있습니다.

플러그인:

• WP Rocket – WP 엔진에서도 WP Rocket을 사용하는데 제대로 작동합니다.
• Imagify.io – WordPress/클라우드 기반 이미지 최적화.
• BeaverBuilder – 나는 이런 말을 해서 돈을 받지 못했습니다! 우리는 많은 사이트에서 성능 감사를 수행하라는 요청을 받고 다른 인기 있는 페이지 빌더에서 주요 프런트엔드 및 백엔드 문제를 자주 발견합니다. 이름을 언급하지는 않겠지만 Beaver Builder에서는 그렇지 않습니다. 그래서 우리는 이를 우리 사이트에서 다음과 같이 사용합니다. 잘!

시간을 내어 성능에 대한 보다 현대적인 접근 방식을 안내해 주신 Jon에게 다시 한 번 감사드립니다. 저는 Jon의 소속사인 9seeds에 마지막 플러그를 주고 싶었습니다. 어떤 종류의 사용자 정의 WordPress 개발에 대한 도움을 찾고 있다면, 그들에게 소리쳐주세요!

존 브라운 소개

뜨내기. 워드프레스 개발자. 사진가. 생명의 간.