사이트 속도를 위해 렌더링 차단 JS 및 CSS를 제거하는 방법

웹사이트의 미학도 중요하지만 콘텐츠와 로딩 속도는 사람들을 계속 재방문하게 합니다. WordPress는 사용자에게 자신만의 맞춤형 웹사이트를 빠르게 만들 수 있는 정교한 플러그인 및 테마 도구 상자를 제공합니다.

그러나 이러한 테마와 플러그인이 작동하려면 JavaScript(JS) 및 CSS(Cascading Style Sheets)가 필요합니다. WordPress는 스크립트 파일의 형태로 자동으로 생성합니다. 최적화되지 않은 경우가 많습니다. 따라서 웹 사이트 속도가 상당히 느려질 수 있습니다.

이것은 독자들에게 좌절감을 줄 수 있습니다. 따라서 이 가이드에서는 이러한 렌더링 차단 스크립트를 찾아 제거하는 방법을 탐색하고 WordPress 웹 사이트의 로딩 속도를 높이는 방법을 보여줍니다.

렌더링 차단 JS 및 CSS 스크립트는 무엇이며 왜 나쁜가요?

인터넷에 있는 대부분의 웹 페이지는 JavaScript, CSS 및 Hypertext Markup Languages의 세 가지 주요 구성 요소로 구성됩니다. HTML은 기본 역할을 하는 반면 JavaScript와 CSS는 여기에 포함됩니다. 그러나 요즘에는 HTML 문서에 외부 스크립트에 대한 호출을 포함하는 것이 더 일반적입니다.

이러한 스크립트는 웹 브라우저가 웹 페이지를 렌더링하는 데 사용하는 대기열에 보관됩니다. 소스 코드를 보지 않고 웹 페이지에서 사용하는 스크립트를 확인하는 가장 쉬운 방법은 (Ctrl + S) 웹 브라우저에서 다운로드하는 것입니다. 웹 브라우저는 웹 페이지에서 사용하는 스크립트, 이미지 및 기타 파일의 전체(또는 대부분)가 포함된 폴더와 함께 HTML 문서를 다운로드합니다.

웹 페이지가 대기열에서 호출해야 하는 스크립트가 복잡할수록 렌더링 시간이 더 오래 걸립니다. 종종 웹 브라우저는 웹 페이지를 더 빨리 로드하기 위해 로컬 캐시의 스크립트 및 이미지와 같은 웹 페이지 리소스를 다운로드합니다. 클라이언트 측 사용자는 JavaScript를 비활성화하고 캐시 크기를 늘리고 AdBlockers를 사용하여 웹 페이지 렌더링 시간을 단축할 수 있지만 이는 이상적인 솔루션이 아닙니다. 책임은 웹 개발자에게 있습니다.

불만을 받거나 웹사이트에서 콘텐츠를 렌더링하는 데 문제가 있다는 것을 알게 된 경우 문제를 해결하기에 너무 늦지 않았습니다.

렌더링 차단 스크립트를 찾고 수정하여 웹사이트를 최적화하는 방법

종료하거나 최적화할 스크립트를 결정하기 전에 웹 사이트 또는 웹 페이지의 속도를 평가해야 합니다. GTmetrix 또는 Google의 PageSpeed ​​Insights와 같은 온라인 플랫폼을 사용할 수 있습니다. 테스트하려는 웹사이트나 웹페이지의 URL을 삽입하기만 하면 도구가 등급을 매기고 다른 통찰력을 제공합니다.

또한 웹 사이트를 더 빠르게 만드는 데 사용할 수 있는 감사를 제안합니다. 예를 들어 웹 페이지에서 더 적은 수의 요소를 사용하거나 사용하지 않는 CSS 및 JavaScript를 줄이도록 제안합니다. GTmetrix는 최적화해야 할 스크립트를 보여주기까지 합니다.

또는 Chrome DevTools의 Coverage 탭을 사용하여 스크립트의 사용률 데이터를 표시할 수 있습니다. 어떤 스크립트가 차선책인지 식별하고 나면 몇 가지 작업을 수행하여 수정할 수 있습니다. 그러나 이러한 단계를 성공적으로 구현하려면 상당한 코딩 능력이 필요합니다. 최소한 기능적 JavaScript 프로그래밍에 대한 기본적인 이해가 필요합니다.

