next.js에서 lighthouse 만점을 목표로

1583 단어 LighthousePWAnext.js

왜 할까


  • 보통으로 해도 만점은 어렵다. 우선은 없이 100점을 목표로 한다.
  • Google이 Mobile First Index를 수행하면 어쩌면 lighthouse의 점수도 사용할 것입니다
  • next.js라는 어느 정도 현실적인 프레임 워크를 사용하면 적당히 YakShaving도 할 수있을 것으로 예상

  • 사용한 것


  • next.js: export mode
  • workbox

  • 결과



    코드
    htps : // 기주 b. 코 m / 미 z 치 / 네 xtp 와보이 rp

    배포 대상(netlify)
    h tps : // 에우 쿠엔 t-s 펜세 에에 8f2 b. 네 tぃfy. 코m/

    PWA 91점은, netlify 사용하고 있는 제한으로, HTTP to HTTPS 의 리다이렉트를 설정하려면 커스텀 도메인을 설정할 필요가 있어, 돈을 지불하고 싶지 않기 때문에 포기했다. 설정하면 98점 정도가 된다고 생각한다. 제약 next.js의 정적 파일 내보내기 모드에서 실행 중이므로 동적 URL은 쿼리 매개 변수로 받거나 사전에 export 설정을 지정하여 빌드해야하며 URL의 자유도가 약간 낮아집니다. 했다. 다만, 이것은 다른 정적 PWA에서도 사전에 <pathname>/index.html 를 토해낼 필요가 있기 때문에, 정적 사이트의 제약. 완전히 자유로운 URL 표현을 하고 싶은 경우, next.js 를 node 로서 배포하는 것으로 실현 가능하지만, 그렇게 되면 자연스럽게 pm2 라든지 붙어 오는 것으로 귀찮아. 개인의 의견으로서는, 일본의 Web은 유니코드의 언어 제약으로 영어의 리더블인 URL을 사용하지 않는(사용할 수 없는) 경향이 있으므로, 일단은 /pages?id=1111 같은 쿼리 파라미터로 해 두고, 아무래도 멋진 URL이 필요하다면 한다, 라고 하는 느낌으로 좋다고 생각한다. URL 파라미터를 사용할 때의 SEO상의 주의점 | SEO 연구소 사쿠라 사쿠라보

    코드

    좋은 웹페이지 즐겨찾기