합성되지 않은 애니메이션 문제 방지

웹사이트를 클릭했는데 스크롤할 때 끊김 현상과 지연 현상이 발생한 적이 있습니까?

실망스럽죠?

글쎄요, 이러한 문제의 비밀이 합성되지 않은 애니메이션이라는 것에 있다고 말하면 어떨까요?

이는 브라우저에서 효율적으로 처리되지 않아 컴퓨터의 메인 프로세서에 추가 로드를 가하고 성능 문제를 일으키는 애니메이션입니다.

하지만 걱정하지 마세요. 이 문제를 해결할 수 있는 방법이 있습니다.

이번 블로그에서는 합성되지 않은 애니메이션과 이를 수정하는 방법에 대해 설명합니다. 우리는 귀하의 웹 사이트를 더 빠르게 만들 뿐만 아니라 방문자가 탐색하는 즐거움을 누릴 수 있도록 이러한 애니메이션을 부드럽게 만드는 간단한 단계를 안내해 드립니다.

의 시작하자.

비합성 애니메이션이란 무엇입니까?

비합성 애니메이션은 GPU(그래픽 처리 장치)가 아닌 주로 CPU에서 처리되는 웹 애니메이션 유형입니다.

이러한 처리 접근 방식은 렌더링 효율성을 떨어뜨리는 경우가 많으며, 특히 복잡한 웹 페이지나 성능이 떨어지는 장치에서 프레임 속도 저하 및 사용자 인터페이스 지연과 같은 성능 문제를 일으킬 가능성이 있습니다.

CLS(Cumulative Layout Shift)를 줄이면 Lighthouse Performance 점수가 향상됩니다.

웹 성능을 위해 합성되지 않은 애니메이션을 피하는 것이 왜 필수적인가요?

합성되지 않은 애니메이션을 피하는 것은 여러 가지 이유로 웹 성능에 필수적입니다. 첫째, CPU에서 처리되는 합성되지 않은 애니메이션은 GPU로 처리되는 애니메이션보다 효율성이 낮고 느릴 수 있습니다.

이러한 비효율성은 종종 프레임 속도 감소로 이어져 애니메이션이 고르지 않거나 지연되어 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 애니메이션이 더 부드러운 웹페이지는 반응성이 더 뛰어나고 일반적으로 상호작용하기가 더 즐겁습니다.

둘째, CPU 집약적인 애니메이션은 특히 스마트폰이나 구형 컴퓨터와 같이 성능이 떨어지는 장치에서 시스템 리소스에 부담을 줄 수 있습니다. 이러한 부담으로 인해 애니메이션 자체뿐 아니라 웹페이지에서 실행되는 다른 프로세스도 느려질 수 있습니다.

결과적으로 웹사이트의 전반적인 성능이 저하될 수 있습니다. 뿐만 아니라 웹사이트 성능 저하로 인해 디지털 마케팅 성공에도 부정적인 영향을 미칠 수 있습니다. 방법을 알아보려면 이 블로그 " 웹사이트 속도가 디지털 마케팅 성공에 미치는 영향 "을 확인하세요.

참고: 다음은 더 나은 성능을 위해 WordPress 사이트 속도를 높이는 몇 가지 쉬운 팁 입니다.

합성되지 않은 애니메이션은 페이지 성능과 브라우저 렌더링에 어떤 영향을 미칩니까?

합성되지 않은 애니메이션은 페이지 성능과 브라우저 렌더링 모두에 큰 영향을 미칠 수 있습니다. 성능 측면에서는 웹사이트 속도를 저하시키는 경향이 있습니다. 이는 컴퓨터의 메인 프로세서(CPU)가 다른 작업에 더해 복잡한 애니메이션을 처리하려고 과로하기 때문에 발생합니다.

결과적으로 웹 사이트는 클릭이나 스크롤과 같은 사용자 상호 작용에 덜 반응하게 됩니다. 이는 휴대폰과 같이 처리 능력이 낮은 장치에서 특히 두드러집니다.

