2017년 당시 다니던 전문학교의 학원제 특설 사이트를 만들면서 벌어진 이야기(당시 깨달았던 제작 요점 등 안내 포함)다.
※ 학창시절에 만든 학원제 사이트 이야기 [백엔드편] 같이 볼 수 있었으면 좋겠어요.

안 돼, 사이트가 무거워.

일단 사이트는 완성됐지만 현지에서 읽는 속도가 빨라 눈치채지 못했지만, 이미지를 많이 쓰는 사이트인 만큼 대여 서버로 실제 사이트를 방문하면 읽는 시간은 약 5~7초다.
Google의 PageSpeed Insights와 대치하면서 당시 개선된 기억을 되찾았습니다.
그렇다면 실제 대책을 시행한 것들로 나뉘어 이제 이걸 하면 좋을 것 같은 것들로 소개한다.

실제 진행된 사이트 경량화 조치

투과된 이미지를 jpg 이미지로 변환할 필요가 없습니다

png의 특징은 정보를 통해 화질이 나빠지지 않는 것이지만 다른 한편, 이미지의 크기가 커지는 것이 병목이다.
실제 투과할 이미지가 거의 없기 때문에 Illustrator로 pg에 저장된 이미지를 jpg로 변환합니다.

고해상도 이미지 사이즈 축소 & 압축

좋은 이미지를 쓰고 싶어 디지털카메라와 함께 각 부스, 프로그램 사진을 한눈에 찍었다.결정된 이미지는 사이즈 축소 & 압축을 단호히 진행했습니다.
다음 링크의 온라인 압축 도구를 사용했습니다.
JPG 이미지를 온라인으로 압축

촬영한 그림에서 필요하지 않은 영역을 재단합니다

물론 이미지의 여분의 영역은 CSS가 어떻게 긁는가가 아니라 이미지 편집 소프트웨어로 얌전히 편집했다.

Webp 이미지 활용

Photoshop의 WebP 플러그인을 사용하여 더욱 경량화할 수 있습니다.
Telegraphics - Free plugins for Photoshop & Illustrator...and other software

https://caniuse.com/#search=webp
변함없는 지지율(Edge 지원!?)나는 크롬을 사용하는 사람들에게 효과가 좋다고 생각해서 웹 사이트의 메인 시각도와 글로벌 네비게이션 이미지를 사용했다.
이런 느낌으로 WebP 이미지 읽기

<picture>
    <source type="image/webp" srcset="/img/header.webp">
    <img src="/img/header.png" alt="">
</picture>

이렇게 하면 웹 이미지가 지원되지 않는 브라우저에 대응하는 동시에 웹 이미지를 읽는 브라우저는 pg가 아니라 웹 이미지를 읽을 수 있다.

CDN 활용

Swiper는 CDN으로 읽습니다.

PDF 파일의 압축·UA 판정

본학원제의 특설 사이트에서는 소책자를 다운로드할 수 있지만 입고 데이터를 직접 pdf 파일로 만들면 수백 MB가 되기 때문에 pdf를 압축하기도 했다.
또한 모바일 브라우저에서 pdf 파일을 열 수 없어 다운로드를 시작했기 때문에 js에서 사용자 에이전트 판단을 실시했고 모바일 브라우저에서 링크를 pdf 데이터에서 이미지 데이터로 변경했다.

이미 시행된 줄 알았는데 시행되지 못한 조치

이렇게 하려고 했는데~?

gzip 사용

gzip은 zip 등과 같은 압축 파일의 일종으로 css와 js를 gzip으로 압축한다.htaccess에서 gzip 파일을 사용하면 사용할 수 있습니다. (물론 모든 임대 서버는 사용할 수 있지만 사용할 수 없습니다.)

minify화

기본 중의 기본 지식을 익히고 싶었지만 그러지 못했다.
학원제에서도 홈페이지를 수정해 하나하나 미니피쉬를 진행하기 힘들지...
이럴 때 임무 주자를 능숙하게 사용할 수 있다면.

총결산

이로써 자신이 만든 2017년도 학원제 특설 사이트는 지금까지 가장 빨랐다.
대단히 기쁘다.