Last Updated on 2021-11-21 by BallPen
구글 웹마스터도구의 ‘코어웹바이탈’에서 데스크톱 환경의 LCP가 2.5초 초과하는 문제를 알려왔어요. 그래서 GCP 부팅디스크를 SSD로 변경했더니 문제가 해결되었습니다.
GCP 부팅디스크 유형을 ‘표준영구디스크’로 사용해왔어요. 그런데 약 보름전에 구글 웹마스터도구(Google Search Console)에서 데스크톱 LCP 2.5초 초과 문제에 대한 개선이 필요함을 알려왔습니다.
그래서 여러 방법을 시도하다가 GCP 부팅디스크를 ‘표준영구디스크’에서 ‘균형있는영구디스크’로 변경해보기로 했습니다.
변경했더니 문제가 싹 해결되었어요.
이 글은 바로 그 GCP 부팅디스크 변경 요령에 대한 내용입니다.
혹시 LCP 문제 때문에 여기까지 오신 분은 서버의 하드디스크 속도가 LCP에 미치는 영향이 어느정도 인지 가늠하는 관점에서 한번 쭉 읽어보세요.
아울러 모바일 환경에서 LCP 2.5초 초과 문제를 Cloud CDN 구축으로 해소한 내용을 소개해 드린 바 있습니다. 관련 내용이 궁금하신 분은 아래 링크를 클릭하세요.
이번 글의 목차는 다음과 같습니다.
Contents
1. LCP문제:2.5초 초과(데스크톱) 개선 필요성 알림
아래 이미지는 구글웹마스터도구의 초기화면입니다.
왼쪽에 메뉴가 있는데 그 중에서 ‘코어 웹 바이탈’ 탭이 있어요. 이것은 사용자가 웹사이트에서 느끼게 되는 속도 및 성능과 관련된 정보들을 알려주는 메뉴입니다.
‘코어 웹 바이탈’ 메뉴에서 큰 문제가 없으면 웹사이트가 사용자에게 제공하는 속도, 성능, 모바일 편의성 등 가장 기본적이고 핵심적인 측면에서의 사용자 경험을 만족하는 것으로 볼 수 있어요.
구글 웹마스터도구의 왼쪽 메뉴에 ‘코어 웹 바이탈’ 탭이 있습니다.
그런데 약 보름전에 코어웹바이탈의 데스크톱 화면에서 아래 이미지처럼 ‘개선이 필요한 URL 61개’가 있음을 알려왔습니다.
61개면 거의 제 블로그 전체의 글에 해당해요.
‘코어 웹 바이탈’ 화면. 데스크톱 접속환경에서 61개의 개선이 필요한 URL이 있음을 알리고 있습니다. 위쪽에 있는 모바일 접속환경 데이터는 제 블로그 역사가 짧아 아직 활성화되지 않았어요.
구체적인 내용을 알고 싶어 ‘보고서열기’ 버튼을 클릭했어요. 그랬더니 아래 화면이 나옵니다.
61개의 URL에서 LCP 문제: 2.5초 초과(데스크톱)의 개선이 필요함을 알리고 있는 화면
위 이미지처럼 개선이 필요한 항목은 바로 ‘LCP 문제: 2.5초 초과(데스크톱)’이었어요. LCP(Largest Contentful Paint)는 사용자가 URL을 요청한 시점부터 표시 영역에 가장 큰 시각 콘텐츠 요소를 렌더링하는 데 걸린 시간입니다.
그러니까 쉽게 말해 LCP가 너무 길면 웹사이트의 화면이 늦게 뜬다는 의미에요. 이와 같은 상태 측정 항목의 기준은 코어 웹 바이탈 보고서에 잘 나와 있어요.
코어 웹 바이탈 보고서에 따르면 페이지 로드 시간이 1초에서 3초로 늘어나면 사용자의 이탈률은 32%증가하고 페이지 로드 시간이 1초에서 6초로 늘어나면 이탈률은 106% 증가한다고 해요.
따라서 코어 웹 바이탈에서 알리는 문제는 적극 개선하는 것이 블로그를 방문하는 사람들의 사용자 경험을 높일 수 있어요.
아래 이미지는 LCP값을 조회해볼 수 있는 PageSpeed Insights 웹사이트의 초기 화면입니다. 아래 그림과 같이 블로그 주소를 입력하고 ‘분석’을 클릭하면 LCP 값을 조회할 수 있어요.
그런데 제가 미처 화면을 캡쳐해놓지 않아 LCP가 2.5초를 초과하고 있었음을 보여드리지는 못해요. 일단 믿어주세요. 제 블로그는 LCP 값이 2.5초를 초과했습니다. 나중에 아래쪽에서 보여드리는 개선값과 비교해보세요.
코어 웹 바이탈에서 활용하는 PageSpeed Insights 웹페이지의 초기 화면. 검색창에 블로그 URL을 입력하고 분석 버튼을 클릭하면 LCP 정보를 볼 수 있어요.
2. GCP 부팅디스크 유형 변경 필요성
GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrow디스크’를 클릭하면 아래 이미지를 볼 수 있어요.
여기서 여러분의 워드프레스 VM 인스턴스의 디스크 정보를 볼 수 있습니다. 저의 경우 아래 그림과 같이 워드프레스를 운영하는 VM인스턴스의 하드디스크가 ‘표준 영구 디스크’로 설정되어 있음을 볼 수 있습니다.
표준 영구 디스크는 기계식 하드디스크입니다. 물론 비용은 저렴합니다만 읽기와 쓰기 속도가 SSD(Solid State Drive)보다는 한참 느려요. 처음 VM 인스턴스 생성할 때 비용을 절약하려고 ‘표준 영구 디스크’로 설정했는데 이제 이것을 SSD로 변경하려고 합니다.
GCP 부팅디스크 설정 상태 확인. 디스크 메뉴에서 워드프레스 VM 인스턴스의 부팅디스크를 확인할 수 있습니다. 저의 경우 기계식 하드디스크인 표준 영구 디스크로 설정되어 있어요.
그런데 이제부터가 문제입니다. VM 인스턴스의 CPU와 RAM은 VM인스턴스를 중지하고 설정을 변경한 다음에 재시작하면 쉽게 바꿀수 있어요. 그런데 부팅디스크를 어떻게 바꾸어야 할까요?
이제부터 그 변경절차를 상세히 알려드립니다. 어렵지 않아요. 따라 해보세요.
3. GCP 부팅디스크 변경 절차
3-1. 워드프레스 VM 인스턴스 중지하기
아래 그림은 GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrowVM 인스턴스’를 클릭하면 볼 수 있어요. 여기에서 여러분의 워드프레스 VM 인스턴스 이름을 클릭하세요.
VM 인스턴스 목록에서 워드프레스 인스턴스를 확인하고 이름을 클릭합니다.
그러면 아래의 화면을 상단으로 해서 아래쪽에 긴 정보들이 나타납니다.
여기에서 가장 상단에 있는 ‘중지’ 버튼을 누르세요. 물론 이 버튼을 누르게 되면 인터넷에서 블로그 접속이 중단됩니다.
블로그 중단시간이 길어지면 방문자들이 불편을 겪을 수 있으니 아래에 이어지는 절차들을 되도록이면 몇시간 이내에 빠르게 끝내는게 좋아요.
워드프레스 VM 인스턴스를 중지시키기 위해 ‘중지’ 버튼을 누르세요.
참고로 GCP에서 VM 인스턴스를 중지하느냐 정지하느냐에는 차이가 있어요. 중지를 하게되면 인스턴스를 종료하게 되어 비용이 더 이상 부과되지 않습니다. 그러나 정지를 하게되면 OS 메모리, 기기 상태, 애플리케이션 상태를 보존하기 때문에 비용이 청구됩니다.
다시 VM인스턴스 목록 화면으로 돌아가서 워드프레스 VM 인스턴스가 제대로 중지되었는지 확인합니다.
3-2. 워드프레스 VM 인스턴스의 스냅샷 만들기
워드프레스 VM 인스턴스가 중지되면 스냅샷(snapshot)을 만듭니다. 스냅샷은 데이터 백업도구라고 보시면 됩니다.
GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrow스냅샷’을 클릭하면 아래 화면을 볼 수 있어요.
이 화면 상단에 있는 ‘스냅샷 만들기’를 클릭하세요.
스냅샷은 백업 도구 중의 하나입니다. 스냅샵 만들기를 클릭하여 시작할 수 있습니다.
그러면 아래의 화면이 나옵니다.
일단 ‘이름’은 여러분들이 편하게 만드세요. 그냥 스냅샷에 이름을 붙인다고 생각하세요. 중요한것은 ‘소스 디스크’입니다. 이곳을 클릭하면 여러분들이 운영하는 VM인스턴스 목록이 나와요. 여기서 스냅샷을 만들 VM인스턴스를 선택하면 됩니다.
아까 위에서 우리는 워드프레스 VM인스턴스를 중지시켰잖아요. 그것을 선택하세요. ‘위치’는 스냅샷을 저장할 위치를 말합니다. 목록중에 선택하시면 되는데 VM인스턴스의 리전과 다른곳을 선택하면 전송 수수료가 발생할 수 있어요.
모두 다 하셨으면 가장 하단에 있는 ‘만들기’ 버튼을 누르시고 스냅샷이 만들어질때까지 기다리세요.
스냅샷 만들기 상세 화면
조금 기다리면 스냅샷 목록에서 만들어진 스냅샷을 확인할 수 있어요. 아래 이미지처럼요.
스냅샷 목록 화면에서 스냅샷이 제대로 만들어졌음을 확인할 수 있습니다.
3-3. 스냅샷을 활용하여 GCP 부팅디스크 새로 만들기
이제는 부팅디스크를 새로 만들고, 그 부팅디스크에 백업받은 스냅샷을 복원합니다. 물론 이 과정에서 부팅디스크 유형을 SSD기반의 ‘균형있는영구디스크’로 설정할거에요.
GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrow디스크’를 클릭하면 아래 화면을 볼 수 있어요.
가장 상단에 있는 ‘디스크 만들기’ 버튼을 클릭하세요.
디스크 메뉴에서 ‘디스크만들기’ 버튼을 클릭합니다.
그러면 아래 화면이 나타납니다. 일단 ‘이름’은 여러분들 편하게 만드세요. ‘위치’는 생성된 디스크가 놓이는 지역적 위치를 말합니다. 종전에 사용하던 영역이나 리전을 선택하면 됩니다.
가장 중요한 것은 소스인데요. ‘디스크소스유형’에서 스냅샷을 선택한 후 그 아래에 있는 ‘소스 스냅샷’에서 위에서 생성했던 스냅샷을 선택해 주세요.
또한 ‘디스크 설정’이 있습니다. 거기에서 만들고자 하는 디스크 유형을 선택하면 됩니다. 저는 ‘균형있는 영구 디스크’를 선택하겠습니다. 참고로 ‘표준영구디스크’가 비용이 제일 저렴하게 청구되지만 느립니다.
GCP 부팅디스크 생성을 위한 화면
또한 디스크 용량의 크기를 선택할 수 있어요. 10 GB이상으로 필요한 만큼 설정하면 됩니다.
그 아래에 나오는 ‘스냅샷 일정 사용 설정’을 하고 싶으시면 설정하세요. 다만 나중에 소정의 비용이 청구될 수 있어요. ‘암호화’는 기본값으로 설정하세요.
여기까지 모두 다 하셨으면 제일 하단에 있는 ‘만들기’ 버튼을 누르세요. 잠시 기다리신 후 디스크로 다시 이동하면 만들어진 디스크가 목록에 나타납니다. 그리고 ‘균형있는 영구 디스크’가 잘 만들어졌네요.
새로운 GCP 부팅디스크 생성 완료
3-4. 이전 GCP 부팅 디스크 분리 및 새로운 부팅 디스크 연결하기
이제는 위에서 만든 ‘균형있는 영구 디스크’로 만들어진 부팅 디스크를 VM 인스턴스에 연결하면 끝납니다.
다시 GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrowVM 인스턴스’로 이동하세요. 그러면 아까 제일 처음 단계에서 중지한 워드프레스 VM 인스턴스가 있을거에요. 거기에서 워드프레스 VM인스턴스 이름을 클릭하세요.
그러면 아래의 화면을 시작으로 길게 정보가 나오는데요. 거기에서 가장 위에 있는 ‘수정’버튼을 클릭하세요.
새로 생성한 GCP 부팅디스크와 VM 인스턴스를 연결하기 위해서는 VM 인스턴스를 수정해야 합니다.
그리고 아래 방향으로 쭉 내리면 아래 그림처럼 ‘Boot Disk’ 설정하는 영역이 있어요. 그리고 아래 그림처럼 x표시를 볼 수 있을텐데요. 이 버튼을 누르면 예전 표준영구부팅디스크가 VM 인스턴스에서 분리됩니다.
종전 GCP 부팅디스크 분리 및 새로운 부팅디스크를 연결하기 위한 화면
그 다음에 제가 화면 캡처를 미처 못했는데요. 바로 아까 위에서 만든 부팅디스크를 연결할 수 있도록 ‘추가하기’ 또는 ‘add item’창이 열립니다. 그 다음에 새롭게 만든 부팅디스크를 선택하면 됩니다. 클릭 한두번이면 되요. 어렵지 않게 할 수 있어요.
잘모르시겠으면 여기를 클릭하면 상세한 절차를 알 수 있어요.
이 과정을 통해 이전의 부팅디스크가 분리되고 새롭게 만든 ‘균형있는 영구 디스크’ 가 연결됩니다. 모두 다 하셨으면 저장 버튼을 누르세요.
3-5. 워드프레스 VM 인스턴스 재시작하기
고생 많으셨습니다. GCP 좌측 상단의 ‘햄버거그림 \rightarrowCompute Engine \rightarrowVM 인스턴스’로 이동하세요. 그러면 워드프레스 VM 인스턴스가 중지된 상태로 있을거에요. 이름을 클릭하세요.
그러면 아래의 화면이 나타날 거에요. 물론 아래쪽으로 길게 다른 정보가 나오는데요. 무시하시고 아래 그림처럼 재시작 버튼을 누르세요.
워드프레스 VM 인스턴스의 재시작
재시작이 완료되면 모두 끝났습니다. 여러분의 블로그 주소를 인터넷 주소창에 입력하고 블로그가 제대로 뜨는지 확인하시기 바랍니다.
4. LCP 2.5초 초과(데스크톱) 문제 해결 여부 확인
부팅디스크를 종전 표준영구디스크에서 균형있는영구디스크로 변경한 후에 LCP가 얼마가 나오는지 확인해보겠습니다. 균형있는영구디스크는 SSD기반이기 때문에 기계식 하드디스크보다 상대적으로 빨라요.
한번 결과를 보겠습니다. 아래 이미지에서 보이는 PageSpeed Insight로 가서 저의 URL을 입력하고 분석 버튼을 눌러보겠습니다.
PageSpeed Insight 초기화면
아래 이미지는 분석 결과입니다. 저는 데스크톱 LCP가 2.5초를 초과하는 문제가 발생했었기 때문에 그림처럼 데스크톱 탭을 선택했어요. 그리고 LCP(Largest Contentful Paint)값을 보니 1.4초가 나왔습니다.
2.5초를 초과하는게 문제였는데 2.5초 이내로 잘 나오는 것을 확인할 수 있습니다. 제 블로그 빠른가요? 한번 눌러보시고 속도를 가늠해보시기 바랍니다.
GCP 부팅디스크 유형 변경으로 LCP 값 2.5초 초과 문제가 1.4초로 해결되었습니다.
10월 18일에 부팅디스크 변경 후 10월 22일자 구글 웹마스터 도구의 코어웹바이탈에서 ‘개선이 필요한 URL’이 0개가 되고’빠른 URL 61’개로 문제가 해소된 것을 확인하였습니다.
지금까지 ‘LCP문제: 2.5초 초과(데스크톱)’ 문제를 해결하기 위해 GCP 부팅디스크 교체 하는 방법을 설명드렸습니다.
여기서 주의해야 할 것은 LCP 문제를 해결하기 위한 다양한 방법들이 존재합니다. 반드시 부팅디스크를 바꾸는 것이 유일한 해결 방법은 아니에요. 캐시정책을 효율적으로 사용하셔도 되고 CDN서비스를 활용하셔도 도움이 될 수 있어요. 이것 저것 다해도 안되면 마지막으로 저처럼 서버 성능을 업그레이드 하는 것을 추천합니다.
자세한 것은 PageSpeed Insight로 가서 여러분들의 웹페이지에 대한 분석결과를 확인하면 자세한 해법이 안내됩니다.
5. GCP 부팅디스크 유형 변경 절차 요약
마지막으로 GCP 부팅디스크 유형의 변경 절차를 요약하면 다음과 같습니다.
- 워드프레스 VM 인스턴스 중지하기
- 워드프레스 VM 인스턴스의 스냅샷 만들기
- 스냅샷을 활용하여 부팅디스크 새로 만들기
- 워드프레스 VM 인스턴스에서 이전 부팅디스크 분리 및 새로운 부팅 디스크 연결하기
- 워드프레스 VM 인스턴스 재시작하기
1 thought on “GCP 부팅디스크 유형 변경하여 LCP 2.5초 초과 문제 해결 경험담”