웹사이트 성능을 최적화하는 방법

06/12 2019
웹사이트의 성능을 최적화하는 방법

인터넷을 둘러보면 사람들이 관심을 잃기 전에 웹사이트가 로드될 때까지 기다리는 시간이 얼마나 적은지에 대해 인용된 많은 통계를 찾을 수 있습니다(이 경우 항상 웹 호스팅 제공업체를 비난하지는 마십시오) . 

고정 광대역 연결을 사용하는 사람들은 웹 사이트가 거의 즉시 표시되기를 기대하며 심지어 모바일 사용자도 무한한 인내심을 가지고 있지 않습니다. 

연구에 따르면 페이지의 최적 로드 시간은 3초이지만 대부분의 사이트는 그 두 배 또는 그 이상에 가깝습니다. 그리고 10초를 훨씬 넘으면 대부분의 사람들이 페이지를 떠나 다른 곳으로 갈 가능성이 높습니다. 

웹 페이지가 브라우저에 표시되는 데 걸리는 시간은 서버와 클라이언트 장치 간에 구분된 요인에 따라 달라집니다.

웹 디자이너가 제어할 수 없는 일로 인해 모든 사용자의 속도를 높일 수는 없지만 사이트를 최대한 효율적으로 만들어 대다수 방문자의 성능을 향상시키는 것이 실용적입니다. 

다양한 방법으로 속도를 높일 수 있지만 사이트 성능을 개선하는 데는 세 가지 핵심 요소가 있습니다. 이는 향상된 호스팅, 사이트 최적화 및 일부 플랫폼별 고려 사항입니다.

호스팅의 중요성

호스팅의 중요성

사이트가 웹 호스팅에 지출하는 금액은 일반적으로 특정 날짜에 예상되는 방문자 수에 비례하며 각 방문자가 머무는 시간과 탐색하는 페이지 수를 고려합니다.

이것이 보안 문제와 함께 상대적으로 소수의 회사가 내부적으로 사이트를 호스팅하는 주된 이유입니다. 

일반적으로 웹 호스팅은 특정 하드웨어가 웹사이트에 할당되지 않고 가상화를 통해 다른 사이트와 공유된다는 점에서 '가상'입니다. 

이 솔루션의 장점은 수요가 많은 시기에 사이트에 더 많은 리소스를 쉽게 할당할 수 있다는 것입니다. 호스팅 계약에서 이러한 유연성을 허용한다면 말입니다. 

결정해야 할 중요한 것은 수신할 예상 트래픽과 서비스를 적절하게 높이는 것입니다.

빠르게 성장하는 사이트가 있지만 호스팅 수준으로 인해 많은 방문자가 나타나면 응답하지 않기 시작하면 전체 프로젝트가 손상될 수 있습니다. 따라서 소규모로 시작한 다음 사이트가 성숙기에 도달하면 확장할 계획을 세우십시오. 

사이트 최적화

모든 웹사이트의 성능은 구축 방법과 사용하는 소프트웨어 기술에 따라 크게 달라집니다. 

프로토타입 사이트가 있으면 수행해야 하는 첫 번째 절차 중 하나는 로드하는 데 걸리는 시간에 대해 각 페이지에 점수를 매기는 것입니다. 페이지 성능을 측정하는 데 사용할 수 있는 수많은 도구가 있으며 그 중 일부는 주어진 페이지에서 가장 많은 지연을 초래한 원인을 정확히 식별하기 위해 타이밍을 분석합니다. 

이 테스트는 단일 PC에서 한 번만 수행해야 하는 것이 아닙니다. 방문자는 다양한 광대역 연결을 통해 다양한 위치에서 방문하고 다양한 유형의 장치를 사용할 것이기 때문입니다.

Wi-Fi와 셀룰러 연결 모두에서 모바일 플랫폼을 테스트하는 것이 특히 중요합니다. 그리고 이상적인 세상에서는 멀리 떨어진 지리적 위치에서 결과를 얻는 것도 귀중한 정보입니다. 

이 성능 데이터를 수집한 후에는 사이트로 돌아가서 사용자 경험을 향상시키기 위해 어떤 변경을 할 수 있는지 확인할 때입니다. 

다음은 쉽게 해결할 수 있는 사이트 속도를 저하시키는 상위 7가지 문제 목록입니다.

1. 다중 소스 페이지

페이지가 광고를 포함하여 다른 위치에서 오는 요소로 구성된 경우 속도에 큰 영향을 미칠 수 있습니다. 페이지는 사이트 외부의 요소가 얼마나 빨리 제공되는지에 따라 달라져 성능 문제를 악화시킵니다.

반복적으로 로드하는 데 시간이 너무 오래 걸리는 페이지가 있는 경우 속도를 늦추는 원인을 식별하고 제거하십시오.

2. 위젯 및 플러그인

