페이지 속도를 수동으로 최적화 해봤습니다.
작성자
eungabi
작성일
2022-08-22 12:04
조회
226
안녕하세요.
샌드위치 입니다.
이번에 사이트의 속도를 수동으로 최적화를 진행 해봤습니다.
구글에서 제공하는 PageSpeed Insights를 이용하면 페이지의 속도를 측정하고, 개선 할 수 있는 사항에 대해서 피드백을 줍니다.
저는 사실 지금까지 페이지 속도에 대해서 크게 신경을 쓰지 않았습니다.
왜냐하면 사람이 실제 체감하는 페이지 속도는 별 차이가 없는 것 같았기 때문 입니다.
하지만 페이지 속도가 높을수록 사용자의 페이지 방문 경험을 증가 시킨다고 합니다.
페이지의 속도가 느리면, 로딩 중에 뒤로가기 후 다른 검색 정보를 찾을 확률이 높다고 합니다.
실제로 저의 경험을 미뤄 생각 해보면 맞는 것 같습니다.
저도 무언가 검색을 할때, 사이트가 늦게 뜨면 무의식적으로 뒤로가기 하여 다른 정보를 탐색하곤 합니다.
물론 게시글의 내용이 알찬 것도 중요 하지만, 내가 올린 게시글을 방문자가 로딩 전에 이탈 해버린다면 의미가 없기 때문 입니다.
또한 구글에서는 페이지의 속도를 매우 중요하게 생각하고 있습니다.
그래서 구글에서는 AMP 라는 프로젝트를 진행 하고 있습니다. AMP는 Accelerated Mobile Pages의 약자 입니다. 즉, 모바일 전용 빠른 웹페이지를 의미 합니다.
그 만큼 구글에서는 관심을 많이 가지고, 이러한 프로젝트를 진행하고 있지만, 아직 까지는 AMP를 통해 만든 모바일 전용 페이지는 많지 않습니다.
왜냐하면 요즘은 대부분의 페이지가 동적으로 동작 하기 때문 입니다.
AMP는 정적 페이지에 좀 더 친화적 입니다.
동적 페이지의 경우 AMP를 적용하게 되면, 페이지의 표현이 제대로 되지 않거나, 기능이 동작하지 않는 경우가 많습니다.
그래서 보통은 모바일로 사이트를 접근할 경우 AMP로 만든 페이지를 리디렉션 시켜서 보여 주거나 별도의 모바일 도메인을 통해 운용 하기도 합니다.
또한 구글에서는 이러한 페이지 속도를 SEO 평가 요소에도 반영을 한다고 했습니다.
그래서 생각한게 같은 내용의 게시물 페이지가 서로 다른 도메인에 존재 할 때, 페이지 속도가 더 높은 게시물이 낮은 게시물 보다 1점이라도 높기 때문에 더 상위에 랭크가 되지 않을까 입니다.
그래서 저는 사이트의 속도를 최적화 하기 위해 여러가지 자료를 찾아 봤습니다.
워드프레스를 운영하는 저로써는 대부분 워드프레스에 대한 자료를 찾아 봤는데, 대부분 플러그인을 쓰라는 글 밖에 찾지 못 했습니다.
그래서 저는 그 플러그인들이 어떠한 작용을 통해서 페이지 속도를 증가 시키는지에 대해서 유심히 살펴 봤습니다.
그러한 플러그인들은 대부분 공통적으로 사이트를 이루는 구조물에 대해서의 최적화를 설명 하고 있었습니다.
이미지는 사이트가 로딩 될 때, 생각보다 많은 로드 시간을 가집니다.
그것도 그런게 보통 이미지 단위가 메가(MB) 인 경우가 많기 때문인데, 이러한 이미지에 대한 사이즈나 압축을 통해서 최적화가 가능 합니다.
놀라운것은 사이트의 모든 이미지를 webp 확장자로 변경할 경우, 70% 이상의 용량 절감 효과가 있습니다.
그리고 사이즈를 사용 할때, 이미지 사이즈를 미리 맞추는 것 입니다. 가령 100*100 의 공간에 500*500의 사이즈를 넣는 경우 입니다.
이미지가 표현될 공간은 100 이지만 이미지 사이즈는 500이기 때문에, 쓸데 없는 이미지 용량만 높아지게 됩니다. 500의 사이즈를 100으로 변경하면 이미지의 용량도 줄어들고, 표현하고자 하는 공간에 딱 맞는 이미지 이기 때문에 최적화가 되었다고 볼 수 있습니다.
다음은 자바스크립트 라던지 CSS의 로딩에 대한 것이었습니다.
저는 엘리멘터 프로라는 페이지 빌더를 사용 하는데, 생각보다 엄청 무거운 플러그인 입니다. 그렇기 때문에 페이지 속도에 악영향을 미치게 됩니다.
또한 사이트를 표현하고자 하는데 있어서 불필요한 자바스크립트 라던지 CSS를 엘리멘터에서 자동으로 로딩 하기 때문에, 직접적인 제어도 할 수가 없었습니다. 저는 이를 자체 테마로 해결 하게 되었습니다.
엘리멘터 프로에서는 테마 빌더를 제공 하는데, 테마 빌더로 만든 구성을 비슷하게 자체 제작한 테마로 이식하는 것 이었습니다.
자바스크립트로 실행 되던 기능들을 최대한 html과 CSS를 통해 구동 할 수 있도록 변경하고, 미디어쿼리를 통해 반응형에도 신경을 썻습니다.
사실 디자인은 젬병이라 최대한 깔끔하게 만든다고 만들었지만, 작업을 하는 동안 웹 디자이너 분들이 매우 존경 스러웠습니다.
어떤가요? 제 사이트 정말 빠르지 않나요?
샌드위치 입니다.
이번에 사이트의 속도를 수동으로 최적화를 진행 해봤습니다.
구글에서 제공하는 PageSpeed Insights를 이용하면 페이지의 속도를 측정하고, 개선 할 수 있는 사항에 대해서 피드백을 줍니다.
저는 사실 지금까지 페이지 속도에 대해서 크게 신경을 쓰지 않았습니다.
왜냐하면 사람이 실제 체감하는 페이지 속도는 별 차이가 없는 것 같았기 때문 입니다.
하지만 페이지 속도가 높을수록 사용자의 페이지 방문 경험을 증가 시킨다고 합니다.
페이지의 속도가 느리면, 로딩 중에 뒤로가기 후 다른 검색 정보를 찾을 확률이 높다고 합니다.
실제로 저의 경험을 미뤄 생각 해보면 맞는 것 같습니다.
저도 무언가 검색을 할때, 사이트가 늦게 뜨면 무의식적으로 뒤로가기 하여 다른 정보를 탐색하곤 합니다.
물론 게시글의 내용이 알찬 것도 중요 하지만, 내가 올린 게시글을 방문자가 로딩 전에 이탈 해버린다면 의미가 없기 때문 입니다.
또한 구글에서는 페이지의 속도를 매우 중요하게 생각하고 있습니다.
그래서 구글에서는 AMP 라는 프로젝트를 진행 하고 있습니다. AMP는 Accelerated Mobile Pages의 약자 입니다. 즉, 모바일 전용 빠른 웹페이지를 의미 합니다.
그 만큼 구글에서는 관심을 많이 가지고, 이러한 프로젝트를 진행하고 있지만, 아직 까지는 AMP를 통해 만든 모바일 전용 페이지는 많지 않습니다.
왜냐하면 요즘은 대부분의 페이지가 동적으로 동작 하기 때문 입니다.
AMP는 정적 페이지에 좀 더 친화적 입니다.
동적 페이지의 경우 AMP를 적용하게 되면, 페이지의 표현이 제대로 되지 않거나, 기능이 동작하지 않는 경우가 많습니다.
그래서 보통은 모바일로 사이트를 접근할 경우 AMP로 만든 페이지를 리디렉션 시켜서 보여 주거나 별도의 모바일 도메인을 통해 운용 하기도 합니다.
또한 구글에서는 이러한 페이지 속도를 SEO 평가 요소에도 반영을 한다고 했습니다.
그래서 생각한게 같은 내용의 게시물 페이지가 서로 다른 도메인에 존재 할 때, 페이지 속도가 더 높은 게시물이 낮은 게시물 보다 1점이라도 높기 때문에 더 상위에 랭크가 되지 않을까 입니다.
그래서 저는 사이트의 속도를 최적화 하기 위해 여러가지 자료를 찾아 봤습니다.
워드프레스를 운영하는 저로써는 대부분 워드프레스에 대한 자료를 찾아 봤는데, 대부분 플러그인을 쓰라는 글 밖에 찾지 못 했습니다.
그래서 저는 그 플러그인들이 어떠한 작용을 통해서 페이지 속도를 증가 시키는지에 대해서 유심히 살펴 봤습니다.
그러한 플러그인들은 대부분 공통적으로 사이트를 이루는 구조물에 대해서의 최적화를 설명 하고 있었습니다.
이미지는 사이트가 로딩 될 때, 생각보다 많은 로드 시간을 가집니다.
그것도 그런게 보통 이미지 단위가 메가(MB) 인 경우가 많기 때문인데, 이러한 이미지에 대한 사이즈나 압축을 통해서 최적화가 가능 합니다.
놀라운것은 사이트의 모든 이미지를 webp 확장자로 변경할 경우, 70% 이상의 용량 절감 효과가 있습니다.
그리고 사이즈를 사용 할때, 이미지 사이즈를 미리 맞추는 것 입니다. 가령 100*100 의 공간에 500*500의 사이즈를 넣는 경우 입니다.
이미지가 표현될 공간은 100 이지만 이미지 사이즈는 500이기 때문에, 쓸데 없는 이미지 용량만 높아지게 됩니다. 500의 사이즈를 100으로 변경하면 이미지의 용량도 줄어들고, 표현하고자 하는 공간에 딱 맞는 이미지 이기 때문에 최적화가 되었다고 볼 수 있습니다.
다음은 자바스크립트 라던지 CSS의 로딩에 대한 것이었습니다.
저는 엘리멘터 프로라는 페이지 빌더를 사용 하는데, 생각보다 엄청 무거운 플러그인 입니다. 그렇기 때문에 페이지 속도에 악영향을 미치게 됩니다.
또한 사이트를 표현하고자 하는데 있어서 불필요한 자바스크립트 라던지 CSS를 엘리멘터에서 자동으로 로딩 하기 때문에, 직접적인 제어도 할 수가 없었습니다. 저는 이를 자체 테마로 해결 하게 되었습니다.
엘리멘터 프로에서는 테마 빌더를 제공 하는데, 테마 빌더로 만든 구성을 비슷하게 자체 제작한 테마로 이식하는 것 이었습니다.
자바스크립트로 실행 되던 기능들을 최대한 html과 CSS를 통해 구동 할 수 있도록 변경하고, 미디어쿼리를 통해 반응형에도 신경을 썻습니다.
사실 디자인은 젬병이라 최대한 깔끔하게 만든다고 만들었지만, 작업을 하는 동안 웹 디자이너 분들이 매우 존경 스러웠습니다.
어떤가요? 제 사이트 정말 빠르지 않나요?
뉴스픽 & 오아시스 피드
전체 0