워드프레스에서 리소스를 그룹화하고 최소화하는 방법

가능한 한 최고의 성능을 내는 것은 웹사이트를 관리하는 모든 사람의 꿈입니다. WordPress에서 리소스를 그룹화하고 축소하는 것은 이를 위해 할 수 있는 최선의 방법 중 하나이지만 실제로 매우 어려울 수 있습니다. 모든 리소스(css 및 js 파일 주로)를 그룹화하면 개발자가 아닌 경우 웹사이트에 충돌이 발생할 수 있습니다.

WP Speed of Light는 정말 친숙한 대시보드와 더불어 사이트 로딩 속도를 빠르게 해주는 다양한 옵션을 제공하기 때문에 워드프레스 사이트의 성능을 끌어올리는 최고의 솔루션이며, 이 옵션 중 하나는 리소스를 그룹화하고 압축하는 것입니다. 그룹화 및 압축 과정에 개별 파일 포함/제외 기능은 충돌없이 사용자가 원하는 최적화를 수행할 수 있는 열쇠입니다.

이 블로그 포스트에서는 예제용 워드프레스 사이트를 사용할 것이며 모든 설정을 구성하는 과정을 보다 쉽게 배우게 될 것입니다.

워드프레스 JS 및 CSS 압축하는 방법

워드프레스의 JS 및 CSS 압축을 수행하는 방법을 배우려면 먼저 압축 해제 수단이 무엇인지 알아야 합니다. “압축 해제 란 브라우저에서 리소스를 처리하는 방법에 영향을 주지 않고 불필요하거나 중복 된 데이터를 제거하는 프로세스를 의미합니다. 예를 들어 코드 주석 및 형식 지정, 사용되지 않는 코드 제거, 더 짧은 변수 및 함수 이름 사용 등이 있습니다.”.

이제 수행 할 작업은 변경 사항을 확인하기 위해 페이지에서 속도 테스트를 수행하는 것입니다. 이 예제에서는 woocommerce 및 일부 제품이있는 사이트를 사용하므로 처음에는 약간 느리게로드됩니다.

예, 페이지를 로드하는 데 2.79초가 걸렸습니다. 나쁘지는 않지만 더 나아질 수 있습니다. JS와 CSS를 최소화하고 차이점을 확인해 보세요. WP Speed of light > 속도 향상 > 그룹 및 최소화로 이동하면 축소할 수 있는 모든 옵션이 있는 메뉴가 표시됩니다. 플러그인 무료 버전에는 그룹 및 최소화 옵션이 포함되어 있지만 시각적 파일 제외는 PRO 애드온 버전에서만 사용할 수 있습니다.

PRO 애드온 옵션은 다음과 같습니다: 인라인 스크립트 제외(최소화에서 인라인 스크립트 제외), 스크립트를 바닥글(footer)로 이동(모든 최소화된 스크립트를 바닥글(footer)로 이동하여 사이트 속도를 높임), 폰트 및 Google Fonts 그룹화(로컬 폰트와 Google Fonts를 단일 파일로 그룹화하여 더 빠르게 제공) 및 고급 파일 제외.
 
볼 수 있듯이 JS, CSS 및 HTML을 최소화하는 옵션이 있습니다. 이제 이러한 옵션을 활성화하고 저장 버튼을 클릭하면 모든 리소스가 즉시 최소화됩니다. 고급 구성으로 인해 문제가 발생할 수 있지만 일부 코드 및 파일(Pro 애드온 포함)을 제외하면 모든 것이 수정될 수 있습니다.

이제 개발 작업에 몇 시간 걸리던 것이 단 몇 초 만에 완료됩니다.

다음 단계, WordPress CSS 및 JS 최적화

이 플러그인을 사용하면 대시보드의 그룹 옵션을 활성화하여 WordPress가 CSS 및 JS를 최적화하도록 할 수 있습니다. WP Speed of Light > 속도 향상 > 그룹 및 압축으로 이동하면 CSS 및 JS를 그룹화하는 옵션이 있는 대시보드를 볼 수 있습니다.

이 옵션들을 사용하면 다음과 같은 작업을 할 수 있습니다:

• JS 그룹화: 여러 JavaScript 파일을 단일 파일로 그룹화하여 HTTP 요청 수를 최소화합니다
• CSS 그룹화: 여러 CSS 파일을 단일 파일로 그룹화하여 HTTP 요청 수를 최소화합니다.