브라우저 렌더링과 관련하여 합성되지 않은 애니메이션은 화면에서 고르지 못하고 고르지 못한 움직임을 일으키는 경우가 많습니다. CPU는 GPU보다 이러한 애니메이션을 그리고 관리하는 데 효율성이 떨어지기 때문에 애니메이션이 끊기고 매끄럽지 않게 나타날 수 있습니다.

이는 시각적 매력에 영향을 미치며 브라우저가 이러한 까다로운 애니메이션을 렌더링하는 데 어려움을 겪기 때문에 웹 사이트가 느리게 느껴질 수 있습니다. 또한 애니메이션 요소를 처리하고 표시하는 데 더 많은 시간이 걸리기 때문에 CPU에 대한 부담으로 인해 웹페이지 로딩 시간이 길어질 수 있습니다.

합성되지 않은 애니메이션을 감지하는 방법은 무엇입니까?

Google PageSpeed ​​Insights 및 GTmetrix와 같은 성능 분석 도구를 사용하여 합성되지 않은 애니메이션을 감지할 수 있습니다. 합성되지 않은 애니메이션을 감지하는 데 사용할 수 있는 최고의 WordPress 속도 테스트 도구 10가지를 소개합니다.

이러한 도구는 애니메이션 렌더링 방법을 포함하여 웹 사이트 성능의 다양한 측면을 분석합니다.

사용 방법은 다음과 같습니다.

Google PageSpeed ​​​​인사이트

• PageSpeed ​​Insights 웹사이트를 방문하여 웹페이지 URL을 입력하고 '분석'을 클릭하세요. 이 도구는 모바일 및 데스크톱 성능 모두에 대해 페이지를 평가합니다.

• 분석 후 PageSpeed ​​Insights는 점수와 자세한 보고서를 제공합니다. 보고서의 '진단' 섹션을 살펴보세요.
• "합성되지 않은 애니메이션을 피하세요."와 같은 경고를 찾으세요. 이는 페이지에 더 나은 성능을 위해 최적화할 수 있는 애니메이션이 있음을 나타냅니다.

GT 메트릭스

• GTmetrix 웹사이트로 이동하여 사이트의 URL을 입력하고 테스트를 시작하세요. GTmetrix는 사이트의 로딩 성능에 대한 포괄적인 분석을 제공합니다.

• 분석이 완료되면 자세한 보고서를 받게 됩니다. GTmetrix는 일반적인 성능 지표에 더 중점을 두므로 PageSpeed ​​Insights와 같은 합성되지 않은 애니메이션을 직접적으로 지적하지 못할 수도 있습니다.
• '총 차단 시간' 또는 '대화 시간'과 같은 렌더링 시간 및 CPU 로드 측정항목을 찾아보세요.
• GTmetrix는 합성되지 않은 애니메이션을 명시적으로 언급하지 않을 수 있지만 이러한 영역의 값이 높으면 합성되지 않은 애니메이션으로 인해 렌더링 프로세스가 비효율적임을 나타낼 수 있습니다.

또한 스트레스 테스트를 수행하여 웹사이트 성능을 확인할 수도 있습니다.

브라우저는 애니메이션을 어떻게 처리합니까?

애니메이션 처리와 관련하여 브라우저는 컴퓨터의 두 가지 주요 부분인 CPU(중앙 처리 장치)와 GPU(그래픽 처리 장치)를 사용합니다. 색상이나 텍스트 변경과 같은 간단한 애니메이션은 일반적으로 CPU에서 관리됩니다.

그러나 보다 복잡한 애니메이션, 특히 움직임이나 변형과 관련된 애니메이션의 경우 브라우저는 GPU를 사용하려고 합니다. GPU는 그래픽을 처리하고 부드럽고 유연한 애니메이션을 만들 수 있도록 설계되었기 때문에 이러한 작업에 더 좋습니다.

