WordPress에서 이미지를 효율적으로 인코딩하고 PageSpeed 경고를 수정하는 방법
게시 됨: 2022-02-17PageSpeed Insights를 통해 WordPress 사이트 감사를 실행하는 경우 Lighthouse에서 이미지를 효율적으로 인코딩하도록 권장할 수 있습니다. PageSpeed Insights(PSI)는 전체 WordPress 페이지에 대한 성능 보고서를 생성하는 도구입니다. 이미지를 더 잘 최적화할 수 있음을 감지하면 "이미지를 효율적으로 인코딩" 경고를 트리거합니다.
이 가이드에서는 이미지를 효율적으로 인코딩한다는 의미와 이미지 상태를 확인 하는 방법을 설명합니다. 이는 Lighthouse 성능 점수를 향상시키는 효과적인 방법이기도 합니다. 또한 6가지 이미지 최적화 기술과 "이미지를 효율적으로 인코딩" 경고를 수정 하는 빠른 방법 을 공유합니다.
뛰어들자!
이미지를 효율적으로 인코딩한다는 것은 무엇을 의미합니까?
이미지를 효율적으로 인코딩한다는 것은 이미지를 최적화하여 품질에 큰 영향을 주지 않으면서 파일 크기를 줄이는 것을 의미합니다.
Lighthouse는 이미지를 최적화 가능한 것으로 어떻게 표시합니까? 이 문제를 일으키는 원인은 무엇입니까?
Lighthouse는 감사 중인 페이지의 모든 이미지를 스캔한 다음 압축 수준을 85%로 설정합니다. 잠재적 절약이 4KiB 이상인 경우 이미지를 보고하고 성능 보고서에서 오류로 플래그를 지정합니다.
매우 높은 품질의 압축되지 않은 이미지는 종종 파일 크기가 커집니다. 이미지가 클수록 다운로드하여 방문자에게 렌더링하는 데 더 많은 시간이 걸립니다. 모든 이미지에 이런 일이 발생하면 총 로딩 시간이 늘어날 수 있고 웹사이트가 느려질 수 있습니다.
이러한 상황을 피하기 위해 웹에서 이미지를 적절하게 제공할 수 있는 6가지 최적화 기술을 공유하고 있습니다.
WordPress에서 이미지를 효율적으로 인코딩하는 6가지 방법:
다음을 포함하여 이미지를 효율적으로 인코딩하고 이 PageSpeed Insight 권장 사항을 처리하기 위해 취할 수 있는 6단계가 있습니다.
- 이미지 압축
- 지연 로드 구현
- 이미지를 WebP로 변환(차세대 형식)
- 올바른 크기의 이미지 제공
- 이미지 CDN 사용
- 애니메이션 GIF를 비디오로 바꾸기
각 단계를 살펴보겠습니다.
1. 이미지 압축
이미지 압축의 목표는 너무 많은 품질을 손상시키지 않으면서 이미지 파일을 줄이는 것입니다. 이미지를 가장 효율적인 형식으로 저장하고 렌더링하여 적절하게 인코딩할 수 있기 때문에 PageSpeed Insights는 매우 만족합니다. 이미지 압축은 손실이 있을 수 있지만 이미지 품질을 건드리지 않으려면 손실이 없습니다.
그러나 올바른 도구를 사용하면 무손실 압축이 육안으로 보이지 않습니다.
아래 예에서 하나는 원본 파일이고 다른 하나는 압축된 파일입니다. 차이점을 알 수 있습니까? 할 수 없어.
차선의 이미지는 페이지 속도에 큰 영향을 미치고 WordPress 사이트 속도를 저하시킵니다. 성능 문제를 피하는 가장 쉬운 방법은 WordPress 플러그인을 사용하는 것입니다. 걱정하지 마세요. 우리는 당신을 위해 무거운 작업을 수행했으며 WordPress에 가장 적합한 이미지 압축 플러그인 목록을 작성했습니다.
이미지를 수동으로 압축하는 방법을 선호하는 경우에도 적용됩니다. Photoshop과 Lightroom이 부담스럽다면 사용할 수 있는 대체 최적화 도구가 많이 있습니다.
2. 지연 로드 구현
지연 로딩은 필요할 때만 이미지를 표시하는 것을 목표로 하는 최적화 기술이기 때문에 이미지를 효율적으로 인코딩하는 데 도움이 됩니다. 사용자가 이미지를 보는 경우 브라우저에서 이미지를 렌더링합니다. 그렇지 않으면 가장 중요한 콘텐츠의 우선 순위를 지정하기 위해 로드가 지연됩니다. Google은 PageSpeed에서 "화면 밖 이미지 연기"를 권장합니다. 즉, 다음 지연 로드 스크립트를 적용합니다.
“loading=lazy”첫 번째 보이는 뷰포트의 이미지에 대해 이 스크립트를 설정하지 않아야 합니다. 대신 스크롤 없이 볼 수 있는 콘텐츠에 지연을 적용합니다.
수동으로 지연 로드를 구현하고 싶지 않다면 Lazy Load by WP Rocket과 같은 무료 WordPress 플러그인을 사용하거나 WordPress용 최고의 지연 로드 플러그인을 살펴보세요.
3. 이미지를 WebP로 변환(차세대 형식)
Google에서 개발한 WebP는 이미지에 대해 더 나은 무손실 및 손실 압축을 제공하는 차세대 이미지 형식입니다. 결과적으로 WordPress 사이트에서 이미지를 더 잘 인코딩하고 PageSpeed 감사를 통과합니다.
실제로 Google에 따르면 "평균 WebP 파일 크기는 JPEG 파일 크기에 비해 25%-34% 작습니다". 이 표는 WebP가 JPEG 형식보다 더 나은 압축을 달성함을 보여줍니다.
당신은 확신합니까? Imagify 플러그인은 WordPress 대시보드에서 직접 이미지를 WebP로 변환할 수 있습니다.
이 차세대 형식에 대해 자세히 알아보려면 WordPress에서 WebP 형식을 사용하는 방법을 읽는 것이 좋습니다.
4. 올바른 크기의 이미지 제공
Lighthouse를 사용하면 WordPress 사이트에서 잘못된 크기의 이미지를 쉽게 찾을 수 있습니다. 페이지를 감사하고 "적절한 이미지 크기" 경고를 찾으면 크기를 조정해야 합니다.
DevTools Elements 패널을 사용하여 이미지가 표시되는 크기를 확인할 수도 있습니다.
이 섹션은 쉽게 들리지만 2022년에 사용할 수 있는 다양한 화면 크기를 고려할 때 상황이 빠르게 복잡해질 수 있습니다.
한 가지 규칙: 이상적으로는 페이지가 사용자 화면보다 큰 이미지를 제공해서는 안 됩니다.
- 평균 데스크탑 화면 크기는 1920 x 1080픽셀입니다.
- 대부분의 휴대전화는 기기 너비가 400픽셀입니다.
WordPress 사이트의 경우 미디어 라이브러리를 통해 또는 페이지에 직접 이미지를 업로드할 수 있습니다. Google은 최적의 이미지 크기(반응형 중단점 포함)를 사용할 것을 권장합니다. 핵심은 전체 크기 이미지를 사용하지 않고 적절하게 크기를 조정하는 것입니다.
- 이미지 파일 크기를 200KB 미만으로 유지하십시오.
- 대부분의 이미지에서 최대 너비는 800픽셀이면 충분합니다.
이 숫자 사이에 이미지를 유지하면 사용자의 장치에 빠르게 로드됩니다.
Sketch에서 아래와 같이 각 장치에 따라 더 나아가 이미지를 최적화할 수 있습니다.
이미지 크기를 적절하게 조정하고 웹사이트 속도가 느려지는 것을 방지할 수 있는 다양한 옵션이 있습니다.
- Photoshop, Lightroom, Gimp 등과 같은 도구를 사용하여 수동으로 수행합니다.
- Imagify와 같은 이미지 최적화 플러그인을 사용하세요. 압축과 유사하게 대량을 사용하여 사이트에 있는 모든 기존 이미지의 크기를 조정할 수도 있습니다.
5. 이미지 CDN 사용
WordPress에서 이미지를 효율적으로 인코딩하려면 CDN 공급자를 선택해야 합니다. 이미지를 더 빠르게 제공하고 Google PageSpeed 이미지 관련 문제를 제거하는 데 도움이 됩니다. CDN은 사용자가 전 세계 어디에 있든 이미지 최적화 및 전달을 전문으로 합니다.
WebDev에 따르면 아래와 같이 "이미지 CDN으로 전환하면 이미지 파일 크기가 40-80% 절약될 수 있습니다."
6. 애니메이션 GIF를 비디오로 교체
아래 예제에서 볼 수 있듯이 .mp4 비디오는 GIF보다 훨씬 가볍기 때문에 애니메이션 GIF를 비디오로 교체하면 성능이 향상됩니다.
– GIF 파일 크기: 12MB
– MP4 파일 크기: 286KB( 총 절약: 98% )
PageSpeed는 또한 GIF를 사용하지 않고 비디오 형식을 통해 애니메이션 콘텐츠를 제공할 것을 권장합니다. 콘텐츠를 MP4로 변환할 때 GIF처럼 보이도록 설정이 올바른지 확인하세요.
– 지속적으로 반복되어야 합니다.
– 자동으로 재생되어야 합니다.
- 침묵해야 한다
GIF를 비디오로 변환하는 방법에는 여러 가지가 있습니다. 저는 위의 비교를 위해 Ezgif를 사용했습니다.
이제 WordPress에서 이미지를 효율적으로 인코딩하는 6가지 최적화 기술을 보았으므로 성능 도구 상자를 공유하겠습니다. WordPress 사이트의 속도를 높이고 이미지가 웹에 잘 최적화되어 있는지 확인해야 하는 경우 유용할 수 있습니다.
| ️ 이미지를 최적화된 상태로 유지하고 항상 PageSpeed Insights 감사를 통과하는 내 도구 상자(이미지를 효율적으로 인코딩 포함): – Imagify, 내 이미지를 압축하여 WebP에 제공(매월 20MB 이미지 무료) – WP Rocket의 Lazy Load(무료) – 내 이미지를 더 빠르게 제공하기 위한 RocketCDN(무제한 대역폭의 경우 월 $8.99) – Ezgif(.gif를 .mp4로 변환하는 무료 도구) – 몇 번의 클릭으로 속도를 높이는 최고의 성능 플러그인 중 하나인 WP Rocket(Core Web Vitals를 녹색으로 변경) |
다음 섹션에서는 이미지를 자동으로 효율적으로 인코딩하는 강력한 이미지 압축 플러그인인 Imagify에 초점을 맞출 것입니다.
Imagify로 이미지 인코딩을 효율적으로 수정하는 방법
Imagify 덕분에 품질 저하 없이 이미지를 압축하고 "이미지를 효율적으로 인코딩" 경고를 수정할 수 있습니다.
이제 Imagify가 작동하는 모습을 보고 Imagify를 사용하거나 사용하지 않고 PageSpeed 인사이트를 비교할 시간입니다.
Before Imageify – PageSpeed Insights의 내 성능 결과
Lighthouse는 좋은 결과를 제공하지 않으며 다음과 같은 몇 가지 이미지 관련 문제가 발생합니다.
- 이미지를 효율적으로 인코딩 (오늘의 주제)
- 차세대 형식의 이미지 제공
- 적절한 크기의 이미지
이제 Imagify를 다운로드하여 차세대 형식으로 이미지를 압축 및 제공하고, 적절한 크기를 지정하고, 물론 효율적으로 인코딩할 시간입니다.
Imagify 사용 – PageSpeed Insights의 성능 결과
Imagify에서 "이미지를 효율적으로 인코딩" 경고를 수정했습니다! 또한 모든 이미지를 최적화하고 이전 문제를 통과된 감사 영역에 넣었습니다.
Imagify는 내 이미지 파일 크기를 90% 줄였습니다 . 아래 예와 같이 거의 2MB에서 200KB로 늘어났습니다.
저처럼 '효율적으로 앵콜 이미지' 경고를 없애고 싶으신가요?
Imageify를 설치하고 다음 설정을 적용합니다.
- Imagify 설정(간단함)
- 이미지 압축에 사용할 최적화 수준을 선택합니다. 가장 높은 최적화 수준인 Ultra를 선택했습니다.
- PageSpeed Insights에서 권장하는 차세대 형식인 WebP로 이미지를 변환합니다.
- Imagify를 사용하여 큰 이미지를 대량으로 최적화하십시오. ( 즉, 한 번의 클릭으로 전체 라이브러리를 최적화할 수 있습니다!)
- 그리고 그대로 PSI 경고가 사라졌습니다.
이 이미지 최적화 프로세스는 완전히 무료였습니다!
Imagify 무료 버전을 사용하면 매월 20MB 분량의 이미지 크기를 조정하고 압축할 수 있습니다. 더 많은 이미지를 추가할 계획이라면 다음 프리미엄 가격을 선택할 수 있습니다.
- 500GB에 대해 월 $4.99(약 5000개 이미지)
- 무제한 사용의 경우 월 $9.99입니다.
그래도 의심이 가는 경우 PageSpeed Insights는 Imagify와 같은 이미지 최적화 플러그인을 사용할 것을 권장합니다.
마무리
Imagify가 없으면 PageSpeed가 내 이미지에 대한 몇 가지 문제에 플래그를 지정했습니다.
Imagify를 사용할 때 모든 이미지 관련 문제가 수정되었습니다. 그것들은 차세대 형식(WebP) 중 하나로 최적화되었고 "이미지를 효율적으로 인코딩하십시오"라는 경고가 마침내 녹색으로 바뀌었습니다.
나와 같으며 몇 번의 클릭으로 WordPress에서 이미지를 효율적으로 인코딩하려면 Imagify를 사용하지 않겠습니까? 저처럼 무료로 Imagify를 사용해 보고 이미지를 최적화하고 PageSpeed Insights에서 자체 감사를 실행할 수 있습니다. Imagify 덕분에 테스트에 통과했다면 댓글로 알려주세요. 궁금합니다!