WooCommerce용 Google PageSpeed ​​Insights에서 고성능 점수를 얻는 방법

웹사이트 성능은 에이전시에서 종종 간과하는 웹 디자인의 필수 측면입니다. 사이트에서 콘텐츠를 매우 빠르게 응답하고 제공하면 전환수 증가 및 Google 순위 향상 등 많은 이점을 얻을 수 있습니다.

Herdl에서는 여러 마케팅 채널에서 고성능이 제공할 수 있는 이점을 충분히 이해하고 성능 최적화를 프로세스의 필수적인 부분으로 고려합니다.

웹사이트 속도가 왜 중요한가요?

전자 상거래 사이트로서 전환율은 보고 프로세스의 핵심을 형성해야 하는 중요한 데이터입니다. 사이트 속도는 웹사이트 전환율에 근본적인 영향을 미치며 Google에서 발표한 연구는 빠른 웹사이트의 엄청난 이점을 강조합니다. 그들의 보고서에서 웹사이트 속도와 전환율 사이의 강한 상관관계를 쉽게 발견할 수 있습니다.

Google은 또한 최근 순위 요소로서 웹사이트 속도의 중요성을 재확인했습니다. 2018년 초에 그들은 모바일 우선 지수로의 광범위한 전환의 일환으로 속도 업데이트를 발표했습니다. 속도 업데이트는 2018년 7월에 출시되었으며 가장 느린 웹 사이트 경험을 담당하는 사이트의 작은 비율에만 영향을 미쳤습니다.

전자 상거래 사이트로서 전환율은 보고 프로세스의 핵심을 형성해야 하는 중요한 데이터입니다.

그럼에도 불구하고 웹사이트 속도는 Google PageSpeed ​​Insights가 처음 출시된 2010년까지 Google 검색 엔진 알고리즘의 일부였습니다. 출시 당시 사이트 속도는 공식적으로 Google의 순위 신호 중 하나로 선정되었으며 그 이후로 통합 SEO 순위 요소로 인식되었습니다.

하드웨어 및 설정의 중요성

성능은 하드웨어에서 시작되므로 서버나 네트워크가 제한되면 성능이 저하될 수 있습니다.

당사의 호스팅 플랫폼은 Bitfield Consulting의 인프라 전문가인 John Arundel이 설계, 구축 및 관리하며 데이터 센터 수준의 재해 복구가 포함된 고성능 WordPress 호스팅을 제공합니다. 우리는 SSD 드라이브와 40Gbit 네트워크가 있는 고속 하드웨어에서 실행되는 안정적이고 확장 가능한 가상 사설 서버를 제공하는 Digital Ocean과 Linode에 사이트를 배포합니다.

성능과 보안을 위해 항상 서버별 방화벽 이 있는 서버별 단일 사이트 모델 에서 작업합니다. 공유 호스팅은 비즈니스 사이트에서 피하는 것이 가장 좋으며 전자 상거래에서는 확실히 피해야 합니다. 호스팅 및 보안에 관해서는 편집증적 태도를 취하십시오. "위험을 감수하지 마십시오"가 채택할 수 있는 가장 좋은 생각입니다.

공유 호스팅은 비즈니스 사이트에서 피하는 것이 가장 좋으며 전자 상거래에서는 확실히 피해야 합니다.

Herdl 서버는 Puppet에 의한 구성 관리로 LEMP 스택(Ubuntu LTS, Nginx, MySQL, PHP)을 실행합니다. Puppet을 사용하면 서버 설정, 애플리케이션 설치 및 시스템 관리를 자동화하여 이러한 반복적인 작업 중 인적 오류를 제거할 수 있습니다. 또한 일일 서버 백업을 자동화하여 전체 데이터베이스 및 증분 사이트 백업을 Amazon S3에 저장하는 데 사용됩니다. 백업을 S3에 오프사이트로 저장하여 데이터 센터가 다운된 경우에도 액세스할 수 있도록 합니다.

단일 서버 아키텍처의 경우 성능 병목 현상은 종종 메모리 집약적일 수 있는 데이터베이스인 경우가 많습니다. RAM과 vCPU가 충분한지 확인하십시오. Redis를 사용하여 쿼리 결과를 캐시함으로써 데이터베이스 성능을 더욱 향상시킬 수 있습니다.

MySQL과 함께 제공되는 표준 구성( my.cnf )은 작동하지만 서버 사양에 따라 약간 조정하고 싶을 것입니다. 유용한 제안 및 예제 구성 파일을 포함하는 WordPress용 MySQL 최적화에 대한 많은 좋은 기사가 있지만 가장 좋은 옵션은 실제 사이트 사용에 맞게 조정하는 것입니다. 이를 위해 이 우수한 Perl 스크립트를 사용합니다.

