LazyLoad
- 처음부터 다운로드 받아오지 않고, 스크롤을 내릴 때 이미지를 다운로드 받아오게 하는 것
-> 데이터의 낭비를 막을 수 있음
Preload
- 다른페이지에서 받아봐야할 사진들을 미리 preload한 후, 글로벌한 변수에 담아서 사용함
<!DOCTYPE html>
<html lang="ko">
<head>
<title>프리로드</title>
<!-- 프리로드: 한 번에 6개씩 받아오므로, body태그의 이미지는 가장 마지막에 다운로드 -->
<!-- 눈에 보이는 이미지를 먼저 다운로드 받아서 보여주고, 클릭하면 실행되는 JS는 나중에 받아오기 -->
<!-- 따라서, DOMContentedLoaded 이후, Load까지 완료되는 최종 로드 시간이 더 짧아짐 -->
<link rel="preload" as="image" href="./dog.jpeg" />
<!-- 일반로드 -->
<link rel="stylesheet" href="./index.css" />
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>
<script src="index4.js"></script>
<script src="index5.js"></script>
<script src="index6.js"></script>
</head>
<body>
<img src="./dog.jpeg" />
</body>
</html>Prefetch
- 마우스 오버하면 미리 fetch를 함
->
<!DOCTYPE html>
<html lang="ko">
<head>
<title>프리페치</title>
<!-- 프리페치: 다음페이지를 미리 다운로드 받으므로, 버튼 클릭시 페이지이동 빠름 -->
<link rel="prefetch" href="board.html" />
</head>
<body>
<a href="board.html">게시판으로 이동하기</a>
</body>
</html>이미지 Webp 확장자
- 구글에서 만든 이미지 포멧. 기존 이미지의 용량을 줄일 수 있는 장점이 있지만
화질이 좀 떨어짐- 구글에서 jpg to webp 이런 방식으로 검색하면 변경할 수 있음
Google PageSpeed Insights
- 실제 배포를 진행하고 나서, 내가 배포한 페이지의 개선할 점을 찾을 때 유용한 사이트
추천 라이브러리
react-dropzone
react-avatar-editor
react-beautiful-dnd(drop and drop)
developer(Frontend)