Divi 테마 모바일 페이지 로딩 속도 (다른 테마 포함)

Divi  테마를 포함하여 웹폰트를 사용하는 많은 테마들을 사용 할 때, 한글 웹폰트를 1개 이상 사용 할 경우 모바일 웹 브라우저에서 페이지 로딩에 4~5초 이상 로딩이 지연됨.

기본적으로 웹사이트를 제작할 때에는 하나의 웹폰트만 사용하는 것이 바람직함.

한글 웹 폰트 1개당 3~4M 크게는 10M의 용량을 불러와야 하며,

폰트 weight(두께)별로 나뉘어져서 불러오는 경우 나뉘어진 파일들을 모두 불러와야 하면서 1 request 가 아닌 40~50 request를 처리해야 하는데에 모바일에서는 로딩 저하가 생기는 것으로 보임 (덩어리 파일, 나뉘어진 파일을 따로 측정 해 보진 않았지만…)

Divi 테마의 경우 아래 코드를 이용하여 모바일에서 만큼이라도 구글 웹폰트를 사용하지 않게 할 수 있으며, 이외에 퍼블리셔가 수동으로 웹폰트 파일을 불러올 경우에는 wp_is_mobile() 함수를 이용해서 구분해서 불러오는 것이 좋음.

모바일 브라우저의 기본 한글 폰트도 충분히 가독성이 좋음 – 특수성을 유지하고 싶다면 이미지 + alt 사용 혹은 영문 웹폰트를 불러와 영문에서 특수성을 표현할 것을 권장함

// 구버전 Rainborad Google Fonts 비활성화
add_action( 'wp_enqueue_scripts', function() {
       wp_dequeue_style( 'google-fonts-css' );
}, 100 );

// 모바일에서 웹폰트 비활성화
add_action( 'init', function() {
       if ( wp_is_mobile() ) {
              remove_action( 'wp_enqueue_scripts', 'et_builder_preprint_font' );
              remove_action( 'wp_footer', 'et_builder_print_font' );
       }
} );
if ( !is_admin() && (wp_is_mobile()) ) {
       add_filter( 'option_et_google_api_settings', function($val) {
              if ( is_array($val) )
                     $val['use_google_fonts'] = 'off';
              return $val;
       } );
} else {
       add_action( 'wp_head', function() {
              ?>
<style type="text/css">
       @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
</style>
              <?php
       }, 8 );
}

// disable hanna.css
if ( ! function_exists( 'et_get_old_one_font_languages' ) ) :
       /**
        * Return the list of languages which supported one font previously.
        *
        * @return array
        */
       function et_get_old_one_font_languages() {
              $old_one_font_languages = array();
              return $old_one_font_languages;
       }
endif;Code language: PHP (php)