GeneratePress 테마 구글 폰트 로컬로 사용하여 속도 개선

최근 GeneratePress 테마로 사용 중인 사이트의 구글 페이지 인사이트 성능 점수에 CLS 개선 권고가 많이 뜨고 있어서 현상을 살펴봤습니다
CLS는 페이지 로딩에 따른 크기 변화가 현저히 많아지면 그만큼 사용자가 로딩 시 실수로 무효 광고를 클릭하는 일이 잦아지기 때문에 구글 입장에서는 반가운 일이 아닙니다

외부 구글 폰트를 사용하게 되면 로딩 시 마다 외부 구글 서버에서 구글 폰트를 받아서 쓰게 되기 때문에 해당 폰트를 내부 서버에 저장하고 GeneratePress에 적용하는 방법을 알려드립니다

※ GENERATE PRESS 유료 테마를 사용하는 사용자만 해당 됩니다

1단계 : 구글 폰트 저장하기

https://fonts.google.com/

해당 사이트에 접속하고 원하는 폰트를 검색합니다

구글 폰트를 다운 받아보면 TTF파일로 되어있어서 이를 WOFF,WOFF2 와 같은 웹폰트로 전환이 필요합니다

2단계 : 웹폰트 전환하기

https://transfonter.org/

링크의 사이트는 TTF 파일을 WOFF,WOFF2로 변환해주는 사이트로 구글에서 받은 TTF폰트 파일을 ADD FONTS를 선택하여 추가합니다

그리고 CONVERT를 누르면 WOFF,WOFF2 파일을 받아오게 됩니다

해당 WOFF,WOFF2 폰트 파일들을 워드프레스 미디어로 업로드 하거나 직접 FTP를 통해 서버에 업로드 합니다

3단계 : GENERATE PRESS CSS 설정

Appearance > GeneratePress > Modules > Typography > Activate

타이포그래피 모듈이 비활성화 되어 있다면 먼저 활성화합니다

Appearance > Customizer > Additional CSS

@font-face {
    font-family: 'Questrail';
    src: url('https://cdn.wplogout.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff2') format('woff2'),
        url('https://cdn.wplogout.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

운영 중인 워드프레스 사이트에 적절하게 변경해서 CSS코드를 삽입합니다

4단계 : CODE SNIPPET 설치 및 설정

워드프레스 코드 스니펫 플러그인을 설치합니다 해당 플러그인은 GENERATEPRESS의 FUNCTION.PHP에 사용자가 추가적인 기능을 넣을 때 안전하고 관리 하기 쉽게 해주는 플러그인으로 GENERATEPRESS 개발자들도 거의 필수적으로 추천하는 플러그인입니다

GENERATEPRESS가 초경량 테마로 만들어지다보니 기초적이고 필수적인 기능만 제공되다보니 필요한 기능들은 사용자가 직접 만들다보니 코드 스니펫이 필수로 자리 잡지 않았나 생각이 듭니다

Code Snippets > Add New > Enter the Title

설치하고 ADD NEW 를 선택하여 적당한 타이틀을 입력하고 아래 필터를 추가합니다

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Questrail';
  
    return $fonts;
} );

위 코드를 입력하고 적당히 자신의 환경에 맞게 수정하여 ACTIVATE를 선택합니다

Code Snippets > Add New > Enter the Title

다시 같은 방법으로 ADD NEW를 선택하여 GeneratePress 테마의 대기열에서 Google Fonts API를 제거하는 코드를 추가합니다

add_action( 'wp_enqueue_scripts','wplogout_remove_google_fonts', 10 );
function wplogout_remove_google_fonts() {
    wp_dequeue_style( 'generate-fonts' );
}

위 코드를 입력하고 ACTIVATE를 선택합니다

5단계 : 폰트 변경하기

Appearance > Customizer > Typography

구글 폰트로 되어있던 부분을 새로 추가한 폰트로 변경합니다

전체 설정된 폰트를 다 변경해야 하기 때문에 번거롭긴 하지만 하고나서 구글 인사이트 측정을 하게 되면 점수가 높아진 것을 체감이 가능할 것입니다