Elementor가 웹사이트 성능의 우선 순위를 지정하고 개선하는 방법

2021년 Elementor의 제품 로드맵, 특히 성능 최적화에 대해 이야기해 보겠습니다. 커뮤니티에서 요청한 멋진 새 기능을 계속 계획하고 개발하는 동안, 올해 우리는 사용자 웹사이트의 성능을 개선하는 것을 사명으로 삼았습니다. 이 게시물에서 저는 이 목표를 달성하기 위해 이미 취한 몇 가지 조치를 여러분과 공유하고 내년에 무엇이 올 것인지에 대해 조금 이야기하고 싶습니다.

웹사이트 성능은 인터넷이 시작된 이래로 웹 제작자에게 문제였습니다. 웹 제작자로서 저는 항상 다음과 같은 질문을 합니다.

• "내 사이트가 너무 느린가요? 사용자가 이탈하거나 내 Google 순위에 영향을 미치나요?"
• "사이트 속도를 높이려면 특정 기능을 놓아야 하나요?"
• 그리고 물론: “도대체 무엇이 여전히 내 성능 문제를 일으키고 있습니까? 여기 있는 모든 기지를 다 덮었다고 생각했어요!”

예, 웹 사이트에서 뛰어난 성능을 얻는 것은 우리가 사용하는 플랫폼이나 도구에 관계없이 웹 제작자에게 항상 어려운 일이었습니다. 성능에 영향을 미치는 관련 요소가 너무 많기 때문에 솔루션을 찾는 것은 고사하고 실제 문제를 격리하는 것이 항상 쉬운 것은 아닙니다. 이것이 바로 우리가 성능에 대한 이 5부작 비디오 과정을 만든 이유입니다. 이 시리즈에서는 Elementor와 관련이 있는지 여부에 관계없이 사이트 성능에 영향을 줄 수 있는 각 중요한 요소를 탐구하고 최적화 방법을 안내합니다.

일을 진정으로 흥미롭게 하기 위해 Google은 최근 웹사이트 성능이 이제 공식적으로 순위 알고리즘의 일부가 될 것이라고 발표했습니다. 이로 인해 성능 문제가 주목을 받아 전 세계 웹 사이트 소유자 사이에 우려가 제기되고 있습니다. 그렇기 때문에 지난 6개월 동안 당사의 R&D 및 SEO 팀은 Elementor 웹사이트가 이 업데이트를 통과하고 화려한 색상으로 통과할 수 있도록 끊임없이 노력해 왔습니다.

Google의 신비한 알고리즘과 관련하여 안전하다고 느끼기 위해서는 말보다 훨씬 더 많은 시간이 필요하다는 것을 알고 있습니다. 따라서 사용자 및 웹 제작자 커뮤니티에 대한 서비스로 최고의 SEO 전문가와 함께 무료 웹 성능 웨비나 를 개최하여 향후 변경 사항에 대해 논의할 것입니다. 이것은 업데이트 자체를 다룰 뿐만 아니라 이 변경이 웹사이트에 어떤 영향을 미칠 수 있는지, 그리고 준비하기 위해 무엇을 할 수 있는지 자세히 설명합니다. 웨비나는 4월 28일에 열리므로 자리를 비우셔야 합니다 .

그러나 모든 과정과 웹 세미나를 제쳐두고 우리의 주요 목표는 우리 제품이 귀하의 사이트 성능에 부정적인 영향을 미치지 않도록 하는 것입니다. 이것은 우리의 최우선 과제였으며 앞으로도 계속될 것입니다. 따라서 더 이상 고민하지 않고 2021 제품 로드맵에 설정된 Elementor의 성능 최적화 노력에 대해 알아보겠습니다.

제품 개발 주기의 최적화를 넘어 Elementor의 성능 개선을 위한 우리의 비전은 5개 트랙 접근 방식으로 구성됩니다. 우리는 이미 이러한 영역 중 일부에서 상당한 개선을 이루었으며 나머지는 Elementor의 향후 버전에서 다룰 예정입니다.

또한 성능이 개발 및 릴리스 파이프라인의 필수적인 부분이 되었음을 자랑스럽게 생각합니다. Elementor의 모든 버전은 이제 새로운 기능, 조정 또는 수정 사항이 Elementor로 구축된 기존 웹 사이트에 부정적인 영향을 미치지 않도록 다양한 성능 지표에 대해 검증되었습니다.

이제 트랙을 하나씩 검토해 보겠습니다.

Elementor가 자산을 로드하는 방식을 개선하여 각 페이지에서 필요한 것만 로드하도록 하고 있습니다. Elementor 및 Elementor Pro의 최신 버전에서는 웹사이트의 프론트엔드 성능을 개선하기 위해 최적화된 자산 로딩 실험을 도입했으며, 필요한 기능만 로드하여 각 페이지의 속도를 높였습니다. 여기에서 자세히 알아볼 수 있습니다.

