!원문 캡처 · base31.org

속도는 가장 저렴한 디자인 개선책이지만, 제대로 작동할 때는 눈에 띄지 않아 소규모 사이트에서 가장 자주 빠진다. 새 프레임워크는 필요 없다. 네 가지를 결정하면 된다.

표시 크기에 맞춰 이미지 제공하기

인쇄용으로 내보낸 사진을 CSS로 줄여 표시하는 것은 소규모 사이트가 휴대전화에서 무겁게 느껴지는 가장 흔한 원인이다. 실제 표시 너비에 맞춰 내보내고, 최신 형식을 사용하며, 이미지가 로드되는 동안 텍스트가 튀지 않도록 너비와 높이를 지정한다.

사용하지 않는 글꼴 제거하기

글꼴은 어떤 글자든 읽기 전에 먼저 내려받아야 한다. 글꼴 패밀리는 두 개면 충분하고, 하나가 더 나을 때도 있다. 시스템 글꼴 묶음은 다운로드 비용이 전혀 들지 않는다. 특정 글꼴을 제목에만 쓴다면 해당 굵기만 불러온다.

서드파티 스크립트를 중요한 로딩 경로에서 제외하기

분석 도구, 채팅 위젯, 동의 배너는 기다리게 하지 않으면 콘텐츠보다 먼저 로딩 대기열에 들어간다. 페이지를 사용할 수 있게 된 뒤에 불러오고, 각각 필요한지 따져본다. 유용한 정보를 한 번도 제공하지 않은 스크립트라면 밀리초 단위의 비용만 계속 치르고 있는 셈이다.

레이아웃을 예측 가능하게 만들기

  • 늦게 로드되는 요소가 공간을 미리 차지하도록 해 독자가 화면을 누르는 동안 콘텐츠가 움직이지 않게 한다.
  • 실제 글꼴과 모양이 비슷한 대체 글꼴을 골라 글꼴이 바뀌어도 레이아웃이 달라지지 않게 한다.
  • 이미지가 전송되지 않고 자바스크립트가 차단된 상태에서도 첫 화면이 유용하도록 구성한다.
  • 개발에 사용하는 기기가 아니라 느린 연결을 이용하는 휴대전화에서 측정한다.

속도는 체감이다

사람은 밀리초를 지각하지 않는다. 화면을 다 스크롤하기도 전에 읽을 수 있는 페이지와 그렇지 않은 페이지의 차이는 알아챈다. 느린 경우를 기준으로 만들면 수치도 자연스럽게 따라온다.