그러나 애니메이션이 올바르게 설정되지 않으면 브라우저가 여전히 CPU를 사용하여 애니메이션이 덜 부드러워지고 전체 웹 사이트 속도가 느려질 수 있습니다. 따라서 웹 개발자는 최고의 성능을 위해 애니메이션이 GPU 친화적인지 확인하기 위해 노력합니다.

합성되지 않은 애니메이션의 원인

합성되지 않은 애니메이션 문제를 해결하려면 먼저 해당 문제의 원인을 이해하는 것이 중요합니다. 다음은 몇 가지 일반적인 이유입니다.

비복합 속성 애니메이션

비복합 속성에 애니메이션을 적용하면 합성되지 않은 애니메이션이 발생하는 경우가 많습니다. 이는 브라우저에서 많은 재계산 및 다시 그리기를 수행해야 하는 '너비', '높이' 또는 '여백'과 같은 속성이 애니메이션에 사용될 때 발생합니다.

이러한 속성은 GPU에서 효율적으로 처리되지 않으므로 CPU에 더 많은 로드를 가해 애니메이션이 덜 부드러워집니다.

JavaScript를 사용하여 애니메이션 만들기

JavaScript를 사용하여 애니메이션을 적용하면 문제가 발생할 수도 있습니다. JavaScript 기반 애니메이션은 특히 최적화되지 않은 경우 CPU에서 많은 것을 요구할 수 있습니다. JavaScript는 애니메이션에 대한 더 많은 제어 기능을 제공하지만 애니메이션이 복잡하거나 효율적으로 코딩되지 않으면 성능 문제가 발생할 수 있습니다.

복잡한 페인트 영역

애니메이션의 복잡하게 칠해진 영역이 또 다른 원인이 될 수 있습니다. 애니메이션 중에 자주 다시 칠해야 하는 넓은 영역이 있으면 시스템에 상당한 부담을 줍니다. 이는 빠르게 변화하는 복잡한 그래픽이나 고해상도 이미지의 경우 특히 그렇습니다.

비효율적인 그래픽 또는 미디어

애니메이션의 비효율적인 그래픽이나 미디어 사용은 또 다른 일반적인 원인입니다. 웹용으로 최적화되지 않은 고해상도 이미지, 비디오 또는 그래픽은 애니메이션 속도를 저하시킬 수 있습니다. 브라우저는 특히 애니메이션 시퀀스의 일부인 경우 이러한 무거운 요소를 렌더링하는 데 더 많은 노력을 기울입니다.

그림자와 필터의 과도한 사용

마지막으로 CSS에서 그림자와 필터를 과도하게 사용하면 합성되지 않은 애니메이션이 발생할 수 있습니다. 이러한 효과는 시각적으로 매력적이지만 리소스 집약적입니다. 움직이는 요소에 적용하면 브라우저가 많은 추가 처리를 수행해야 하므로 성능에 큰 영향을 미칠 수 있습니다.

참고: 웹사이트 속도가 느려지는 다른 원인에 대해 알아보세요.

합성되지 않은 애니메이션을 피하는 방법

합성되지 않은 애니메이션은 웹 사이트 성능에 큰 영향을 미쳐 사용자 경험을 저하시킬 수 있습니다. 이 문제를 해결하는 열쇠는 애니메이션 처리 방법을 최적화하는 데 있습니다.

이 문제를 해결하기 위한 단계별 접근 방식은 다음과 같습니다. 수정을 진행하기 전에 다음 오류로 인해 웹 사이트 점수가 어떻게 보이는지 보여 드리겠습니다.

• 진단을 진행하면서 "합성되지 않은 애니메이션 방지" 오류를 발견했습니다.

이 문제를 해결하기 위해 따라야 할 단계는 다음과 같습니다.

• WordPress 대시보드로 이동
• 모양 > 사용자 정의를 선택합니다.
• "추가 CSS" 섹션에서 CSS 코드를 찾을 수 있습니다. 이 코드가 최적화된 CSS 애니메이션을 사용하지 않아 이 오류가 발생할 가능성이 높습니다.

