지금 보면..
서버에서 가져오는 데이터가 불러와지는 데에 시간이 생각보다 많이 소요되고 있습니다.
왜 그런가 하고 봤더니
빌런의 페이지를 끌어오는 소스코드를 살펴보면 됩니다.
보시면 3129줄의 데이터를 가져왔다는 것으로 표기됩니다.
근데 여기서 네이버를 한번 보겠습니다.
30.4kb 91ms
‘그럼 코드가 적은거 아니야?’
아뇨. 네이버는 7704줄을 사용합니다.
근데 왜 빌런의 페이지와 네이버의 페이지는 용량의 차이가 발생할까?
답은 ‘ ’와 ‘ ’ 입니다.
→ 줄바꿈
→ 탭여백
코드를 보면 빌런은 3129줄이라는 내역이 표기되지만.
네이버는 - 으로 표기됩니다.
왜 그러는 것이냐.
바로. 컴퓨터는 우리가 보는 가시성 코드가 필요 없기 때문이죠.
즉. 컴퓨터가 읽을 필요가 없는 여백, 탭, 줄바꿈은 쓸때없는 자원의 낭비가 된다. 라고 보시면 됩니다.
어차피 알아서 잘 읽으니까요
반환될때
HTML은 html-minifier
CSS는 cssnano
JS는 uglify-js
요런걸 이용해서 압축을 시켜서 전송하도록 설정하는 것이 좋습니다.
좀 더 빠른 화면 로딩과 데이터 비용 절감을 위해 적어봤습니다.
는.. 보니까 메인페이지만 문제가 발생되는 것으로 보아
메인페이지의 리소스를 불러오는 것 중 하나가 지연을 발생시키는 것으로 보입니다.
메인페이지 Largest Contentful paint 2.54초
이벤트 페이지 Largest Contenntful paint 0.40초.
0 / 0
