Follow Brian Li (@DecryptoBL) on Twitter.
Follow Brian Li (@bwhli) on Instagram.

워드프레스에서 이미지를 결합하여 네트워크 리퀘스트를 줄이는 방법

2019년 3월 10일

지난 몇 주간 저는 클라우드플레어 풀 페이지 캐시 이용, CSS 리팩토링, 페이지 로드의 리퀘스트 수를 줄이는 등, 웹사이트 최적화를 위해서 노력해 왔는데요. 여러분이 보시다시피 디크립토의 모든 페이지에는 트위터 아이콘이 왼쪽 상단에, 그리고 인스타그램 아이콘이 오른쪽 상단에 위치해 있습니다. 기존에 이 두 이미지는 각각의 PNG 이미지 파일이었는데요. 어느정도의 포토샵과 CSS 작업을 통해 이 수를 절반으로 줄이게 되었습니다. 그리고 이제 두 아이콘이 모두 하나의 PNG파일로 나타나게 되는데요.

이를 위해서 제가 가장 처음에 한 것은 두 이미지를 포토샵에 불러온 것이었습니다. 이 아이콘들을 나란히 놓고 그 사이에 추가 픽셀을 삽입하였죠. 아래의 이미지가 그 결과물입니다. 자세히 보시면 아마도 두 이미지 사이에 1px 정도의 공간을 보실 수 있을 것입니다.

다음으로, 아래의 CSS를 통해 “각각” 아이콘의 사이즈를 지정했는데요. 저는 또한 object-fit 을 사용해서 이미지의 크기가 자동으로 지정되지 않게 하였습니다.

.social-icons img {
height: 32px;
width: 32px;
object-fit: none;
}

다음으로 아래의 CSS를 통해 이미지의 상대적 위치를 지정하였는데요. 아이콘 사이의 픽셀로 인해 인스타그램 아이콘 상 추가된 1px을 눈여겨 보시기 바랍니다. 만약 여러분의 웹사이트에 이를 도입하고 싶으시다면, 개개의 아이콘 사이에 최소 1px 정도는 꼭 넣으시길 추천해 드립니다. 이렇게 하지 않으면 몇몇 브라우저에서는 에러가 뜰 수도 있거든요.

#twitter img {
object-position: 0 0;
}

#instagram img {
object-position: -33px 0;
}

이게 다 입니다! 이 방법으로 저는 제 이미지 리퀘스트를 50%나 절감하게 되었죠. 퍼포먼스 부스트가 있었을까요? 아마도 있었겠지만, 눈에 띌 만하지는 않습니다. 하지만 기분은 좋네요.


궁금한게 있으세요?

트위터이메일을 통해 연락주시기 바랍니다.