[워드프레스 최적화] AMP 오류 – custom fonts 태그의 CSS 속성 에러 해결 방법

모바일 시대에 접속 속도를 빠르게 하기 위해서 일찍부터 AMP(Accelerated Mobile Page)를 적용했지만 AMP 오류가 너무 많아서 한때 AMP 사용을 중단했었습니다. AMP 사용 중단에 대해서는 [워드프레스 최적화] 구글 AMP(Accelerated Mobile Pages) 제거로 사이트 정체성 유지하기 포스팅을 참고하시기 바랍니다.

1. 다시 AMP(Accelerated Mobile Page)를 고민한 이유?

AMP 사용을 중지한 후 몇가지 상황 변화가 생겼는데요.
첫째는 구글 검색을 통한 유입이 감소했습니다. 예전엔 구글 검색으로 사이트 방문건이 일 1,200여회가 넘었는데 어느 순간 700건 정도로 줄었더군요. 이게 AMP 비적용의 여파인지 적확히 규명하지믄 못했습니다. 다만 전반적으로 구글 검색 유입이 줄었다는 것은 밎는 사실이긴 합니다.

둘째는 예전에는 사이트 방문자중 70%가 데스크탑에서 방문이었으나 어느 순간 60%이상이 모바일에서 방문으로 바뀌었습니다. 몇개우러 사이에 그렇게 바뀌니 좀 어이가 없긴 합니다만 구글 Analystics에서 결과가 그러하니 믿어야죠.

세번째는 제가 사용한 Newspaper 테마에서 직점 AMP를 지원하는 플러그인을 출시했습니다. 그러면 AMP 오류가 줄어들지 않을까하는 희망을 가졌습니다.

이러한 세가지 요인은 다시 AMP(Accelerated Mobile Page)를 적용하게하는 요인이 되었습니다.

2. 테마 지원 AMP 플러그인도 여전한 문제를 가지다.

Newspaper 테마가 8.7로 판올림(Upgrade)을 하면서 AMP 플러그인을 제공한다고 발표되었길래 바로 설치해 보았습니다.

그러나 테마에서 지원하는 AMP 플러그인이라고해서 엄청 뛰어나고 안정적이지는 않있습니다.

이전과 똑같은 문제가 발생했습니다.

즉 amp-custom’ 속성이 ‘link rel=stylesheet for fonts’ 태그에 표시되지 않을 수 있습니다이라는 문제는 그대로 있엇습니다.

이 에러에 대한 세부 정보를 보면 아래와 같은 메세지가 나옵니다.

'link rel=stylesheet for fonts' 태그 'href' 속성이 잘못된 값 'https://happist.com/556856/%EC%99%9C-%EC%95%8C%EB%A6%AC%EB%B0%94%EB%B0%94%EB%8A%94-%EC%8B%A0%EB%A7%81%EC%87%BC%EC%9A%B0%E6%96%B0%E9%9B%B6%E5%94%AE-%EC%8B%A0%EC%9C%A0%ED%86%B5%EB%A5%BC-%EC%B6%94%EC%A7%84%ED%95%98%EB%8A%94/amp/A._,Mco.YCya-z6lUI.css.pagespeed.cf.GnsCzFzk7d.css'(으)로 설정되었습니다.
'amp-custom' 속성이 'link rel=stylesheet for fonts' 태그에 표시되지 않을 수 있습니다.

3. NGX_PageSpeed 설정 변경으로 해결하다.

이 문제를 해결하기 위햐 아무리 구글링을 해봐도 관련 내용이 없더군요.

뭘까? 뭘까? 뭘까?

며칠을 고밍해도 답이 나오지않아 고민하다가 에러 내용중에 “A._,Mco.YCya-z6lUI.css.pagespeed.cf.GnsCzFzk7d.css’”라는 내용이 있어서 이는 ngx_pagespeed 관련 문제가 아닐까? 그리고 css관련 내용이니 ngx_pggespeed 설정에서 css관련 설정을 미적용하면 해결되지 않을까?하는 생각이 들었습니다.

그래서 ngx_pggespeed 설정을 바꾸기로 했습니다. ngx_pggespeed 설정중에서 css 관련 내용은 딱 2가지를 적용하고 있었는데요.

• pagespeed EnableFilters move_css_above_scripts;
• pagespeed EnableFilters outline_css ;

이 두가지를 모두 비적용으로 바꾸었습니다. 비적용은 설정문구앞에 #을 넣었습니다.

## Filter settings
    pagespeed EnableFilters responsive_images ;
    pagespeed EnableFilters convert_to_webp_animated ;    
    pagespeed EnableFilters resize_mobile_images ;
    pagespeed EnableFilters lazyload_images;    
    #pagespeed EnableFilters move_css_above_scripts;
    #pagespeed EnableFilters outline_css ;

##JS 관련 내용
    pagespeed EnableFilters rewrite_javascript ;  # rewrite_javascript is equivalent to enabling both rewrite_javascript_inline and rewrite_javascript_external
    pagespeed EnableFilters combine_javascript;

    #pagespeed UseExperimentalJsMinifier on; 미니 파이어는 기본 작동, 이 옵션은 이전 버젼용임
    pagespeed EnableFilters defer_javascript;  # 페이지 로딩 완료 시까지 자바 실행 지연    
    pagespeed EnableFilters insert_dns_prefetch; # DNS resolution time 축소

이렇게 했더니 문제가 해결이 되었습니다.
문제가 되었던 /amp 주소를 테스트해보면 모두 정상으로 나옵니다.

인터넷이 빠르게 모바일로 전환되고 모바일 광고도 매우 빠르게 증가하고 있습니다. 그런데 모바일의 속도는 모바일 인터넷의 증가 속도를 따라가지 못하고 모바일에서 속도 문제가 매우 중요해졌습니다.

amp-custom’ 속성이 ‘link rel=stylesheet for fonts’ 태그에 표시되지 않을 수 있습니다

4. 결론

결론적으로 AMP 에러중에서 즉 amp-custom’ 속성이 ‘link rel=stylesheet for fonts’ 태그에 표시되지 않을 수 있습니다이라는 문제는 NGX_PageSpeed 설정에서 css관련 내용을 비적용함으로써 해결할 수 있었습니다.

뭐 NGX_PageSpeed를 사용하지 않는다면 이런 문제가 나오지도 않겠죠.
이는 매우 드문 에러 유형이 아닐까 합니다.

10$ 제휴 프로모션으로 Vultr 가입하기

광고 – Vultr 25$ 프로모션

Vultr에 관심이 있다면 아래 프로모션으로 Vultr에 가입해 보세요.
물론 그전에 더 좋은 프로모션이 있는지 체크해 봐야 합니다.

Vultr의 좋은 점이 다양한 프로모션이 많아서 초기에 저렴하게 이용할 수 있다는 점이었죠. 최근에는 그런 좋은 조건들이 많이 사라진 것 같긴 합니다.

25$ 프로모션으로 Vultr 가입하기