항상 스테이징 사이트에서 구성 변경 사항을 먼저 테스트하고 mysqlslap(MySQL과 함께 제공됨)을 사용하여 결과를 벤치마킹하십시오. 스테이징 서버에서 MySQL 느린 쿼리 로그를 활성화하는 것도 좋은 생각입니다. 이렇게 하면 조사해야 하는 성가신 쿼리가 강조 표시될 수 있고 벤치마킹을 위한 테스트 쿼리를 제공하는 데에도 유용할 수 있기 때문입니다.

콘텐츠를 정기적으로 게시하는 경우 WordPress 데이터베이스가 자동으로 저장하는 모든 페이지 및 게시물 수정으로 인해 매우 비대해질 수 있습니다. 기본적으로 WordPress가 저장하는 개정판 수에는 제한이 없습니다. WordPress 구성 파일( wp-config.php )에 다음 행을 추가하여 이 수를 5개로 제한합니다.

define( 'WP_POST_REVISIONS', 5 );

마지막으로 때때로 데이터베이스를 최적화할 가치가 있지만 먼저 백업해야 합니다. WordPress 캐싱 플러그인인 WP Rocket은 이에 필요한 모든 도구를 제공합니다. 나중에 WP Rocket에 대해 조금 더 이야기하겠습니다.

개발 도구

WordPress 개발을 위해 우리는 Roots 팀의 Sage 스타터 테마(및 워크플로)를 사용하여 WordPress의 특별한 "맛"에 의존합니다. 여기에는 고급 자동화 빌드 작업을 위한 Gulp, 타사 WordPress 플러그인(및 버전 관리) 사용을 포함하여 종속성을 제어하기 위한 Composer, 패키지 관리를 위한 npm이 포함됩니다.

상상할 수 있듯이 우리의 워크플로는 끊임없이 진화하고 있으며 우리는 항상 우리의 프로세스에 통합할 새로운 도구와 서비스를 찾고 있습니다. 우리 팀은 코드를 DRY로 유지하고 BEM 원칙을 가능한 한 가깝게 따르기 위해 노력합니다. 테마 파일을 구성하는 방식은 테마 기능, 템플릿 및 자산을 분할하여 이를 용이하게 하도록 설정됩니다.

버전 제어를 위해 NVIE git 워크플로에 따라 Bitbucket을 통해 Git을 사용합니다. 코드는 설정이 간단하고 WordPress 개발에 필요한 모든 옵션을 제공하는 DeployHQ를 통해 자동으로 빌드 및 배포됩니다. 또한, 그들의 지원은 일류입니다.

애플리케이션이 실행되고 나면 중요한 통계를 측정하고 벤치마킹하여 성능을 미세 조정하고 최적화할 수 있습니다. 이를 위해 Pingdom 도구, GT Metrix 및 Google PageSpeed ​​Insights의 조합을 사용합니다. 이러한 서비스가 생성하는 보고서에는 살펴봐야 할 메트릭이 많이 있습니다. 궁극적으로 로드 시간 과 페이지 크기 에 집중해야 하며 둘 다 최대한 낮추는 것이 목표입니다. 이렇게 하면 모든 장치(및 네트워크 연결)의 모든 사용자가 최상의 경험을 할 수 있습니다.

브라우저 간 및 장치 테스트와 관련하여 우리는 LambdaTest를 선택합니다. 사용이 간편하고 포괄적인 테스트 제품군을 제공하며 모든 예산에 맞는 계획이 있습니다. 또한 Trello 및 Slack과 통합되어 워크플로의 필수적인 부분을 형성합니다.

WP Rocket은 우리가 선호하는 WordPress 캐싱 플러그인이며 모든 사이트에서 성능을 극적으로 향상시킵니다. 구성하기 쉽고 고급 사용자를 위해 매우 세분화된 제어를 제공하므로 캐시 구성을 미세 조정할 수 있습니다. WP Rocket은 CDN과 잘 통합되며 라이선스 모델은 에이전시에 적합합니다.

클라이언트의 예산과 사이트에 따라 정적 자산은 웹 서버, CDN(Beluga 및 BunnyCDN 등) 또는 실시간 이미지 최적화 서비스(Piio 및 Imagekit)를 통해 직접 제공됩니다. 모바일 성능의 경우 Piio(pie-o로 발음)는 이미지를 지연 로드하기 전에 즉시 감지, 최적화 및 크기 조정하므로 탁월한 선택입니다. 즉, 각 장치가 최적화되고 올바르게 크기가 조정된 이미지를 수신합니다(브라우저에서 크기 조정 없이).

이미지 최적화 서비스를 사용하지 않는 경우 Short Pixel이 권장되는 플러그인입니다. 손실, 광택 또는 무손실 압축을 사용하여 탁월한 이미지 최적화를 제공하고 이미지를 WebP 형식으로 변환할 수도 있습니다. 또한 전체 미디어 라이브러리를 대량 최적화할 수 있으며 가격 경쟁력도 매우 높습니다.

