me

[GoogleAdSense] 구글 애드센스를 위한 여정3 – PageSpeed Insights 개선
2024.03.26 / , , ,

PageSpeed Insights: https://pagespeed.web.dev/?hl=ko

구글 애드센스 탈락 후 구글 웹페이지 속도 측정 사이트 의 결과를 개선해 보려고 한다

PageSpeed Insights 일단 아직 손대기 전…

PageSpeed Insights 모바일 결과 - 작업 전
PageSpeed Insights PC 결과 - 작업 전

자… 어디까지 올릴 수 있을까?

PageSpeed Insights – 접근성, 권장사항, 검색엔진 최적화

권장사항 – ▲ [user-scalable=”no”]이(가) 요소에서 사용되거나 [maximum-scale] 속성이 5보다 작음

기존 코드 값에 있는 부분을 수정

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

코드를

<meta name="viewport" content="width=device-width, initial-scale=1.0> 로 변경

탐색 – ▲ 포커스할 수 있는 활성 요소에 중복되는 [id] 속성이 있음

메인 검색 창 2곳과 saerch.php에 같은 ID를 주고 있던 부분을 각각의 ID로 변경 처리

이름 및 라벨 – ▲ 링크에 인식 가능한 이름이 포함되어 있지 않습니다

메뉴 버튼에 aria-label 추가

<a class="header-btn__nav" href="#">

코드를

<a class="header-btn__nav" href="#" aria-label="nenu botton">

표와 목록 – ▲ 목록에 <li> 요소와 스크립트 지원 요소(<script> 및 <template>)만 포함되지 않음

기존 코드에 slick.js를 썼는데 조합하다 보니 ul 안에 li 말고도 span 이랑 div 코드가 바로 밑에 들어가서 오류가 발생. 코드 전반 수정.

ARIA – ▲ Values assigned to role="" are not valid ARIA roles.

기존 사용한 slick.js에 코드상 role이 들어가는 부분이 있는데 해당 프러그인 스크립트 부분 삭제

콘텐츠 권장 사항 – ▲ 문서에 메타 설명이 없음

<meta name="description" content="This site is pixi's personal site..." />

설명 메타 코드를 header.php에 추가!

성능을 제외하고 여기까진 금방 100 – 100 – 100이 되었는데.. 성능은 어렵….

PageSpeed Insights – 성능

PageSpeed Insights 성능 결과

1. 캐시 플러그인 설치

속도 향상을 위해서 Autoptimize 와 W3 Total Cache 플러그인을 설치 하였다.

2. jquery 사용 종료 + 사용하지 않는 파일 부분 차단

기존에 slick.js를 쓰기 위해서 워드프레스에 포함된 플러그인을 사용 했는데 해당 부분을 없애고 기존 워드프레스 제이쿼리 코드를 삭제 하였다.

그리고 추가로 메인에서 쓰지 않는 워드프레스 포함 코드도 분리 처리 하였다.

//  block 용 css 대기열에서 삭제 - 사용은 하나 대기열에서 빼기
function db_dequeue_block_styles_on_home(){
	wp_deregister_script('jquery');
	
    if (is_home()) {
    	wp_dequeue_style( 'wp-block-library' );
	    wp_dequeue_style( 'wp-block-library-theme' );
	}
} 
add_action( 'wp_enqueue_scripts', 'db_dequeue_block_styles_on_home', 100 );

이 부분이 성능 향상에 큰 도움이 되었다.

3. 중요하지 않는 css는 지연로드

다른 css와 달리 sub.css는 바로 안 읽어도 되기에 지연 로드 시켰다.

<?php if (is_front_page()): ?>
    <link rel="preload" as="style" href="<?php echo get_template_directory_uri() . '/css/index.min.css'; ?>" onload="this.rel='stylesheet'" />
<?php else: ?>
    <link rel="preload" as="style" href="<?php echo get_template_directory_uri() . '/css/sub.min.css'; ?>" onload="this.rel='stylesheet'" />
<?php endif; ?>

4. index에서 쓰는 큰 이미지 미리 로드

<link rel="preload" as="image" href="<?php echo get_template_directory_uri() . '/img/index/bg_section.webp'; ?>" />
<link rel="preload" as="image" href="<?php echo get_template_directory_uri() . '/img/common/pixi.webp'; ?>" />

<?php if (is_front_page()): ?>
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-html.webp" />
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-js.webp" />
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-react.webp" />
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-python.webp" />
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-wordpress.webp" />
    <link rel="preload" as="image" href="https://pixiclue.com/wp/wp-content/uploads/2024/T-photoshop.webp" />
<?php endif; ?>

메인에서 background로 쓰이는 이미지를 미리 head에 preload로 불러오는 처리

5. font-face 보충

기존에 css에서 font-face로 구글 웹폰트 연결하던 부분을 일부 보충 해주기

실제 다른 글에서는 head에 직접 구글 웹 폰트를 연결 하는 게 좋다고 했는데…

그럴 경우 Autoptimize 플러그인에서 Extra – Google Fonts 부분을 바꿔야 하는데 개인적으로 테스트 해 본 결과 css에 import 하고 Autoptimize  플러그인에서 Google Fonts 부분을 Remove Google Fonts로 해주는게 실제 구글 폰트는 적용되면서 속도는 더 올라갔다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>    
<link rel="preconnect" href="https://hangeul.pstatic.net">

@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-round.css'); /* font-family: 'NanumSquareRound';*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,600;0,700;0,800;1,100;1,400;1,600;1,700;1,800&display=swap'); /*font-family: 'Poppins', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap'); /*font-family: 'IBM Plex Mono', monospace;*/

6. 차세대 형식을 사용해 이미지 제공하기 – 메인에 쓰는 이미지 확장자 변경

차세대 형식을 사용해서 이미지 제공하라고 해서 jpg → webp로 변경

7. 사용하지 않는 자바스크립트 줄이기

Enlighter – Customizable Syntax Highlighter 플러그인에서 Dynamic Resource Invocation (DRI) 옵션 켜기

8. css와 js 압축

js 파일을 min으로 만든 후 minifier 처리

https://www.toptal.com/developers/javascript-minifier

css 파일을 min으로 만든 후 minifier 처리

https://www.websiteplanet.com/ko/webtools/jscssminifier/

4th / 24-03-29. 탈락 – 동일 사유

여기까지 진행하고 있는데… 동일 사유로 떨어졌다고 나왔다.

일단 언제 검사를 한지 모르기에… seo도 끝났고, PageSpeed Insights도 일단 완료 하였기에 바로 그냥 재 신청 눌렀다…

현재까지 PageSpeed Insights 결과는 모바일 90 / PC 97 나오고 있다. CDN은 따로 쓰지 않고 있다.

PageSpeed Insights 현재까지 최종 결과

« Etc POSTS »