• 개발자라면 이 코드가 최적화되지 않았다는 것을 이미 알고 계실 것입니다. 귀하의 웹 사이트에 놀라운 변화를 가져올 변경 사항은 다음과 같습니다.

변경 사항 1: Will-Change 속성 추가

이 변경 사항은 렌더링 성능을 최적화하는 데 도움이 될 수 있는 향후 애니메이션 변경 사항을 브라우저에 알리는 것입니다.

 .my-애니메이션 {

    너비: 100px;

    높이: 100px;

    배경색: 빨간색;

    위치: 절대;

    will-change: 변환, 불투명도; /* 추가된 줄 */

    애니메이션: complexMove 5s 선형 무한;

}

/* 나머지 키프레임은 변경되지 않은 상태로 유지됩니다 */

변경 사항 2: 애니메이션 복잡성 줄이기

여기서는 50%에서의 스케일 변환을 scale(2)에서 scale(1.5)로 수정했습니다. 이렇게 하면 애니메이션의 복잡성과 강도가 줄어듭니다.

 .my-애니메이션 {

    /* ... 다른 속성들 ... */

    will-change: 변환, 불투명도; /* 변경 1이 유지된다고 가정 */

    애니메이션: complexMove 5s 선형 무한;

}

@keyframes complexMove {

    /* ... 0% 및 100% 키프레임 ... */

    50% {

        변환: 변환X(300%) 회전(180deg) 스케일(1.5); /* 수정된 줄 */

        불투명도: 0.5;

    }

    /* ... 100% 키프레임 ... */

}

최종 코드는 다음과 같습니다.

 .my-애니메이션 {

    너비: 100px;

    높이: 100px;

    배경색: 빨간색;

    위치: 절대;

    will-change: 변환, 불투명도; /* 향후 변경 사항을 브라우저에 알리기 */

    애니메이션: complexMove 5s 선형 무한;

}

@keyframes complexMove {

    0%, 100% {

        변환: 번역X(0) 회전(0) 스케일(1);

        불투명도: 1;

    }

    50% {

        변환: 변환X(300%) 회전(180deg) 스케일(1.5); /* 복잡성 감소를 위한 단순화된 규모 */

        불투명도: 0.5;

    }

}

• 이전 코드를 제거하고 이 새 코드를 복사하여 추가 CSS에 붙여넣기만 하면 됩니다. 이렇게 하면 애니메이션이 변경되지 않지만 이 오류는 확실히 제거됩니다.

• 오류가 더 이상 존재하지 않는 것을 볼 수 있습니다.
• 그리고 좋은 점은 최적화된 코드를 사용하면 성능 점수를 높일 수 있다는 것입니다. 이 섹션의 시작 부분에서 성능 점수가 77점인 것을 확인했습니다.
• 향상된 성능 점수는 다음과 같습니다.

따라서 이 오류를 해결하기 위해 염두에 두어야 할 몇 가지 일반적인 팁은 다음과 같습니다.

팁 1: CSS 애니메이션 최적화

리소스를 많이 사용할 수 있는 높이, 너비, 왼쪽과 같은 속성에 애니메이션을 적용하는 대신 다음을 사용하세요.
변환
그리고
불투명도 . 이러한 속성은 GPU 가속되며 브라우저에서 보다 효율적으로 처리될 수 있습니다.

최적화 전후의 예제 코드는 다음과 같습니다.

최적화 전:

 .animate-왼쪽 {

    위치: 상대;

    애니메이션: moveLeft 2s 선형 무한;

}

@keyframes moveLeft {

    {왼쪽: 0; }

    {왼쪽으로: 100px; }

}

최적화 후:

 .animate-왼쪽 {

    위치: 상대;

    애니메이션: moveLeft 2s 선형 무한;

}

@keyframes moveLeft {

    { 변환: 번역X(0); }

    { 변환: 번역X(100px); }

}

팁 2: CSS 'Will-Change' 속성 활용

