워드프레스 속도를 점검하다 보면 PageSpeed Insight에서 “중요한 요청 미리 로드하기” 경고가 나타나는 경우가 있습니다. 처음에는 단순 추천 항목처럼 보이지만 실제로는 폰트·CSS·아이콘 파일 로딩 순서와 연결되는 경우가 많아서 모바일 속도 점수에 영향을 주기도 합니다.
특히 Font Awesome 같은 웹폰트가 늦게 로딩되면 화면이 잠깐 흔들리거나 아이콘이 늦게 표시되는 현상이 생길 수 있습니다. PageSpeed Insight에서는 이런 리소스를 <link rel=”preload”>로 우선 로드하라고 안내하는데, 처음 접하면 어디에 넣어야 하는지부터 헷갈리는 경우가 많습니다.
이번 글에서는 중요한 요청 미리 로드하기 문제를 해결하기 위해 실제로 진행했던 과정과 WP Fastest Cache·Insert Headers and Footers 플러그인을 이용한 preload 설정 방법을 이미지 순서대로 정리해보겠습니다.
왜 ‘중요한 요청 미리 로드하기’ 경고가 발생할까?
브라우저는 페이지를 열 때 HTML → CSS → JS → 폰트 순서로 파일을 읽습니다.
그런데 폰트 파일이 CSS 맨 아래쪽에서 불러와지면 브라우저는 나중에야 폰트를 인식하게 됩니다. 이 과정에서 아래 같은 문제가 생길 수 있습니다.
- 아이콘 늦게 표시
- 글꼴 깜빡임
- CLS 증가
- 모바일 속도 점수 하락
- 렌더링 지연
PageSpeed Insight는 이런 상황을 줄이기 위해 “이 파일은 중요하니까 먼저 읽어라”라고 preload를 권장하는 것입니다.
먼저 PageSpeed Insight에서 문제 파일 확인하기
가장 먼저 해야 하는 작업은 어떤 파일이 preload 대상인지 확인하는 것입니다.
위 화면은 PageSpeed Insight 분석 결과에서 “중요한 요청을 미리 로드하기” 항목이 표시된 상태입니다. 여기서는 현재 늦게 로딩되는 리소스를 확인할 수 있는데, 대부분 폰트 파일(.woff2), CSS 또는 아이콘 관련 파일이 표시됩니다.
특히 Font Awesome을 사용하는 워드프레스 환경에서는 아래처럼 표시되는 경우가 많습니다.
fa-solid-900.woff2이 파일이 늦게 로드되면 아이콘 출력이 지연되거나 렌더링 차단 요소처럼 동작할 수 있습니다. PageSpeed Insight에서 표시되는 파일은 실제 브라우저 렌더링에 영향을 주는 리소스이기 때문에 먼저 어떤 URL이 문제인지 확인하는 과정이 중요합니다.
preload 대상 URL 복사하기
문제 파일을 확인했다면 이제 preload용 URL을 복사해야 합니다.
위 화면은 preload 대상 URL을 복사하는 과정입니다. 중요한 요청 미리 로드하기 항목에서 표시되는 파일 위에 마우스를 올린 뒤 우클릭하여 링크 주소를 복사합니다. 이 단계가 중요한 이유는 preload 코드에서 정확한 파일 경로가 필요하기 때문입니다.
특히 CDN을 사용하는 환경에서는 실제 로딩 주소가 달라질 수 있기 때문에 브라우저에 표시되는 정확한 URL을 그대로 복사하는 편이 안정적입니다. 복사한 URL은 이후 <link rel=”preload”> 코드 안에 삽입하게 됩니다.
WP Fastest Cache 설치 후 preload 기능 활성화
중요한 요청 미리 로드하기 문제는 캐시 플러그인만으로 일부 해결되는 경우도 있습니다. 그래서 먼저 preload 기능이 포함된 캐시 플러그인을 적용하는 것이 좋습니다.
위 화면은 워드프레스 플러그인 추가 화면에서 WP Fastest Cache를 설치하는 과정입니다. 중요한 요청 미리 로드하기 문제는 단순 preload 코드 추가만으로 끝나는 경우도 있지만, 캐시 구조 자체가 느린 경우에는 preload 설정 효과가 제한될 수 있습니다.
WP Fastest Cache는 페이지 캐시와 preload 기능을 함께 제공하기 때문에 초기 로딩 구조를 개선하는 데 도움이 되는 경우가 많습니다.
특히 아래 환경에서 자주 사용됩니다.
- 워드프레스 블로그
- LiteSpeed 미사용 서버
- 공유호스팅 환경
- 기본 캐시 기능이 없는 환경
설치 후에는 preload 기능을 활성화해야 실제 캐시 사전 생성이 동작합니다.
preload 기능 활성화하기
플러그인을 설치했다면 preload 기능을 켜야 합니다.
위 화면은 WP Fastest Cache 설정 화면입니다. 여기서 preload 기능을 활성화할 수 있습니다. preload 기능은 방문자가 접속하기 전에 미리 캐시를 생성하는 역할을 합니다.
설정 화면에서 아래 항목을 체크합니다.
Preload이 기능이 활성화되면 캐시 생성 속도가 빨라지고 일부 preload 관련 문제도 함께 줄어드는 경우가 있습니다. 다만 preload 기능만으로 모든 폰트 preload 문제가 해결되는 것은 아니기 때문에 이후 수동 preload 설정도 함께 진행하는 편이 좋습니다.
head 영역에 preload 코드 추가하기
이제 실제 preload 코드를 head 영역에 추가해야 합니다. 워드프레스 테마 파일을 직접 수정해도 되지만, 플러그인을 사용하는 방식이 관리하기 편한 경우가 많습니다.
위 화면은 Insert Headers and Footers 플러그인 설치 화면입니다. 중요한 요청 미리 로드하기 문제를 해결하려면 preload 코드를 <head> 영역 안에 삽입해야 하는데, 직접 header.php를 수정하면 테마 업데이트 시 코드가 사라질 수 있습니다.
그래서 Insert Headers and Footers 같은 플러그인을 사용하면 비교적 안전하게 head 영역에 preload 코드를 추가할 수 있습니다.
설치 후에는 아래 preload 코드를 입력합니다.
<link rel="preload"
href="URL"
as="font"
type="font/woff2"
crossorigin>여기서 URL 부분에는 이전 단계에서 복사한 폰트 주소를 입력합니다.
특히 .woff2 폰트 파일 preload에서는 crossorigin 속성을 같이 넣어야 정상 동작하는 경우가 많습니다.
preload 적용 후 결과 확인하기
설정이 끝났다면 캐시를 삭제한 뒤 다시 PageSpeed Insight로 측정해야 합니다.
위 화면은 preload 설정 이후 다시 PageSpeed Insight를 측정한 상태입니다. 이전에는 “중요한 요청 미리 로드하기” 경고가 표시되었지만 preload 적용 이후 경고가 줄어든 모습을 확인할 수 있습니다.
특히 폰트 preload 문제는 브라우저 캐시가 남아 있으면 이전 결과가 계속 표시될 수 있기 때문에 아래 작업을 같이 진행하는 것이 좋습니다.
- 워드프레스 캐시 삭제
- CDN 캐시 삭제
- 브라우저 캐시 삭제
- PageSpeed 재측정
preload 설정 이후에는 폰트 로딩 지연이 줄어들면서 모바일 렌더링 안정성이 개선되는 경우가 많습니다.
preload 설정 후 같이 확인할 부분
중요한 요청 미리 로드하기 문제는 preload만으로 끝나지 않는 경우도 있습니다.
그래서 아래 항목도 함께 확인하는 편이 좋습니다.
Autoptimize 충돌
CSS 병합 설정과 preload 충돌 여부 확인
CDN 캐시
CloudFront·QUIC.cloud가 이전 캐시를 유지 중인지 확인
Font Awesome 중복
테마와 플러그인이 동시에 로드 중인지 확인
preload 남용 여부
필요 없는 파일까지 preload하면 오히려 성능 저하 가능
중요한 요청 미리 로드하기 문제 정리
PageSpeed Insight preload 경고는 단순 점수 문제가 아니라 브라우저 렌더링 순서와 연결되는 경우가 많습니다.
특히 워드프레스에서는 아래 흐름으로 접근하는 것이 안정적입니다.
- preload 대상 파일 확인
- 캐시 preload 활성화
- head 영역 preload 코드 추가
- 캐시 삭제 후 재측정
폰트 preload는 작은 설정처럼 보이지만 모바일 렌더링 안정성과 CLS 감소에 영향을 주는 경우가 많습니다. PageSpeed Insight에서 중요한 요청 미리 로드하기 경고가 계속 나온다면 preload 설정부터 먼저 점검하는 편이 좋습니다.
▶ Astra 테마 CLS 오류, 사이트 제목 늘어짐 때문에 발생한 원인 정리
