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

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

2022년 10월 31일

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)

0개의 댓글

댓글 제출

    0
    장바구니
    장바구니가 비었습니다.
      할인쿠폰 적용