코딩 튜토리얼 과정(또는 부트캠프)에 참여하는 것도 기술을 더욱 발전시키는 데 도움이 되는 좋은 아이디어입니다. 평균적으로 코딩 부트캠프는 완료하는 데 최대 15주가 소요될 수 있으며, 시간이 오래 걸리는 것처럼 들릴 수 있지만 기본적인 코드 활용 능력이 현대 사회에서 얼마나 중요한 기술인지를 고려할 때 충분히 가치가 있습니다. 그럼에도 불구하고 렌더링 차단 스크립트를 수정하고 웹 페이지 속도를 높이는 5가지 방법이 있습니다.

1. 로드 순서 최적화

웹 페이지의 헤드 섹션 (</head></head> )은 요소를 미리 로드하는 데 사용됩니다. 웹 페이지의 기초가 여기에 있어야 하므로 웹 페이지를 로드할 때 흰색 화면이 사용자를 맞이하지 않습니다. 임베디드 CSS는 괜찮지만 여기에 JavaScript를 배치하는 것은 피해야 합니다.

머리 부분을 최적화했으면 몸을 최적화해야 합니다. 대부분의 웹 브라우저는 웹 페이지를 위에서 아래로 렌더링합니다. 중요도와 복잡성에 따라 스크립트 호출을 정렬해야 합니다. 시간이 걸리는 복잡한 스크립트와 함께 웹 페이지의 렌더링에 중요하지 않은 스크립트를 마지막으로 호출해야 합니다.

2. 코드 축소

코드를 축소하려면 코드를 다시 작성하고 공백, 주석, 쉼표, 줄 바꿈 등과 같은 불필요한 문자를 삭제해야 합니다. 이렇게 하면 코드가 더 간결해지고 압축되어 궁극적으로 스크립트 크기가 줄어들고 웹 페이지의 로딩 시간이 늘어납니다.

W3TC와 같은 플러그인 및 도구에는 테마의 JavaScript 및 CSS를 축소하는 모듈이 있습니다. 또는 JavaScript Minifier와 같은 무료 온라인 도구를 사용하여 스크립트 코드를 수동으로 축소할 수 있습니다.

3. JavaScript의 지연 및 비동기 로드 사용

웹 브라우저는 위에서 아래로 코드를 읽습니다. 스크립트 태그를 만나면 웹 페이지 로드를 중지하고 스크립트 파일을 읽습니다. 이렇게 하면 렌더링 속도가 느려집니다.

async 속성을 사용하여 웹 페이지와 병렬로 스크립트를 로드하고 사용 가능한 즉시 실행할 수 있습니다. 또는 defer 속성을 활용하여 스크립트 구문 분석을 연기할 수 있습니다. 즉, 웹 페이지와 병렬로 스크립트를 로드하지만 브라우저가 웹 페이지를 구문 분석할 때만 스크립트를 실행합니다.

시각적 요소를 렌더링하고 표시하는 데 사용되는 스크립트에서 async 또는 defer 특성을 사용하지 않는 것이 좋습니다. 이러한 속성에 해당하는 JavaScript 키워드는 async 및 await 키워드입니다. 웹 페이지에서 HTML 태그를 편집하지 않고도 자바스크립트를 비동기식으로 로드하는 데 사용할 수 있습니다.

4. JavaScript 시각적 요소를 CSS3로 교체

과거에는 CSS가 오늘날처럼 다재다능하지 않았습니다. 예를 들어 CSS 1.0 및 2.0에는 기본 컨트롤 및 슬라이더와 같은 UI 도구가 없었습니다.

그런 다음 CSS 3이 나왔습니다. 새로운 색상, 상자 그림자, 불투명도 등을 제공했습니다. JavaScript는 복잡한 사용자 인터페이스 컨트롤을 추가하는 데 적합합니다. 그러나 Javascript는 CSS보다 리소스에 더 무겁습니다.

따라서 과도한 양의 JavaScript를 사용하면 웹 사이트 속도가 상당히 느려집니다. 웹 페이지에서 이전 버전의 CSS가 무너진 부분을 해결하기 위해 JavaScript를 사용하고 있다는 사실을 알게 되면 이를 변경하고 가능한 모든 불필요한 JavaScript를 CSS로 교체해야 합니다. 이렇게 하면 웹 페이지를 더 빨리 로드할 수 있습니다.

