WordPress 사이트 및 페이지 빌더 Elementor를 사용하여 Google PageSpeed ​​Insights에서 100/100을 얻는 방법

WordPress, 페이지 빌더 Elementor 및 Astra 테마로 구축된 웹 사이트에서 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 모든 옵션을 활성화하되 다음 항목은 비활성화 상태로 유지합니다.
  • 로그인한 편집자/관리자도 최적화하시겠습니까?
  • HTML 주석을 유지하시겠습니까?

  • 이 페이지에서 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이 되는 데 도움이 되었습니다.

    좋은 웹페이지 즐겨찾기