보안은 웹사이트 성능의 필수 구성 요소입니다. 사이트가 손상되었거나 맬웨어에 감염되었거나 공격을 통해 오프라인 상태가 되면 최적의 성능을 발휘하지 못합니다. 인기가 높기 때문에 WordPress는 해커의 명백한 표적이 되므로 애플리케이션 수준의 보안이 필수적입니다. 사용 가능한 최고의 WordPress 보안 플러그인인 WordFence를 사용하고 강력히 권장합니다. 전자 상거래 사이트의 경우 유료 Pro 라이선스를 선택하십시오. 고객 데이터는 위험을 감수해야 하는 것이 아닙니다.

가용성도 중요합니다. 현재 다운된 상태이고 이에 대해 알지 못한다면 지구상에서 가장 빠른 사이트를 갖는 것은 의미가 없습니다. 서버 수준 모니터링의 경우 Icinga를 사용하여 각 서버에서 실행되는 모든 서비스를 주시합니다. 우리는 또한 마음의 평화를 더하기 위해 Uptime Robot을 사용합니다. 이 두 가지를 함께 사용하면 모든 문제에 대해 항상 즉시 알림을 받을 수 있습니다.

Mabl, Sentry 및 Fluxguard는 애플리케이션 모니터링을 처리하여 애플리케이션 수준 문제를 알려줍니다. 또한 콘텐츠 수준에서 변경 사항을 감지할 수 있습니다. 이는 업데이트 후 기본 코드 수준 문제를 나타내는 좋은 지표입니다. Mabl은 자동화된 테스트를 포함하여 다른 멋진 작업도 많이 수행합니다. 우리가 가장 좋아하는 서비스 중 하나이며 반드시 확인해야 할 서비스입니다.

트래픽과 부하가 단일 서버의 용량을 넘어 증가함에 따라 다중 서버 아키텍처가 작동합니다. 이 시점에서 개발 운영 컨설턴트나 팀의 전담 사내 구성원을 고용하는 것이 좋습니다.

성능을 설계 및 개발 프로세스의 일부로 만드십시오.

성능은 계획에서 설계 및 개발에 이르는 프로세스 전반에 걸쳐 고려됩니다. 최고의 온라인 경험을 만들기 위해 프로젝트 또는 특정 요소에 접근하는 가장 좋은 방법에 대해 디자인 팀과 개발자 사이에 지속적인 대화가 있습니다.

계획 단계에서 우리는 현장에 어떤 기능이 필요할 것인지에 대한 확고한 아이디어를 가지고 있습니다. 전자 상거래 요소를 제공할 때 호스팅 요구 사항이 다르기 때문에 WooCommerce를 사용하는 것이 이에 대한 훌륭한 예입니다. 클라이언트는 처음부터 이를 알고 있으며 다양한 호스팅 옵션이 제공됩니다.

이 동일한 생각은 사이트의 페이지와 요소를 나타내는 와이어프레임, 개념 및 애니메이션을 만드는 디자인 단계로 이어집니다. 여기에서 대부분의 프론트 엔드 효과가 구상되고 우리 팀은 성능이 중요한 역할을 하는 놀라운 경험을 제공하는 무언가를 설계하기 위해 협력합니다.

모바일과 데스크톱 환경이 어떻게 다를 수 있는지 고려하여 모든 장치를 이 프로세스의 일부로 고려하는 것이 중요하다고 생각합니다.

우리는 요소를 지속적으로 조정하면서 개발 전반에 걸쳐 반복적인 테스트 방식을 취합니다. 우리는 이상적인 개념에서 시작하여 개별 장치 및 브라우저에 대해 적절하게 레이어를 제거하는 우아한 저하 프로세스를 따릅니다. 또한 성능 최적화, 캐싱 및 파일 최적화, 코드 수준 변경 도입을 위해 특별히 시간을 할애할 것입니다. 이 단계에서는 최상의 성능을 발휘할 때까지 여러 장치에서 요소를 테스트하고 다시 테스트합니다.

우리 작업의 모든 단계에서 성능에 초점을 맞추는 것은 우리가 제공하는 사이트가 출시 기간 동안 좋은 평가를 받는 데 도움이 되었으며 많은 상을 수상했습니다. 여기에는 Awwwards' Developer Award, Mobile Excellence Award 및 Mobile Site of the Week(다른 것들 중에서)와 같은 여러 개발 관련 상이 포함됩니다.

WooCommerce 사이트의 속도와 보안 향상

웹사이트 성능에 대한 배경 지식과 설정 및 프로세스에 대한 세부 정보를 공유하여 WooCommerce 관리자가 사이트의 속도와 보안을 개선하는 데 도움이 되기를 바랍니다. 전자 상거래 웹 사이트를 효과적으로 운영하려면 성능이 최우선 순위가 되어야 하며 모바일 장치의 보급으로 인해 성능이 더욱 중요해질 것이라고 생각합니다.

설정과 관련하여 질문이나 의견이 있으면 의견을 남기거나 연락하십시오.