WordPress에서 JavaScript 및 CSS 렌더링 차단을 제거 하시겠습니까?
Google PageSpeed 인사이트에서 웹 사이트를 테스트하는 경우 스크립트 및 CSS 렌더링 블록을 제거하라는 제안이 표시 될 것입니다. 그러나 WordPress 웹 사이트에서이를 수행하는 방법에 대한 세부 정보는 제공하지 않습니다.
이 기사에서는 WordPress에서 JavaScript 및 CSS 렌더링 차단을 쉽게 수정하여 Google PageSpeed 점수를 향상시키는 방법을 보여줄 것입니다.
하지만 전에는 함께 알아 봅시다 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면.
JavaScript 및 CSS Render-Blocking이란 무엇입니까?
JavaScript 및 CSS 렌더링 차단은 웹 사이트에서 웹 페이지를로드하기 전에 표시하지 못하게하는 파일입니다.
모든 WordPress 웹 사이트에는 웹 사이트의 프런트 엔드에 JavaScript 및 CSS 파일을 추가하는 테마와 플러그인이 있습니다. 이러한 스크립트는 웹 사이트의 페이지로드 시간을 증가시킬 수 있으며 페이지 렌더링을 차단할 수도 있습니다.
사용자의 브라우저는 페이지에 나머지 HTML 코드를로드하기 전에 이러한 스크립트와 CSS를로드해야합니다. 즉, 연결 속도가 느린 사용자는 페이지를 보려면 몇 밀리 초를 더 기다려야합니다.
이러한 스크립트 및 스타일 시트를 JavaScript 및 CSS 렌더링 차단기라고합니다.
Google PageSpeed 점수 100 점을 얻으려는 웹 사이트 소유자는이 만점을 달성하기 위해이를 수정해야합니다.
Google PageSpeed 점수는 무엇입니까?
Google PageSpeed Insights는 웹 사이트 소유자가 웹 사이트를 최적화하고 테스트 할 수 있도록 Google에서 만든 속도 테스트 도구입니다. 이 도구는 Google의 속도 가이드 라인에 따라 웹 사이트를 테스트하고 웹 사이트 페이지로드 시간을 개선하기위한 제안을 제공합니다.
웹 사이트가 통과하는 규칙 수에 따라 점수를 표시합니다. 대부분의 웹 사이트는 50 ~ 70 개입니다. 그러나 일부 웹 사이트 소유자는 100 개에 도달해야한다는 압박감을 느낍니다.
Google PageSpeed에서 "100"점수가 정말로 필요합니까?
목적은 Google PageSpeed 통계 웹 사이트의 속도와 성능을 개선하기위한 지침을 제공하는 것입니다. 이 규칙을 엄격히 따를 필요는 없습니다.
속도는 Google이 웹 사이트 순위를 결정하는 데 도움이되는 많은 SEO 측정 항목 중 하나 일뿐입니다. 속도가 중요한 이유는 사용자 경험 당신의 웹 사이트에.
더 나은 사용자 경험을 위해서는 속도 이상의 것이 필요합니다. 유용한 정보도 제공해야합니다. 더 나은 사용자 인터페이스 텍스트, 이미지 및 비디오로 콘텐츠를 참여시킵니다.
당신의 목표는 훌륭한 사용자 경험을 제공하는 빠른 웹 사이트를 만드는 것이어야합니다.
최근 BlogPasCher 재 설계 동안 우리는 속도와 사용자 경험 개선에 중점을 두었습니다.
Google Pagespeed 규칙을 제안으로 사용하는 것이 좋습니다. 사용자 환경을 손상시키지 않고 쉽게 구현할 수 있다면 좋습니다. 그렇지 않다면 가능한 한 많이 노력하고 나머지는 걱정하지 마십시오.
이제 WordPress에서 JavaScript 및 CSS 렌더링 차단을 수정하기 위해 수행 할 수있는 작업을 살펴 보겠습니다.
이 문제를 해결하는 두 가지 방법을 다룰 것입니다. 웹 사이트에서 가장 잘 작동하는 것을 선택할 수 있습니다.
1. WP Rocket으로 렌더링 차단 스크립트 및 CSS 수정
이 방법에서는 WP Rocket 플러그인을 사용합니다. 이것은 최고의 WordPress 캐싱 플러그인 기술 또는 복잡한 기술을 설정하지 않고도 웹 사이트의 성능을 빠르게 향상시킬 수 있습니다.
먼저 WP Rocket 플러그인을 설치하고 활성화해야합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요..
WP Rocket은 최적의 설정으로 캐시를 활성화합니다. 기본적으로 JavaScript 및 CSS 최적화 옵션을 활성화하지 않습니다. 이러한 최적화는 잠재적으로귀하의 웹사이트의 모습 또는 특정 기능 때문에 플러그인에서 해당 설정을 옵션으로 활성화할 수 있습니다.
이렇게하려면 계속 진행해야합니다. 설정»WP 로켓을 클릭 한 다음 '파일 최적화 '. 거기에서 섹션까지 아래로 스크롤하십시오. CSS 파일 그리고 상자를 체크 CSS 축소, CSS 파일 결합 et CSS 전달 최적화.
레마르크 : WP Rocket은 모든 CSS 파일을 축소하고 결합하여 웹 사이트의 보이는 부분에 필요한 CSS만 로드하려고 시도합니다. 이것은 다음에 영향을 줄 수 있습니다.귀하의 웹사이트의 모습, 따라서 여러 기기와 화면 크기에서 웹사이트를 철저하게 테스트해야 합니다.
그런 다음 섹션으로 스크롤해야합니다. JavaScript 파일. 여기에서 최대 성능 향상을위한 모든 옵션을 선택할 수 있습니다.
CSS 파일과 마찬가지로 JavaScript 파일을 축소하고 결합 할 수 있습니다.
WordPress에서 파일을 업로드하지 못하도록 할 수도 있습니다. jQuery 마이그레이션. 이것은 이전 버전의 jQuery를 사용하는 플러그인 및 테마에 대한 호환성을 제공하기 위해 WordPress에서로드하는 스크립트입니다.
대부분의 웹 사이트에는이 파일이 필요하지 않지만 웹 사이트를 확인하여 제거해도 테마 나 플러그인에 영향을주지 않는지 확인하는 것이 좋습니다.
그런 다음 조금 더 아래로 스크롤하여 옵션을 확인하십시오. 'JavaScript로드 지연'과'jQuery의 안전 모드'.
이러한 옵션은 필수적이지 않은 JavaScript의로드를 지연시키고 jQuery 안전 모드를 사용하면 jQuery를 인라인으로 사용할 수있는 테마에 대해로드 할 수 있습니다.
설정을 저장하려면 변경 사항 저장 버튼을 클릭해야합니다.
그런 다음 Google Page Speed Insights로 웹 사이트를 다시 테스트하기 전에 WP Rocket에서 캐시를 지울 수도 있습니다.
테스트 웹 사이트에서 데스크톱에서 100 % 점수를 달성 할 수 있었고 렌더 멈춤 문제는 모바일 및 데스크톱 점수 모두에서 해결되었습니다.
2. autoptimize로 JavaScript 및 CSS 렌더링 차단 수정
이 방법의 경우 웹 사이트의 CSS 및 JS 파일 전달을 개선하기 위해 특별히 제작 된 다른 플러그인을 사용합니다. 이 플러그인은 작업을 완료하지만 WP Rocket이 제공하는 다른 강력한 기능이 없습니다.
가장 먼저 할 일은 플러그인을 설치하고 활성화하는 것입니다 Autoptimize. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오.
활성화 할 때 페이지를 방문해야합니다. 설정»Autoptimize 플러그인 설정을 구성합니다.
먼저 'JavaScript 코드 최적화'블록 아래 자바 스크립트 옵션 . 'Aggregate all linked JS-files'옵션이 선택되어 있지 않은지 확인하십시오.
그런 다음 해당 영역으로 스크롤하십시오. CSS 옵션 옵션 ' CSS 코드를 최적화 하시겠습니까?'. 옵션 '링크 된 모든 CSS 파일 집계'확인되지 않았습니다.
이제 '변경 사항 저장 및 캐시 지우기'버튼을 클릭하여 설정을 저장할 수 있습니다.
Page Speed Insights로 웹 사이트를 테스트하십시오. 데모 웹 사이트에서 이러한 기본 설정으로 렌더 멈춤 문제를 해결할 수있었습니다.
여전히 렌더 차단 스크립트가있는 경우 플러그인의 설정 페이지로 돌아가 자바 스크립트 및 CSS 옵션을 확인해야합니다.
예를 들어 플러그인에 JS 인라인을 포함하고 seal.js 또는 jquery.js와 같이 기본적으로 제외되는 스크립트를 제거하도록 허용 할 수 있습니다.
'변경 사항 저장 및 캐시 지우기'버튼을 클릭하여 변경 사항을 저장하고 플러그인 캐시를 지 웁니다.
완료되면 Page Speed Insights 도구로 웹 사이트를 다시 확인하십시오.
어떻게 작동합니까?
Autoptimize는 모든 JavaScript 및 CSS 파일을 번들로 제공합니다. 그 후 그는 축소 된 CSS 및 JavaScript 파일 동기화되거나 지연된 방식으로 웹 사이트의 캐시 된 사본을 제공합니다.
이를 통해 차단 문제를 해결할 수 있습니다. 렌더링 스크립트 및 차단 스타일. 그러나 이는 성능이나 성능에 영향을 미칠 수도 있다는 점을 명심하십시오.귀하의 웹사이트의 모습.
도움
플러그인과 WordPress 테마가 JavaScript 및 CSS를 사용하는 방법에 따라 모든 문제를 완전히 해결하기가 어려울 수 있습니다. 블로킹 의 JavaScript 및 CSS 렌더링.
위의 도구가 도움이 될 수 있지만 플러그인이 제대로 작동하려면 우선 순위가 다른 특정 스크립트가 필요할 수 있습니다. 이 경우 위의 솔루션은 이러한 플러그인의 기능을 손상 시키거나 예기치 않게 작동 할 수 있습니다.
Google은 여전히 CSS 전달 최적화와 같은 몇 가지 문제를 보여줄 수 있습니다. WP Rocket을 사용하면 WordPress 테마를 완벽하게 표시하는 데 필요한 중요한 CSS를 수동으로 추가하여이 문제를 해결할 수 있습니다.
그러나 표시해야 할 CSS 코드를 아는 것은 매우 어려울 수 있습니다.
테마와 프리미엄 워드 프레스 플러그인도 만나보세요
다른 WordPress 플러그인을 사용하여 현대적인 모양을 제공하고 블로그 또는 웹 사이트의 그립을 최적화 할 수 있습니다.
우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.
1. WordPress 속도 최적화 플러그인
여러 웹 사이트 속도 최적화 플러그인을 관리하는 데 어려움을 겪고 있습니까? 웹 사이트의 실행 속도를 방해하는 것이 걱정 되십니까? 그러면이 WordPress 플러그인이 모든 걱정에 대한 궁극적 인 솔루션이 될 것입니다.
이 플러그인은 거의 6-8 개의 서로 다른 WordPress 플러그인의 기능을 제공하도록 설계되었습니다. 페이지 로딩에서 현저한 개선을보기 위해 설치하고 구성하기 만하면됩니다.
우리는 이것이 캐시 플러그인 또는 CDN, 그러나 그것이 제공하는 결과는 그럼에도 불구하고 인상적입니다. 이 WordPress 플러그인이 무엇을 할 수 있는지 확인하려면 주저하지 마십시오.
2. 소셜 공유 및 로커 프로
Social Share & Locker Pro 플러그인은 웹 사이트가 소셜 미디어에서 더 잘 보이도록 설계되었습니다. 몇 번의 클릭만으로 소셜 아이콘의 위치를 설정하거나 제공하는 소셜 네트워크 중 하나에서 공유하도록 요구하여 콘텐츠를 잠글 수 있습니다.
10 사전 정의 테마가 있으며 가장 일반적인 요구 사항을 충족해야합니다. 그녀의 모든 테마는 Retina와 놀라운 일입니다.
또한 Social Share & Locker Pro를 사용하면 소셜 네트워크의 전체 이름을 표시하거나 아이콘 만 표시 할 수 있습니다. 디자인, 사용 가능한 공간 또는 희망 사항에 따라 다릅니다.
3. WordPress의 PDF 이미지 라이트 박스
워드프레스 PDF 라이트박스는 워드프레스 플러그인 PDF 파일 뷰어를 만들 수 있습니다. PDF 뷰어는 PDF로 저장할 수있는 사진 모음입니다.
이 확장을 사용하면 원하는만큼 PDF 뷰어를 만들 수 있습니다. 각 뷰어에 대해 관리자는 다음과 같은 몇 가지 옵션을 설정할 수 있습니다.
- 표지 이미지 : 사용자가 만든 PDF의 첫 페이지로 추가됩니다.
- 뷰어 당 최대 이미지
- 워터 마크 이미지 : PDF 페이지에 적용
- 이메일로 보내기: 이 기능이 활성화되면, 연락처 양식 이미지 갤러리 바로 뒤에 제공됩니다. 이 양식을 통해 사용자는 생성된 PDF를 누구에게나 이메일로 보낼 수 있습니다.
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- 웹 사이트의 SEO 개선을위한 10 워드 프레스 플러그인
- 카테고리를 최적화하는 5 프리미엄 WordPress 플러그인
- 통화 통화를 변환하는 10 WordPress 플러그인
- 10 워드 프레스 플러그인은 웹 사이트에 오디오 플레이어를 통합하는
결론
여기 ! 이 튜토리얼은 끝났습니다. 이 기사가 WordPress에서 JavaScript 및 CSS 렌더링 차단을 수정하는 방법을 배우는 데 도움이 되었기를 바랍니다. 당신은 또한 우리를 볼 수 있습니다 초보자를위한 WordPress 성능 속도를 높이는 방법에 대한 궁극적 인 가이드.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.
주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유. 그리고 제안이나 의견이 있으면 섹션에 남겨주세요. commentaires.
...
