Lighthouse 점수를 개선하는 방법 - 모범 사례

이 기사는 등대 시리즈의 일부입니다. 아래에서 지난 주 기사를 확인할 수 있습니다.

How to Improve Lighthouse Score - Search Engine Optimization (SEO)


이 게시물에서는 웹용으로 빌드할 때 몇 가지 모범 사례를 확인할 것입니다.

HTTPS를 사용하여 웹사이트 보호

HTTPS는 Hypertext Transfer Protocol Secure의 약자입니다. HTTPS는 웹 브라우저와 웹 사이트 간에 데이터를 전송하는 데 사용되는 기본 프로토콜인 HTTP의 보안 버전입니다. HTTPS는 데이터 전송의 보안을 강화하기 위해 암호화됩니다.

민감한 데이터를 처리하지 않는 웹사이트를 포함하여 웹사이트는 HTTPS로 보호되어야 합니다. HTTPS는 침입자가 사이트와 사용자 간의 통신을 변조하거나 수동적으로 도청하는 것을 방지합니다.

외부 사이트에 대한 링크가 안전한지 확인

target="_blank"속성을 사용하여 다른 사이트의 페이지에 링크하면 사이트가 성능 및 보안 문제에 노출될 수 있습니다. 링크에 rel="noopener"또는 rel="noreferrer"를 추가하면 이러한 문제를 피할 수 있습니다.

<a class="link"  href="https://cloudinary.com/" target="_blank" rel="noopener">

Unload 이벤트 리스너 피하기

일부 개발자는 Unload 이벤트를 콜백으로 처리합니다. 이 이벤트는 특히 모바일에서 많은 일반적인 언로드 상황에서 발생하지 않기 때문에 매우 신뢰할 수 없습니다. 언로드 이벤트를 수신하면 Back-Forward Cache 과 같은 브라우저 최적화를 방지할 수 있습니다. 대신 pagehide 이벤트 또는 visibilitychange 이벤트를 사용하는 것이 좋습니다.

페이지 로드 시 사용자 위치 요청 방지

페이지 로드 시 발생하는 geolocation.getCurrentPosition() 및 geolocation.watchPosition()에 대한 모든 호출을 제거합니다. 더 나은 사용자 경험을 제공하려면 항상 페이지 로드가 아닌 사용자 작업 후에 지리적 위치 권한을 요청하십시오.

올바른 종횡비로 이미지를 표시합니다.

종횡비가 원본 파일과 크게 다른 렌더링된 이미지는 왜곡되어 보일 수 있습니다. 소스 파일은 자연스러운 종횡비로 제공됩니다.
이미지 콘텐츠 전송 네트워크(CDN)를 사용하면 다양한 크기의 이미지 버전 생성 프로세스를 보다 쉽게 ​​자동화할 수 있습니다. 추천합니다 Cloudinary .

사용자가 암호 필드에 붙여넣기 허용

사용자가 암호를 붙여넣을 수 있도록 허용하면 암호 관리자를 사용할 수 있으므로 보안이 향상될 수 있습니다. 암호 관리자는 사용자가 로그인해야 할 때마다 암호를 자동으로 붙여넣을 수 있습니다. 이것은 사용자 경험을 향상시킵니다.

브라우저 오류가 콘솔에 기록되지 않았는지 확인

콘솔에 기록된 메시지는 페이지를 만든 웹 개발자나 브라우저 자체에서 온 것입니다. 오류 메시지는 페이지에 해결해야 할 문제가 있음을 의미합니다.

Read More Articles