Google PageSpeed Insights에서 100% 점수가 필요하십니까?
게시 됨: 2019-04-23우리는 기다리는 것을 좋아하지 않습니다. 사람들이 귀하의 웹사이트를 방문할 때 기다려야 하는 경우에는 질려 다른 웹사이트를 방문하게 됩니다. 빠른 웹 로딩은 오늘날 필수 요구 사항입니다. 그러나 웹 사이트가 느린지 빠른지 어떻게 알 수 있습니까?
나도 알아, 이 질문이 좀 멍청해 보인다. 로딩 시간을 측정하여 웹이 빠른지 느린지 알 수 있습니다. 어려운 점은 이 분석의 결과 값이 '느림' 또는 '빠름'으로 분류될 수 있는지 아는 것입니다. 2초를 기다리는 것은 문제가 되지 않을 수 있지만 내 웹사이트가 절반의 시간에 로드된다면 절대적으로 낫지 않을까요? 특히 웹 사이트와 같은 것을 고려하면 인터넷 연결에 로드하는 데 2초밖에 걸리지 않지만 연결 속도가 느린 사용자는 어떻습니까?
이 모든 것은 처음에 보이는 것보다 더 복잡한 문제입니다. 비교 가능한 측정을 설정하기 위해 Google PageSpeed Insights 또는 GTMetrix와 같은 웹사이트의 최적화 수준 평가자가 있습니다.
이러한 평가자는 웹 페이지를 분석하고 최적화 수준에 따라 0에서 100까지의 등급을 부여할 수 있습니다. 또한 웹의 특성을 감지하고 웹의 등급과 속도를 향상시키기 위해 수행할 수 있는 제안을 나타냅니다.
그러나 완벽을 추구하는 것은 역효과를 낼 수 있습니다. Google PageSpeed Insights에서 우수성을 검색하는 것은 사용자 경험과 같은 중요한 웹사이트의 다른 측면을 무시할 수 있습니다.
Google PageSpeed Insights에서 우수성 검색
우리는 최근에 웹 사이트의 테마를 처음부터 다시 작성했으며 새로운 WordPress 블록 편집기의 블록을 사용하여 모든 페이지를 변형했습니다. 블록에디터의 특징을 잘 이해하고 단점도 보고 배우면서 연습해보는 시간이었습니다.
이 작업을 활용하여 Google PageSpeed Insights로 웹 사이트를 분석하여 최종 등급을 개선하고 원하는 100에 최대한 근접하도록 노력했습니다. 다음으로 표시 덕분에 개선된 몇 가지 포인트를 볼 수 있습니다. Google 및 이에 대한 우리의 결론.
이미지에 적절한 크기를 사용하십시오.
우리는 이미 블로그에서 이 주제에 대해 논의했습니다. 테마에 필요한 것과 호환되는 이미지 크기를 사용해야 한다는 것을 기억하십시오. 큰 이미지는 필요하지 않으므로 사용하지 마십시오.
Google PageSpeed Insights에서 이미지에 대해 불만을 표시하는 경우 문제의 원인이 되는 이미지를 알려서 문제를 해결할 수 있다는 점이 좋습니다. 힘든 작업이지만 그 결과는 웹 로딩 시간에 직접적인 영향을 미칩니다.
화면에 나타나지 않는 이미지의 로드를 연기
방문자가 보기 위해 아래로 스크롤해야 하는 페이지의 모든 이미지에 대해 권장되는 것은 지연 로딩 을 적용하는 것 입니다.
지연 로딩을 사용하여 얻을 수 있는 것은 방문자가 스크롤하여 이미지를 볼 필요가 있을 때만 서버에 이미지를 요청한다는 것입니다. 이러한 방식으로 초기 요청에서 서버 과부하를 방지하고 시간을 줄여 웹 로드를 더 빠르게 만듭니다. 나는 그것에 대해이 기사를 추천합니다. 지연 로딩에 플러그인을 사용하고 싶다면 이 플러그인이 도움이 될 것입니다.
우리의 경우 SiteGround 최적화 플러그인에는 지연 로딩 이 포함되어 있으므로 웹 사이트에서 이 기술을 활성화하기 위해 다른 것이 필요하지 않았습니다.
웹 글꼴이 로드되는 동안 텍스트가 계속 표시되는지 확인합니다.
Google Webfonts를 사용하는 경우 Google에서 글꼴 로드를 위해 제공한 스크립트가 Google PageSpeed Insights에서 개선 가능한 것으로 감지되는 방식을 확인하는 것은 아이러니합니다.
Google에 따르면 웹 글꼴을 로드하는 동안 사용자가 텍스트를 볼 수 있도록 @font-face 에서 CSS font-display 를 사용해야 합니다. 특히 글꼴을 사용할 수 있을 때까지 브라우저가 텍스트 렌더링을 차단하지 않도록 글꼴 로드에 font-display:swap 을 넣어야 합니다. 여기에 설명된 대로 Google 글꼴을 다운로드하고 font-display 를 사용하여 직접 가져올 수 있습니다.
이를 통해 방문자는 Google의 특정 글꼴이 로드되지 않은 경우에도 처음부터 텍스트를 볼 수 있습니다. 글꼴을 사용할 수 있게 되면 브라우저는 글꼴을 텍스트에 적용하여 원하는 스타일로 스타일을 변환합니다.
렌더링을 차단하는 리소스 제거
CSS 스타일과 JavaScript 스크립트는 각각 콘텐츠 디자인을 변경하고 동적으로 만드는 데 점점 더 많이 사용됩니다.
웹의 <header> 에 CSS와 JS를 로드하면 콘텐츠 렌더링이 차단되고 스타일과 JavaScript 파일이 처리될 때까지 웹이 콘텐츠를 로드하지 않는 것이 정상입니다.
이것을 피하는 한 가지 옵션은 이러한 파일을 웹의 <footer> 로 이동하는 것입니다. 이렇게 하면 <body> 에 들어가는 모든 콘텐츠가 차단되지 않고 먼저 로드되고 렌더링됩니다.
또한 로드가 지연되거나 비동기적으로 완료되도록 JavaScript 스크립트에서 defer 및 async 속성을 사용하는 것이 좋습니다.
Google PageSpeed Insights의 최종 점수를 높이는 데 도움이 되는 또 다른 측면은 CSS 및 JS 파일을 축소 및 압축하고 각각 단일 CSS 및 JS 파일로 결합한다는 사실입니다. 그러나 잘못된 순서로 결합하면 스타일에 결함이 생기고 JavaScript 코드 실행이 중단될 수 있으므로 조합에 매우 주의해야 합니다.
이 플러그인을 사용하여 더 나은 결과를 얻을 수 있지만 다시 주의해서 사용하십시오.
웹사이트 속도 향상의 단점
Google PageSpeed Insights 보고서를 사용하여 Google에서 제안한 제안에 솔루션을 적용한 후 웹사이트의 로딩 시간이 단축됩니다. 그러나 여기에는 우리가 지불하고 싶은지 명확하지 않은 대가가 있습니다.
웹사이트를 밝게 하는 것의 부작용 중 하나는 방문자가 얻는 사용자 경험이 예전만큼 좋지 않을 수 있다는 것입니다. 더 자세히 설명하자면…
우리 웹사이트의 콘텐츠가 방문자의 브라우저에서 가능한 한 빨리 렌더링될 수 있도록 웹 바닥글 에서 JavaScript 및 CSS 스타일 로드를 연기했습니다( 머리글 에서 바닥글 로 이동했습니다). 또한 웹 글꼴을 사용하기 전에 텍스트를 로드할 수 있습니다.
이 모든 것이 방문자가 스타일 없이 웹 콘텐츠를 빠르게 보게 합니다. 이는 그들이 모든 것을 매우 평평하고 추악하게 본다는 것을 의미합니다. 또한 이미 사용 가능한 경우 텍스트의 글꼴이 어떻게 변경되는지 알 수 있습니다. 방문자는 CSS 및 JavaScript 스타일이 적용되고 실행될 때 깜박임도 볼 수 있습니다.
이전에는 일반적인 WordPress 설치에서 방문자는 문제 없이 웹 로드를 보았습니다. 이제 그는 로드 속도가 조금 더 빨라지는 것을 알 수 있지만 그가 경험하는 이 모든 깜박임은 사용자 경험을 감소시키고 방문자가 웹이 이상하게 로드되고 있다고 생각하게 할 수 있습니다. 또는 페이지를 탐색할 때마다 잠시 깜박임이 나타나기 때문에 웹에서 무언가가 깨졌습니다.
몇 밀리초의 로딩 시간과 Google PageSpeed Insights의 추가 점수를 얻기 위해 방문자에게 이 이상한 느낌을 제공할 가치가 있습니까? 우리는 그렇게 생각하지 않습니다. 이러한 이유로 WordPress가 기본적으로 수행하는 스타일과 스크립트를 로드하는 일반적인 방법으로 돌아갔습니다.
이것이 SEO 와 같은 다른 측면에 부정적인 영향을 미치는지 여부에 관계없이 진실은 우리가 모른다는 것입니다. Google PageSpeed Insights의 평가가 일부 사람들이 생각하는 것만큼 많은 비중을 차지하는지 확실하지 않습니다.
이미지의 올바른 크기, 축소된 파일을 사용하여 무게를 줄이거나 페이지에서 사용하지 않을 모든 항목을 로드하지 않는 등 개선해야 할 측면이 있음이 분명합니다.
귀하의 웹사이트 최적화 평가자와 최대 점수 획득에 열광하지 마십시오. 결국 타겟 방문자는 10분의 1초도 최소한의 차이를 인식하지 못하는 살과 피로 만들어집니다. 성적이 대부분 정확하면 다른 것에 집중하십시오.
Unsplash 에서 Taun Stewart 의 추천 이미지 .