HTTP 요청: 사용자가 사이트에서 무언가를 선택하거나 다른 페이지로 이동할 때마다 서버에 전송되는 요청이므로 이러한 요청을 줄이면 로드 시간이 줄어듭니다.

웹사이트에서 그룹화할 수 있는 파일과 스크립트의 수를 확인하려면 브라우저 콘솔(오른쪽 클릭 > 검사 또는 F12)을 열고 네트워크 패널을 여십시오.

그런 다음 유형별로 로드된 모든 파일을 나열할 수 있습니다. 이 예에서는 JS 파일 목록만 클릭했습니다.

이제 이 설정에 있으므로 그룹 옵션 (그룹 CSS 및 그룹 JS)을 활성화하고 저장을 클릭하십시오. 이러한 옵션은주의해서 사용해야하며 충돌이 발생할 수 있으므로 페이지를 테스트해야합니다.

심각하게 받아들이고 글꼴 두께를 최적화합시다

뭐라고요? 다른 최적화 방법도 있다고요? 예! 글꼴 두께를 최적화할 수 있으며 설정에서 옵션을 활성화하는 것만큼 쉽습니다. WP Speed of Light > 속도 향상 > 그룹 및 압축 > 글꼴 및 Google 글꼴 그룹 옵션으로 이동하세요.
글꼴 및 Google 글꼴 그룹 옵션을 사용하면 여러 글꼴을 단일 파일로 그룹화하여 더 빠르게 제공할 수 있습니다. 대부분의 워드프레스 테마와 레이아웃은 기본적으로 모든 변형(일반, 굵게, 기울임꼴 등)과 함께 2개 이상의 글꼴과 함께 제공되므로 매우 유용합니다.

Just enable that option, click on save and all the fonts will be grouped.

이제 리소스를 최소화하고 그룹화하는 모든 옵션을 활성화했으므로 사이트 로드 시간에 차이가 있어야 합니다. 속도를 확인해 보겠습니다.

정말 대단하군요! 2.8초에서 0.56초로 감소했습니다! 이 게시물의 처음에 말씀드린 것처럼 로드 시간을 더 개선할 수 있습니다 ;)

파일 최소화 제외를 사용하는 방법

최소화가 사이트에 문제를 일으킬 수 있습니다. 주로 구문 오류 또는 유사한 변수, 클래스 이름에 오류가 포함된 특정 파일을 그룹화할 때 발생합니다. 이것이 “파일 최소화 제외” 옵션이 있는 이유입니다. 이 옵션을 사용하면 최소화 및 그룹화 과정에서 파일을 제외할 수 있습니다. WP Speed of Light > 속도 향상 > 그룹 및 최소화로 이동하면 고급 파일 제외 옵션을 볼 수 있습니다.

고급 파일 제외를 사용하려면 먼저 옵션을 활성화하고 스캔 실행을 클릭하여 스캔을 실행해야 합니다.

  웹사이트에 로드된 스크립트를 나열하려면 WP Speed of Light가 해당 폴더를 스캔하여 나열해야 합니다. 일반적으로 모든 항목은 /wp-content 폴더에 포함되어 있으며 모든 플러그인과 테마를 그룹화합니다. 해당 폴더(적어도)를 선택하고 “지금 스캔”

스캔이 완료되면 스캔을 실행하고 최종적으로 결과 보기를 클릭합니다.

유형 (모두, JS, CSS, 글꼴)별로 분류된 파일 목록이 아래에 표시됩니다. 파일 그룹화 및 축소를 활성화할 때 문제를 일으키는 파일을 식별한 경우 간단한 ON/OFF 스위처를 사용하여 여기에서 제외할 수 있습니다.

이렇게 하면 파일을 제외하고 리소스를 최소화할 때 존재할 수 있는 문제를 쉽게 해결할 수 있습니다. 그룹화 및 최소화 프로세스는 여전히 일부 작업이 필요하며 특히 테스트가 필요하지만 확실히 그만한 가치가 있으며 항상 작동 방식을 테스트할 수 있습니다. 속도 테스트를 직접 실행하여 WP Speed of Light.
 
앞으로 나아가서 WP Speed of Light을(를) 사용해 보십시오: https://www.joomunited.com/wordpress-products/wp-speed-of-light