Lighthouse란?

Google이 OSS로 개발한 웹사이트(웹 앱)의 품질 검사 도구입니다.

Chrome 확장 프로그램으로 설치할 수 있으며 웹사이트의 표시 속도와 HTML 구조 검사, JS 라이브러리 버전에 의한 취약성의 유무 등을 알려줍니다.

SNS를 내장할 때의 문제점

웹사이트를 만들면 Twitter나 Instagram의 타임라인을 포함하고 싶어질 때가 있습니다.

이런 녀석입니다. (왼쪽이 Twitter, 오른쪽이 Instagram)



Twitter의 경우는 이런 코드를 기술하도록(듯이) 하는 지시입니다.

<a class="twitter-timeline" href="https://twitter.com/hinatan_net?ref_src=twsrc%5Etfw">Tweets by hinatan_net</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

안의 처리로서는, JavaScript의 로드가 완료하면 iframe이 임베드 되게 됩니다.

그런데 이런 처리를 넣으면 로드가 무거워지고 Lighthouse 점수가 내려갑니다.



읽고 있는 이미지 파일이 크다는 여러가지 불평을 말합니다.

대책

실제로는 다른 장소의 표시가 충분히 빠르면 체감 속도에는 문제는 없다고 생각합니다.
방금 전의 Lighthouse 결과의 스크린 샷에서도 첫 번째 프레임부터 이미 올바르게 웹 사이트가 표시되어 있기 때문에 방문자가 사이트로드가 느린 것으로 느껴지지 않을 것입니다.

다만, 다른 느린 장소를 조사하고 싶거나, 계속적인 체크를 하고 싶은 경우에는 이 원인을 방치해 스코어가 낮은 상태가 되어 버리는 것은 눈부심입니다.

그래서 아래와 같이 JavaScrit를 포함하고 타임 라인 부분은 별도의 파일로 지연 읽으면 OK입니다.

<script>
$(function(){
  setTimeout(function(){
    $("#timeline").load("/includes/timeline.html");
  }, 5000);
});
</script>

함께 로드시키면 스코어에 영향을 주기 때문에 지연해서 로드할 수 있다는 만큼의 잡담한 대처요법입니다만, 이것에 의해 스코어가 올라가, 다른 본질적인 튜닝에 눈을 돌릴 수 있습니다.



제 경우에는 사용하지 않는 CSS의 개소가 많기 때문에 줄일 수 있다고 합니다.

실제 동작은 사이트 을 볼 수 있다고 알 수 있다고 생각합니다.