본문으로 바로가기

쓰윔's FootballManager https://swimfm.tistory.com/

최적화

해당되는 글 4
thumbnail
그외/유용한 정보

웹페이지의 로딩 속도 최적화를 해 줄 크리티컬 CSS 개념을 알아봅시다.

일전에 이 글에서 렌더링 차단 리소스를 제거하는 방법을 알아본 적이 있습니다. 그 때 언급했던 방법이 바로 [**크리티컬 CSS**]인데, 당시에 설명이 부족했던 것 같아 자세히 써보려고 합니다. 참고로 테스트 블로그에서 이 기법의 적용 전/후의 페이지 분석을 해보면 이렇습니다. 생각보다 점수 상승폭이 커서 놀랐는데, 구글이 제공하는 페이지 분석기가 미국 서버에서 측정하는 특성상 편차가 좀 있어서 이런 결과가 나온 것 같습니다. 실제로는 이것만큼 드라마틱한 개선이 되진 않습니다.[각주*원인은 모르겠지만 Larget Contentful Paint가 유독 제 블로그에선 유동적으로 나오는데, 사용 전이 최악의 경우/사용 후가 운이 좋은 경우인 것을 감안해야 합니다.*] 크리티컬 CSS란? [기본* Critic..
thumbnail
그외/유용한 정보

PageSpeed Insights의 렌더링 차단 리소스를 제거해보자.

웹페이지의 속도를 결정하는 요소 중에서 렌더링 차단 리소스가 있습니다. 최대한 사용자에게 빠르게 웹페이지의 모습을 보여주려면 이 요소는 꼭 제거해둬야 합니다. 렌더링 차단 리소스를 측정하는 방법 우선 내 웹페이지에 렌더링 차단 리소스가 얼마만큼 있는지 알아보려면 측정을 해야합니다. 크롬,파이어폭스 같은 브라우저로 접속해 개발자모드의 네트워크탭으로 가서 일일히 측정할 수도 있지만, 편리한 건 역시 [**구글**]에서 제공하는 PageSpeed Insights입니다. 여기로 접속하셔서 측정해볼 웹페이지의 주소를 입력하고 분석을 누르면 끝입니다. 그리고 위의 사진처럼 렌더링 차단 리소스가 나옵니다. 이 골치아픈 리소스를 찾았으니, 이제 이 리소스의 실체를 알아볼 때입니다. 렌더링 차단 리소스란? 사용자가 웹페..
thumbnail
그외/유용한 정보

티스토리 블로그에 사용할 레이지로드 주입기

레이지 로드 주입기 alt변환 켜기 레이지로드 주입결과물 복사 자세한 사용법은 아래에 정리해뒀습니다. 처음 사용하시는 분의 경우 주의사항도 읽어보시는 게 좋습니다. 그리고 아직까지 레이지로드가 어떤 개념인지 모르신다면, 제가 쓴 글을 읽어주세요. 주입기 사용 설명서 티스토리에서 레이지로드를 사용하려면 번거로운 과정을 거쳐야 합니다. 그래서 손쉽게 레이지로드를 주입할 수 있도록 도구를 만들어봤습니다. [참고*이 도구는 신에디터/구에디터 모두 지원합니다.*] 방법은 간단합니다. 글 작성을 완료하신 후에 [**HTML 모드**]로 가신 후에 태그를 모두 복사해옵니다. 그리고 원본 텍스트 입력란에 붙여넣기 해주세요. 그리고 레이지로드 주입을 누르면 결과물이 나옵니다. 결과물복사를 눌러서 복사해주신 후에 그걸 다..
thumbnail
그외/유용한 정보

티스토리에서 레이지 로드(Lazy Load)를 사용하는 방법

요즘 웹에선 레이지 로드(Lazyload) 기능을 사용하는 게 당연시 됩니다. 커다란 커뮤니티에 들어가보면 이 기능이 없는 곳이 더 드뭅니다. 모두들 짐작하시겠지만 레이지로드가 로딩 속도를 빠르게 해주고, 사용자의 데이터와 서버측의 데이터를 아껴주는 효과가 있기 때문입니다. LazyLoad란? 웹에서 가장 큰 비중을 차지하는 데이터는 이미지입니다. 글자를 실컷 타이핑해도 데이터는 얼마 나오지 않지만 고화질 이미지 한 두개면 메가바이트를 초과하는 용량이 됩니다. 심지어 경우에 따라선 압축기술이 발전된 동영상보다도 더 많은 용량을 차지하는 게 이미지입니다.[각주*특히 나온지 오래된 JPG,GIF등의 포맷이 쓰이는 것도 용량이 큰 이유입니다.*] 그래서 웹개발자들은 LazyLoad라는 깔끔한 기법을 만들었습니..
간편 메모장
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

복사하기  저장
× 내용 모두 지우기 내용 모두 복사하기
메모장입니다. 시크릿 모드가 아니면 내용이 저장됩니다.