이러한 구성 요소가 너무 많으면 다중 소스 페이지와 동일한 문제가 발생하지만 특히 WordPress 사이트에 영향을 미치는 문제입니다. 모든 종류의 캘린더, 애니메이션 버튼, 시계 등이 포함된 페이지를 미리 로드하려는 유혹이 강하지만 저항해야 합니다. 

이러한 기능을 실행하려면 서버 측 코드와 클라이언트 측 코드가 필요하며 로드가 완료되기 전에 다른 페이지 요소의 표시를 일시 중지하는 경우가 많습니다.

스케일링 그래픽

3. 그래픽 스케일링

완벽한 품질의 프레젠테이션을 위해 클릭할 수 있는 사진이 아닌 한 웹사이트 그래픽의 크기를 조정해서는 안 됩니다. 

크기를 늘리면 블록이 고르지 않거나 압축 아티팩트가 나타나기 때문에 좋지 않습니다. 

그래픽을 표시되는 것과 동일한 크기로 만들면 서버와 클라이언트 브라우저의 작업 부하가 줄어들고 사용자가 필요 이상으로 큰 그래픽을 다운로드하는 것을 방지할 수 있습니다.

4. 호환되지 않는 미디어

한때 PC에서 인기가 있었지만 지금은 거의 사용되지 않는 파일 형식이 많이 있습니다. 모바일 사용자는 액세스할 수 없으며 대부분의 데스크톱 사용자도 이전 브라우저 버전에서 플러그인을 실행하지 않는 한 문제가 발생합니다. 

일반적으로 Google Chrome 또는 Microsoft Edge에서 기본적으로 작동하지 않는 동영상, 이미지 또는 음악 형식을 호스팅하지 마세요. 웹사이트에 누락된 요소가 있거나 이상한 오류가 발생하면 사용자를 짜증나게 합니다.

백엔드 코드

5. 백엔드 코드

'짧은 코드 줄'로 웹사이트에 추가할 수 있는 멋진 기능을 몇 번이나 보셨습니까? 이것들이 많이 있고 그것들은 유용할 수 있습니다. 그러나 코드 스니펫이 유용한 작업을 수행하도록 하기 위해 서버에서 실행 중인 훨씬 더 큰 코드 조각에 골칫거리가 되는 경우가 많습니다. 

이러한 코드가 너무 많으면 모든 페이지에 해당 코드를 넣기 때문에 서버가 사이트 페이지를 제공하는 대신 이러한 요청을 처리하는 데 방해가 됩니다. 

아이러니하게도 이러한 것들의 가장 일반적인 범인은 분석 및 양식 처리입니다. 그러나 다른 작업을 처리하는 코드는 전체 성능에 부정적인 영향을 미칠 수도 있습니다.

6. 모바일 실수

모바일 사용자에게 영향을 미치는 전형적인 실수는 대부분의 데스크톱용 홈페이지가 휴대폰이나 태블릿에서 렌더링된 후에야 사이트의 모바일 버전으로 리디렉션되는 것입니다. 

그 결과 브라우저가 모바일 사이트로 이동하기까지 오랜 시간이 걸리고 렌더링되기 전에 또 다른 지연이 발생합니다. 

통계적으로 모바일 플랫폼은 웹 브라우징 측면에서 여전히 기존 컴퓨터보다 약간 뒤떨어져 있지만 모바일 서핑은 빠르게 확장되고 있으며 곧 대부분의 사용자가 대부분의 사이트에 액세스하는 지배적인 방법이 될 것입니다. 

따라서 모든 사이트의 모바일 버전에 대한 관심은 적어도 데스크톱 버전만큼 중요합니다. 

모바일 사용자는 유선 광대역 사용자가 기대할 수 있는 일관된 전송 속도 없이 3G 또는 4G 데이터 서비스를 사용하여 연결하는 경우가 많기 때문에 빠른 웹 페이지 전달의 중요성은 더욱 큽니다.

7. 압축 사용

사이트를 구성하는 파일의 크기를 작게 하여 방문자가 더 빨리 다운로드할 수 있도록 하는 방법에는 여러 가지가 있습니다. 

JPG 파일에 적합한 파일 유형과 압축 수준을 선택하는 것만으로도 성능상의 이점을 얻을 수 있지만 파일 크기를 70%까지 크런치할 수 있는 Gzip과 같은 글로벌 서버 측 기술이 있습니다. 

Gzip은 서버 활성화가 필요하며 이 사이트 (새 탭에서 열림) 를 사용하여 서버에서 Gzip이 활성화되어 있는지 확인할 수 있습니다 .

압축 사용에 대한 유일한 주의 사항은 시스템에 압축하지 않으려는 파일과 폴더를 식별해야 한다는 것입니다. 이미 압축된 동영상 파일과 압축된 볼륨(ZIP, RAR 또는 LZH)은 더 이상 압축할 수 없기 때문입니다.