will-change 속성을 사용하여 가까운 미래에 변경될 요소를 브라우저에 알립니다. 이를 통해 브라우저는 변경 사항을 준비하고 최적화할 수 있습니다.

will-change 속성을 사용하는 방법은 다음과 같습니다.

• 코드에 다음 줄을 삽입하세요.

 will-change: 변환, 불투명도; /* 추가된 줄 */

팁 3: 애니메이션을 GPU로 오프로드

애니메이션을 GPU(그래픽 처리 장치)로 오프로드하는 것은 웹 애니메이션을 최적화하여 더 매끄럽게 만들고 CPU(중앙 처리 장치)에 대한 부담을 줄이는 기술입니다.

이 접근 방식은 GPU의 기능을 활용하여 그래픽 작업을 보다 효율적으로 처리하므로 합성되지 않은 애니메이션 문제를 해결하는 데 특히 효과적입니다.

애니메이션의 변환 및 불투명도 속성은 너비, 높이, 위쪽 또는 왼쪽과 같은 속성을 애니메이션화하는 것보다 더 효율적이므로 애니메이션을 GPU로 오프로드할 수 있습니다.

왼쪽 및 오른쪽 대신 변환 및 불투명도 속성을 사용할 수 있습니다. 예는 다음과 같습니다.

최적화되지 않은 코드:

 @keyframes moveLeft {

    {왼쪽: 0; }

    {왼쪽으로: 100px; }

}

최적화된 코드:

 @keyframes moveLeft {

    { 변환: 번역X(0); }

    { 변환: 번역X(100px); }

}

팁 4: 효율적인 라이브러리 및 도구 사용

GSAP(GreenSock Animation Platform) 또는 Velocity.js와 같은 효율적인 라이브러리를 통합하면 합성되지 않은 애니메이션 오류를 해결하는 데 매우 효과적일 수 있습니다.

이러한 라이브러리는 성능에 최적화되어 표준 CSS 또는 JavaScript보다 더 부드럽고 효율적인 애니메이션을 제공합니다.

GSAP 라이브러리를 통합하려면 다음 단계를 따르세요.

• GSAP의 CDN 링크를 찾으세요.
• GSAP를 사용하려는 HTML 파일을 엽니다.
• <script> 태그 안에 CDN 링크를 배치해야 합니다. 이 태그는 <body> 섹션 끝 부분에 배치하는 것이 가장 좋습니다.

 <!DOCTYPE HTML>

<html>

<머리>

    <title>귀하의 웹페이지</title>

    <!-- 기타 헤드 요소 -->

</head>

<본문>

    <!-- HTML 콘텐츠가 여기에 표시됩니다 -->

    <!-- 본문 끝에 GSAP CDN 스크립트 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</body>

</html>

Cloudways 호스팅이 최적화된 애니메이션을 보완하는 방법

Cloudways Hosting은 DigitalOcean, AWS, Google Cloud와 같은 최고의 클라우드 제공업체로부터 빠른 속도와 높은 가동 시간을 제공하여 최적화된 애니메이션으로 웹사이트를 향상합니다. Memcached, Varnish 및 Redis를 포함한 고급 캐싱 솔루션은 애니메이션의 빠른 로딩을 보장합니다. Cloudflare의 Enterprise CDN과 함께 플랫폼의 최적화된 스택은 특히 피크 트래픽 중에 애니메이션 성능을 더욱 향상시킵니다. 강력한 보안 기능과 결합된 Cloudways는 애니메이션이 풍부한 웹사이트에 이상적이고 비용 효율적인 호스팅 환경을 제공합니다.

요약

그리고 그게 다야. 우리는 웹 애니메이션의 모범 사례에 초점을 맞춰 합성되지 않은 애니메이션을 방지하기 위한 주요 전략을 탐색했습니다.

또한 합성되지 않은 애니메이션이 발생하는 원인과 이것이 웹 성능 및 브라우저 렌더링에 어떤 영향을 미치는지 논의했습니다.

이 주제와 관련하여 궁금한 점이 있으면 언제든지 문의해 주세요.