또한 특정 위젯에 지연 로딩 옵션을 추가했으며 앞으로도 계속 그렇게 할 것입니다. 예를 들어 비디오 위젯에는 지연 로드 옵션이 포함되어 포함된 전체 비디오 플레이어를 정적 이미지 축소판으로 바꿀 수 있습니다. 방문자가 이미지와 상호작용하면 이미지가 전체 동영상으로 다시 전환됩니다.

이러한 지연 로딩 기술을 활용하면 초기 페이지 로드 중에 페이지 크기와 HTTP 요청 수를 크게 줄일 수 있으므로 방문자에게 훨씬 더 빠른 경험을 제공할 수 있습니다.

거의 5년 전에 Elementor를 출시한 이후로 웹 브라우저는 많이 발전했습니다. 이제 5년 전 외부 라이브러리가 필요했던 일부 기능은 기본 브라우저 지원을 사용하여 구현할 수 있습니다. 이는 훨씬 더 효율적인 구현을 가능하게 하고 경우에 따라 JavaScript 실행 시간을 크게 줄일 수 있습니다.

이에 대한 한 가지 예는 특정 경우에 기본 Intersection Observer API로 대체된 Waypoints 라이브러리입니다.

우리는 이러한 유형의 CSS 및 JavaScript 라이브러리 사용을 줄이고 가능한 한 기본 브라우저 지원으로 대체하는 것을 목표로 합니다.

Elementor의 기존 내부 JavaScript 및 CSS를 지속적으로 개선하고 최적화할 계획입니다.

예를 들어 Google Fonts 로드 방법을 구성하는 기능과 Font Awesome 라이브러리에 추가된 font-display 속성이 있습니다. 이러한 개선 사항은 이러한 파일에 대한 렌더링 차단 프로세스를 줄이고 기존 CSS 및 JS 파일에 대한 추가 최적화를 제공해야 합니다.

Elementor 3.0에서는 동적 CSS 로딩 및 렌더링 메커니즘을 개선했습니다. 각 페이지 로드 시 동적 값이 있는 요소에 대해 페이지를 스캔하는 데 사용되는 Elementor입니다. Elementor 3.0부터 페이지를 만들고 처음 방문할 때 Elementor는 동적 값으로 모든 요소의 캐시를 만듭니다. 그런 다음 페이지를 방문할 때마다 페이지에서 동적 요소를 검색하는 대신 캐시에서 목록을 가져와 즉시 렌더링합니다. 이렇게 하면 서버 측 렌더링 시간이 크게 향상되고 눈에 띄게 개선됩니다. 향후 Elementor에 대한 추가 구문 분석 개선 사항을 구현할 계획입니다. 이 블로그 게시물에서 자세히 알아볼 수 있습니다.

마지막으로 Elementor가 DOM 크기를 줄이기 위해 생성하는 코드 출력을 지속적으로 개선하고 축소할 계획입니다.

우리는 이미 Elementor 3.0에서 이러한 개선 작업을 시작했습니다. 여기서 3개의 래퍼 요소를 제거하여 더 작은 DOM을 만들고 코드 출력을 단순화했습니다.

Elementor 3.2에서는 DOM 크기를 더 크게 줄이기 위해 두 개의 요소를 더 제거했습니다. 가까운 장래에 더 많은 축소가 계획되어 있습니다.

보시다시피 2021년 이후에는 새로운 기능, 개선 사항 및 정밀 검사가 예상될 수 있습니다. 이는 더 나은 성능으로 놀라운 웹사이트를 계속 구축할 수 있도록 돕기 위한 노력의 일환입니다. 아직 최신 버전으로 업그레이드하지 않은 경우 이러한 개선 사항 및 기타 개선 사항을 즐기십시오.

아시다시피 WordPress 웹 사이트의 성능에 영향을 미치는 비 Elementor 관련 요소가 많이 있습니다. 여기에는 이미지 최적화, 웹 호스팅, 서버 제공업체, CDN 등이 포함됩니다. 사용자가 완전한 WordPress 최적화를 구현할 수 있도록 하는 것을 목표로 하고 있으므로 성능에 대해 자세히 알아볼 수 있도록 무료 자습서, 웨비나 및 기사로 구성된 방대한 리소스 뱅크를 만들었습니다.

• 성능에 대한 비디오 과정을 만들었습니다 . 이 5부작 시리즈 에서는 성능에 영향을 줄 수 있는 모든 중요한 요소와 최적화 방법을 살펴봅니다.

• 4월 28일에 주요 SEO 전문가와 함께 Core Web Vitals에 대한 웨비나 를 개최하여 다가오는 Google 알고리즘 변경과 웹사이트에 미치는 영향에 대해 논의할 예정입니다. 여기에서 자리를 비우십시오.

• 또한 웹 호스팅 선택, 플러그인 캐싱, 속도 테스트 실행, WP Rocket 사용 등과 같은 주제에 대한 성능 중심 기사와 함께 WordPress 웹 사이트의 속도를 높이는 방법에 대한 자세한 블로그 게시물을 게시했습니다.

웹 제작자 커뮤니티를 계속 지원하기 위해 WordPress 성능의 다른 측면을 다루는 무료 웹 세미나, 블로그 게시물 및 비디오를 계속 만들 것입니다.