WordPress에서 사용하지 않는 CSS를 제거하는 방법 (올바른 방법)

최근 게시물 게시판 wordpress WordPress에서 사용하지 않는 CSS를 제거하는 방법 (올바른 방법)

  • 사이트가 더 빨리로드되도록 WordPress에서 사용하지 않는 CSS를 제거 하시겠습니까?

    사용하지 않는 CSS는 WordPress 테마 또는 실제로 필요하지 않은 플러그인에 의해 추가 된 CSS 코드입니다. 이 CSS 코드를 제거하면 WordPress 성능 그리고 사용자 경험.

    이 기사에서는 웹 사이트를 손상시키지 않고 WordPress에서 사용하지 않는 CSS를 쉽게 제거하는 방법을 보여줍니다.

    WordPress에서 사용하지 않는 CSS는 무엇입니까?

    WordPress에서 사용하지 않는 CSS는 CSS 코드 웹 사이트에로드되지만 실제로는 페이지를 표시하는 데 필요하지 않습니다.

    추가 코드는 방문자의 브라우저가 페이지를 렌더링하는 데 시간이 조금 더 걸리게하여 나쁜 사용자 경험을 만듭니다. 로딩 시간이 느려도 검색 순위, 그 결과 사이트에 대한 트래픽이 줄어 듭니다.

    사용하지 않는 CSS 코드가 웹 사이트에 미치는 영향을 확인할 수 있습니다. Google Pagespeed Insights. 로드 시간에 영향을 미치는 CSS 파일에 대한 세부 정보와 함께 ‘사용하지 않는 CSS 제거’섹션이 표시됩니다.

    Google Pagespeed Insights에서 사용되지 않는 CSS 코드 문제

    WordPress에 사용되지 않는 CSS가 추가 된 이유는 무엇입니까?

    CSS를 사용하여 WordPress 웹 사이트. WordPress 테마에는 CSS가 포함되어 있으며 대부분이 단일 style.css 파일에 포함되어 있습니다.

    테마의 CSS 외에도 WordPress 플러그인은 자체 CSS도로드합니다. 예를 들어 WooCommerce 제품을 표시하기 위해 CSS를로드합니다. 페이지 빌더 플러그인 사용자 정의 페이지를 표시하기 위해 자체 CSS를 추가하고 양식 작성기 플러그인 양식 스타일을 지정하는 CSS가 포함됩니다.

    그런 다음 웹 글꼴, 아이콘 글꼴 및 자체 CSS 파일을 추가해야하는 기타 요소.

    일반적으로 이러한 파일은 매우 작고 빠르게로드됩니다. 그러나 WordPress 사이트에 많은 항목이 있으면 효과가 더해져 사이트 속도에 눈에 띄는 영향을 미칠 수 있습니다.

    WordPress에서 사용하지 않는 CSS를 제거하는 방법?

    WordPress 웹 사이트에서 사용하지 않는 CSS를 줄일 수있는 몇 가지 방법이 있습니다.

    그러나 WordPress에서 사용하지 않는 모든 CSS를 완전히 제거하는 것은 매우 어려운 작업입니다. 방법 때문에 WordPress는 뒤에서 작동합니다., 사용하지 않는 일부 CSS는 찾아서 제거하기 어려울 수 있습니다.

    즉, 사용하지 않는 CSS를 제거하는 두 가지 방법을 보여주고 가장 적합한 CSS를 선택할 수 있습니다.

    방법 1. WP Rocket을 사용하여 WordPress에서 사용하지 않는 CSS 제거

    이 방법은 더 쉽고 초보자에게 권장됩니다. 사용하지 않는 CSS의 대부분을 제거하는 것을 포함하여 WordPress 웹 사이트에서 CSS 파일의 전반적인 전달을 크게 향상시킵니다.

    더 쉽고 사용자에게 더 나은 경험을 제공한다는 주요 목표를 달성하기 때문에 초보자에게 최고의 솔루션이라고 생각합니다. 즉, 웹 사이트가 속도 테스트 도구에서 빠르게로드되고 사용자에게도 빠른 느낌을줍니다.

    먼저 설치하고 활성화해야합니다. WP 로켓 플러그인. 자세한 내용은 단계별 가이드를 참조하십시오. WordPress 플러그인 설치 방법.

    활성화되면 다음을 방문해야합니다. 설정»WP 로켓 페이지에서 ‘파일 최적화’탭으로 전환합니다.

    WP Rocket의 파일 최적화

    다음으로 CSS 파일 섹션까지 아래로 스크롤해야합니다. 여기에서 ‘최적화 CSS 전달’옵션 옆에있는 확인란을 선택해야합니다.

    WP Rocket에서 CSS 전달 최적화

    이 옵션은 웹 사이트의 보이는 부분을 표시하는 데 필요한 CSS 코드 만 포함하는 CSS 파일을 생성합니다. 먼저 해당 파일을로드하고 방문자에게 페이지를 표시 한 다음 지연로드라는 기술을 사용하여 다른 CSS 파일을로드합니다.

    이것을 제거함으로써 렌더링 차단 CSS, 페이지가 표시되기 전에 모든 CSS 파일을로드해야하는 경우보다 사용자가 웹 사이트를 훨씬 더 빠르게 볼 수있게됩니다.

    ‘CSS 전달 최적화’옵션을 활성화 한 후 변경 사항 저장 버튼을 클릭하고 WP Rocket이 모든 게시물 및 페이지에 필요한 CSS 파일을 생성 할 때까지 기다립니다. 또한 자동으로 캐시를 지우다 귀하의 웹 사이트를 위해.

    완료되면 Google Pagespeed Insights를 사용하여 웹 사이트 성능을 다시 테스트 할 수 있습니다.

    성능 향상을위한 추가 파일 전송 조정

    WP Rocket을 사용하면 정적 파일에서 쿼리 문자열을 제거하고, Google Fonts 파일을 결합하고, HTML을 축소 할 수 있습니다. 이러한 모든 조정은 전체 속도에 약간의 개선을 추가하여 방문자에게 더 빠른 로딩 경험을 제공합니다.

    기본 파일 최적화

    CSS 파일을 축소하고 결합하는 옵션도 표시됩니다. 이러한 옵션은 HTTP 요청을 줄이고 추가 속도 향상을 제공합니다.

    그러나 이러한 설정을 활성화 한 후에는 웹 사이트가 손상되지 않았는지주의 깊게 확인해야합니다.

    CSS 파일 축소 및 결합

    또한 동일한 최적화를 자바 스크립트 웹 사이트의 파일. 이를 축소 및 결합하여 단일 파일로 사용하고 JavaScript 파일로드를 지연하여 성능을 향상시킬 수 있습니다.

    JavaScript 전달 최적화

    자세한 내용은에 대한 단계별 자습서를 참조하십시오. WordPress에서 WP Rocket을 올바르게 설정하는 방법.

    방법 2. 자산 정리를 사용하여 WordPress에서 사용하지 않는 CSS 제거

    이 방법은 약간 고급이지만 매우 강력하며 WordPress 웹 사이트의 모든 페이지에서 사용하지 않는 CSS를 쉽게 제거 할 수 있습니다.

    그러나 약간 복잡하고 웹 사이트 기능과 모양을 철저히 테스트하여 손상된 부분이 없는지 확인해야합니다.

    먼저 설치하고 활성화해야합니다. 자산 정리 플러그인. 자세한 내용은 단계별 가이드를 참조하십시오. WordPress 플러그인 설치 방법.

    활성화되면 다음을 방문해야합니다. 자산 정리»설정 페이지를 열고 테스트 모드 탭으로 전환합니다. 여기에서 ‘테스트 모드 활성화’옵션을 켜야합니다.

    테스트 모드 활성화 옵션

    이를 통해 웹 사이트 방문자에게 영향을주지 않고 다양한 설정을 시도하고 관리자로 테스트 할 수 있습니다.

    그 후, 당신은 방문해야합니다 자산 정리»CSS / JS 관리자 페이지. 여기에서 원치 않는 CSS 및 JavaScript 파일을 페이지 단위로 언로드 할 수 있습니다.

    CSS / JS 관리자

    먼저 홈페이지를 가져와 해당 페이지에로드 된 모든 CSS 및 JavaScript 파일을 표시합니다.

    아래로 스크롤하여로드 된 파일을 검토해야합니다. 필요하지 않은 파일이 있으면 해당 특정 페이지, 게시물 유형 또는 사이트 전체에 대해 언로드 할 수 있습니다.

    파일 언로드

    플러그인을 사용하면 여기에서 특정 게시물이나 페이지를 선택할 수도 있고, 평소처럼 게시물이나 페이지를 편집하여 동일한 옵션에 액세스 할 수도 있습니다.

    포스트 편집 화면에서 포스트 에디터 바로 ​​아래에 자산 정리 상자를 찾을 수 있습니다.

    포스트 에디터 내 자산 정리

    플러그인은 방문자가 웹 사이트에서이 페이지를 볼 때로드 된 모든 파일과 자산을 자동으로 가져 와서 나열합니다. 그런 다음 해당 페이지에서 필요하지 않은 사용하지 않는 CSS 또는 JavaScript 파일을 간단히 언로드 할 수 있습니다.

    특정 페이지에 대한 파일 언로드

    중대한: 사용하지 않는 CSS 또는 JavaScript를 제거한 후 웹 사이트를 테스트하여 모든 것이 제대로 작동하는지 확인하는 것을 잊지 마십시오.

    사용하지 않는 CSS 및 JavaScript 파일의 언로드 및 제거가 완료되면 플러그인의 설정 페이지로 돌아가서 ‘테스트 모드’를 끌 수 있습니다.

    변경 사항을 저장하려면 모든 설정 업데이트 버튼을 클릭하는 것을 잊지 마십시오.

    이제 Google Pagespeed Insights를 사용하여 웹 사이트를 테스트하여 사용되지 않은 CSS 알림의 변경 사항을 확인할 수 있습니다.

    WordPress에서 CSS 감소

    이 기사가 WordPress에서 사용하지 않는 CSS를 쉽게 제거하는 방법을 배우는 데 도움이 되었기를 바랍니다. 에 대한 전체 가이드를 따를 수도 있습니다. 웹 사이트 구축에 드는 비용, 목록을 확인하십시오. 최고의 관리 WordPress 호스팅.

    이 기사가 마음에 들면 구독하십시오. 유튜브 채널 WordPress 비디오 자습서 용. 당신은 또한 우리를 찾을 수 있습니다 트위터페이스 북.

    게시물 WordPress에서 사용하지 않는 CSS를 제거하는 방법 (올바른 방법) 처음 등장 WPBeginner.

    Source link

    신고하기
  • 답변은 로그인 후 가능합니다.