본문 바로가기

전체 글

 (21)
Lighthouse 최적화 점수 기준 lighthouse 최적화 점수 기준 lighthouse의 perfomence 부분에는 6가지 기준이 있습니다. first contentful paint First Contentful Paint marks the time at which the first text or image is painted. 첫번째 text나 이미지가 paint(render)된 시점. first meaningful paint First Meaningful Paint measures when the primary content of a page is visible 주요 내용이 render되서 보이는 시점. speed index Speed Index shows how quickly the contents of a page are v..
우리 서비스는 왜 느릴까? 우리 서비스는 왜 느릴까? SPA 이용한 웹 페이지는 js가 모두 렌더링 되기 전에는 표시되지 않습니다. 하지만 SPA 특성 상 js 파일의 크기는 매우 큽니다. 따라서 초기 렌더링이 느려질 수 밖에 없는 것입니다. 그럼 어떤 방식으로 성능을 테스트하고 어떻게 성능을 좋게 만들까요? 이와 관련된 내용을 적어 보았습니다. 테스트 환경 설명 우선, 진행중인 팀프로젝트를 webpack dev server를 이용해 localhost를 이용해 테스트 중입니다. 서버에 올릴 경우에는 DNS 서버에 접근하고, ip 주소를 알아내서 요청을 때리는 과정이 있기 때문에 더 느립니다. 그 점 감안하고 읽어주시길 바랍니다. 최적화.. 뭐로 테스트해요? 성능 최적화는 google에서 만든 lighthouse 라는 tool을 이..
seo와 h 태그 서론 회사에서 새로운 프로젝트를 시작하기 전에, SEO와 관련된 이야기가 나왔다. 어쨋든 페이지가 google이나 naver에 잘 뜨면 우린 좋은 것 아닌가? 우선 난, SEO에서 대표적인 meta tag를 이용한 seo에 관련해서 생각하고 있었다. 하지만 한 팀원분이 head tag (h1 ~ h6)에 대해서 얘기해주셨다. 회의 시간이 짧아서 자세히는 알지 못했지만, 어쨌든 seo와 h 태그가 밀접한 관련이 있다는 것을 알게 되었다. 이에 대해 궁금해져서 자세히 알아보도록 하겠다. h 태그는 무엇인가 h1~h6 태그는 html에서 title을 표현할 때 사용한다. (이제 h 태그라고 표현하겠다. ) h1이 가장 큰 title이고, h6가 가장 작은 title이다. title이라고 표현하면 p랑 다른게 ..

티스토리툴바