5. 불필요한 모든 스크립트 제거

JS와 CSS의 목적은 기능을 웹 페이지로 확장하고 HTML이 할 수 없는 논리를 추가하는 것입니다. 그러나 HTML 5.3은 일부 CSS 및 JS 작업을 불필요하게 만드는 새로운 태그와 함께 도착했습니다. 스크립트 대신 HTML을 사용하면 자연스럽게 웹 페이지가 더 빨리 로드됩니다.

따라서 웹 사이트의 속도를 최적화하는 가장 좋은 방법은 충분히 활용되지 않는 스크립트를 모두 제거하는 것입니다. 완전히 불필요한 스크립트를 분석하고 제거해야 합니다. 다시 말하지만, Chrome DevTools의 Coverage 탭 또는 GTmetrix를 사용하여 웹 페이지에서 가장 활용도가 낮은 스크립트를 찾은 다음 제거할 수 있습니다.

불필요한 기능이나 태그를 모두 제거한 후 기능이 유사한 스크립트를 결합할 수 있습니다. 웹 페이지의 소스 코드를 조작하는 방법을 이미 알고 있다면 이것은 어려운 작업이 아닐 것입니다. 그러나 웹 디자인에 경험이 없거나 지식이 없는 사용자는 걱정할 필요가 없습니다. WordPress를 사용하면 웹사이트에서 스크립트를 쉽게 식별하고 다양한 최적화 플러그인을 사용하여 편집할 수 있습니다. 다음에 다룰 것입니다.

6. 플러그인을 사용하여 WordPress 웹사이트 최적화하기

다시 말하지만, WP 웹 사이트를 최적화하기 위해 프로그래밍에 대한 실무 지식이 필요하지 않습니다. 약간의 경험이 도움이 될지라도. 그럼에도 불구하고 스크립트 최적화를 위한 다양한 플러그인이 있습니다. 그들 중 일부는 AI를 사용하여 코드를 축소하고 로드 순서를 변경하며 활용도가 낮은 스크립트를 보다 효율적인 코드 및 스크립트로 대체합니다.

스크립트 최적화를 위한 최고의 플러그인은 다음과 같습니다.

• WP Rocket : 이것은 웹 최적화를 위한 가장 인기 있는 플러그인 중 하나입니다. 문제가 있는 스크립트를 자동으로 감지하고 수정할 수 있습니다. 빠른 캐싱, 참조, 압축 및 축소에 사용할 수 있습니다.
• Autooptimize : 이것은 필수가 아닌 스크립트를 연기 및 제거하고 인라인 CSS를 통합하고 스크립트, HTML 및 이미지를 축소할 수 있습니다. Autooptimize는 개방형 API 및 고급 옵션을 통해 고도로 사용자 지정할 수 있습니다.
• W3 Total Cache : 이 플러그인을 사용하려면 약간의 작업이 필요합니다. 스크립트를 제거하거나 편집하기 전에 수동으로 스크립트를 추적하고 식별해야 합니다. 대부분의 경우 이 플러그인은 WordPress 패키지에서 이미 사용할 수 있습니다.
• Async Javascript : WordPress에서 제공하는 오픈 소스 플러그인입니다. 이를 통해 렌더링 차단 JavaScript를 감지한 다음 지연하거나 비동기식으로 로드할 수 있습니다.

그렇다면 처음부터 플러그인을 권장하지 않은 이유는 무엇입니까? 불행히도 이러한 플러그인 중 일부는 비용이 듭니다. 예를 들어, Autooptimize의 비용은 연간 $49입니다. 합리적인 비용이지만 호스팅 및 기타 응용 프로그램 및 플러그인에 이미 많은 돈을 지불하고 있는 사람들에게는 이상적이지 않을 수 있습니다.

그럼에도 불구하고 플러그인을 사용하든 수동으로 스크립트를 찾는 것과 상관없이 축소, 비동기 로딩 및 로드 순서와 같은 개념을 이해해야 합니다. 스크립트 중 하나가 실패할 경우 로드 문제를 더 쉽게 해결할 수 있습니다.