WordPress 사이트 및 페이지 빌더 Elementor를 사용하여 Google PageSpeed Insights에서 100/100을 얻는 방법
나는 https://davidloor.com/과 WordPress을 사용하여 내 웹사이트Elementor를 구축하기로 결정했고 아래에서 설명할 권장 사항에 따라 다음 스크린샷에서 볼 수 있듯이 내 웹사이트는 100/100을 얻습니다.
이 자습서에서는 WordPress 사이트가 실행 중이라고 가정합니다.
Cloudflare에서 무료 계정 만들기
"Cloudflare는 인터넷에서 작동하는 가장 큰 네트워크 중 하나입니다. 사람들은 웹사이트와 서비스의 보안과 성능을 향상시키기 위해 Cloudflare 서비스를 사용합니다."내 웹 사이트에 사용하고 있는 무료 버전이 있습니다.
여기에서 무료 계정을 만들 수 있습니다: https://dash.cloudflare.com/sign-up
Cloudflare에 대한 자세한 내용은 https://www.cloudflare.com/learning/what-is-cloudflare/에서 자체 문서를 참조하세요.
계정 등록을 완료한 후 https://dash.cloudflare.com/profile/api-tokens 로 이동하여 Global API Key에서 View를 클릭하고 비밀번호를 입력하고 다음 단계에서 사용할 키를 복사합니다.
무료 WordPress 플러그인 설치
WordPress 사이트에 두 개의 플러그인을 설치해야 합니다. WordPress에 플러그인을 설치하는 방법을 모르신다면 여기Link를 방문하셔서 노하우를 얻으시기 바랍니다.
1. 자동 최적화
플러그인은 여기Link에서 다운로드할 수 있습니다.
이 페이지에서https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize 모든 옵션을 활성화하되 다음 항목은 비활성화 상태로 유지합니다.
이 페이지에서 https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize_imgopt 모든 옵션을 활성화합니다.
이 페이지https://YOUR-SITE/wp-admin/options-general.php?page=autoptimize_extra에서 모든 확인란을 활성화하고 Google 글꼴을 사용하지 않는 경우 Google 글꼴 제거 옵션을 선택하고 저장을 클릭합니다.
2. WP Cloudflare 슈퍼 페이지 캐시
플러그인은 여기Link에서 다운로드할 수 있습니다.
이 페이지http://YOUR-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index에서 Cloudflare 계정을 만들 때 사용한 이메일과 위에서 설명한 대로 받은 API 키를 입력하세요.
이 페이지에서https://YOUR-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index 페이지를 Cloudflare에 캐시할 수 없는 경우 디스크의 캐시를 사용할 수 있도록 대체 페이지 캐시 활성화 옵션이 활성화되어 있는지 확인하세요.
3. Astra Theme 및 Elementor 플러그인에서 기본 글꼴 비활성화
테마의 functions.php 파일에 다음 필터를 배치합니다.
/**
* Disable default astra fonts.
*/
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
* Disable astra google fonts.
*/
add_filter('astra_google_fonts_selected', function($fonts) {
return [];
});
/**
* Disable google fonts from elementor.
*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
2022년 2월 12일 업데이트
astra 테마에서 hello elementor 테마https://elementor.com/hello-theme/로 전환했는데 모바일에서도 100/100이 되는 데 도움이 되었습니다.
Reference
이 문제에 관하여(WordPress 사이트 및 페이지 빌더 Elementor를 사용하여 Google PageSpeed Insights에서 100/100을 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/davo20019/how-to-get-100-100-on-google-pagespeed-insights-with-a-wordpress-site-and-the-page-builder-elementor-1g48텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)