2017년 가장 효과적인 웹사이트 성능 최적화 트릭

첫인상은 당신에게 유일한 기회가 될 것입니다.

거의 모든 비즈니스는 계속 증가하는 온라인 커뮤니티에 도달할 수 있는 웹사이트를 자랑합니다. 그러나 그들 모두가 웹사이트 성능 최적화의 중요성을 진정으로 우선시하는 것은 아니며, 이는 프랜차이즈의 범위를 정의하는 기능을 약화시킵니다.

게다가 웹사이트 방문자는 참을성이 없고 특히 온라인 경쟁이 날로 증가함에 따라 훨씬 더 까다로워집니다.

2015년 FEVAD(Federation of E-Commerce and Distance Selling) 에 따르면 인터넷 사용자의 거의 57%가 웹사이트가 3초 이내에 로드되어야 한다고 말합니다.

사실 로딩 시간이 더 오래 걸리는 웹사이트는 사용자가 가장 선호하지 않는 것이 상식입니다. 그렇죠?

스스로에게 그 질문을 해보세요.

기업은 기업의 구성 요소인 고객에게 크게 의존하며 브랜드가 자신을 선호한다는 것을 알아야 합니다. 그들은 기다리기를 원하지 않습니다.

불쾌한 인상은 특히 빠르게 퍼지는 불만족스러운 리뷰를 생성하여 트래픽 손실과 가장 중요한 돈 손실을 초래합니다.

아마존은 사이트가 1초 느려지면 연간 약 16억 달러의 매출 손실이 발생할 수 있다고 말합니다.

기술 대기업 Google은 트래픽이 20% 감소 하여 로드 시간이 0.5초 지연된 대가를 지불했습니다.

시간은 확실히 돈이잖아요?

인터넷이 거의 유사한 목적을 제공하는 웹사이트로 넘쳐나는 상황에서 청중을 기쁘게 하고 트래픽을 생성하며 목적을 달성할 수 있는 사이트 내에서 완벽한 균형을 이루는 시간이 필요합니다.

이 세상의 모든 것은 변경될 수 있습니다. 웹사이트가 아닌 이유는 무엇입니까?

통계적으로 말하자면, Mozilla가 페이지 속도를 거의 2초나 높였을 때 다운로드가 15.4% 증가했습니다 .

Kinsta 는 "사람들은 느린 관련 페이지보다 빠르게 로딩되는 사소한 페이지를 선호합니다."라고 말합니다.

선두를 유지하기 위해 경쟁자들을 앞지르기만 하면 되기 때문에 이것은 큰 난제로 나타나지 않습니다.

누가 우사인 볼트를 불러!

하지만!

웹사이트를 코딩하는 데 자메이카의 전략이 전혀 필요하지 않습니다. 경쟁에서 앞서나가고 전 세계 청중 사이에서 페이지를 홍보할 수 있는 몇 가지 팁과 트릭 을 제시했기 때문입니다.

나중에 감사할 수 있습니다.

여기 우리가 간다:

이 모든 것을 한 번에 구현하는 것은 번거로운 작업일 수 있으므로 각 단계를 수행하고 로딩 시간의 차이를 분석하는 것이 좋습니다.

그것을 위해 노골적으로 복사하지 말고 먼저 이해하고 구현하는 것이 중요합니다.

01. 미니멀하게

가능한 한 눈을 편안하게 유지하도록 웹 페이지를 구성하십시오. 여분의 선, 줄 바꿈, 이미지 및 기타 원치 않는 도구는 배수관으로 내려갑니다.

Apple , Audi 등과 같은 수십억 달러 회사의 홈페이지에서 영감을 얻고 구조화 방법론을 분석하십시오.

영감과 표절 사이의 미세한 차이를 이해하시리라 확신합니다.

02. 이미지 최적화

한 장의 사진은 천 마디 말보다 본질적으로 가치가 있으며 그 무게도 그만큼 무겁습니다.

2016년 HTTP 보고서에 따르면 " 웹 페이지 무게의 64%는 이미지에만 있습니다. "그것은 확실히 사물을 원근법으로 만듭니다.

이미지에 더 많은 시간이 걸린다는 것을 눈치채셨을 것입니다. 이제 내가 당신에게 그것을 말할 필요가 없었어요?

그래서 당신은 무엇을 할 수 있습니까?!

• 실제로 중요한 위치에만 사진을 삽입하도록 선택하십시오. 품질을 우선시한다면 JPEG로, 로고 등 덜 중요한 것은 PNG로 삽입하십시오. BMP와 TIFF는 절대 금물입니다!

• 해당 요구 사항에 따라 이미지 크기를 적절하게 조정하면 대역폭에 부담을 주는 불필요한 정크 데이터 형성을 방지할 수 있습니다.
• Smushit , JPEG/ PNG 스트리퍼 와 같은 도구를 사용하면 버튼 클릭만으로 손쉽게 최적화할 수 있습니다.

03. CSS 전달 최적화

얼마 전까지만 해도 웹 페이지의 최적 크기는 이미지, 텍스트 등 모든 요소를 ​​포함하여 약 30KB로 간주되었습니다.

CSS와 JavaScript의 출현은 이 30KB의 장벽을 현대화하고 무너뜨리고 사용자에게 훨씬 더 풍부한 경험을 제공했습니다.

"shorthand" 방식을 사용하여 코드 읽기 주기를 줄임으로써 전달 속도를 최적화할 수 있습니다. 기본적으로 중복성은 문제에서 제외합니다.

페이지를 내부 스타일 시트로 렌더링하기 전에 로드할 수 있는 외부 스타일 시트를 선호하는 것도 도움이 됩니다. 그것은 모두 "코딩 전문가"가 자신의 방식으로 작업하는 방식에 달려 있습니다.

복잡한 스크립트와 중복되는 코드 줄을 줄이십시오. 충분히 공정해 보이죠?

04. 압축 기술

CSS와 Javascript는 실제로 한 가지 이상의 방식으로 최적화될 수 있습니다. 이전에 배송 시스템에 대해 논의했습니다.

이제 어떻게 압축할 수 있는지 살펴보겠습니다.

• CSS와 JavaScript를 축소 하여 그 사이의 공백을 제거하는 CSS와 JavaScript의 후속 조합으로 압축합니다.
• 다른 것들은 CSS Optimizer , Clean CSS 등이 있습니다.
• GZip 압축 은 유사한 코드 요소를 찾고 일시적으로 더 짧은 문자로 교환하여 도움을 줍니다.

주의 : Gzip을 사용하여 이미지, PDF 등을 압축하면 새 파일이 이전 버전보다 커질 수 있습니다. 또한 이전 브라우저 지원은 보장되지 않을 수 있습니다. (누가 오래된 물건도 사용합니까, btw?)

05. "404 오류"

이것은 코더들 사이에서 익숙할 수도 있고 그들이 두려워하는 것이기도 합니다. 파일이나 페이지가 누락된 경우 팝업됩니다.

단순해 보일 수 있지만 일반적인 404 오류는 전달되는 데 약 50-100MB의 메모리가 필요합니다 . 소화하기 힘든 것 같죠? 나는 그것이 사람들이 두려워하는 것이라고 말했습니다.

플러그인은 이러한 종류의 오류를 확인하고 디버그할 수 있는 다양한 방법을 제공하지만 서버에 너무 오래 머무르므로 해당 서버의 리소스가 낭비됩니다.

따라서 Screaming Frog 와 같은 도구를 사용하여 크롤링하고, 오류 페이지를 식별하고, 너무 많은 대역폭을 낭비하지 않고 방문자 낭비를 줄이도록 수정하는 것이 좋습니다.

Screaming Frog의 프리웨어 대안인 Visual SEO Studio 및 WildShark SEO Spider Tool 이 있습니다.

06. 자산 오프로드

즉, CSS, 이미지 등의 콘텐츠를 메인 서버에서 분리하고 다른 서버에 의존하여 로드하는 것을 의미합니다.

이는 차례로 다른 서버에 오프로드하여 페이지를 로드하는 데 걸리는 시간을 줄임으로써 단일 주 서버에 대한 의존도를 줄입니다.

나눔은 참으로 배려입니다.

또한 필요에 따라 몇 가지 오프로딩 측면을 제안합니다.

• Flikr , Smugmug , 5– 이미지
• 구글 피드버너 – RSS
• 설문 조사 – SurveyMonkey , 몇 가지만 들 수 있습니다.

조금 더 비싸지만 공유 호스팅보다 훨씬 빠른 속도를 제공하는 전용 호스팅을 사용할 수도 있습니다.

07. 서버 최적화

더 많은 RAM과 캐시 크기를 가진 더 나은 서버를 선택하면 성능 지수가 반드시 향상됩니다.

정기적인 소프트웨어 업데이트와 미러 서버 생성은 더 빠른 액세스 시간을 허용하는 서버 간의 로드 균형을 유지하는 데 도움이 됩니다.

08. 플러그인 사용법

불필요한 플러그인은 여러 서버 충돌의 희생양이 될 뿐만 아니라 로드 시간이 더 오래 걸립니다.

"그" 웹사이트에서 본 "멋진" 전환 또는 요소가 항상 올바른 선택은 아닐 수도 있습니다.

현명하게 요소를 선택하십시오.

09 디버깅

코더 조심! 여러분은 이것과 완전히 관련이 있을 것입니다.

아주 작은 실수라도 세미콜론으로 추정하면 사이트와 서버 모두에 충돌을 일으킬 수 있는 메모리 덤프 문제가 발생할 수 있습니다.

라인이 문제를 일으키지 않고 Microsoft Visual Studio와 같은 디버깅 응용 프로그램을 사용하는 것이 장기적으로 도움이 될 것이라는 확신이 들 때까지 코드를 반복적으로 렌더링하십시오.

10. 속도 테스트

여러 플랫폼에서 웹 사이트의 로드 속도를 평가하고 다른 사이트와 비교하여 사이트 로드 속도를 결정하는 속도 테스트를 제공합니다.

또한 문제가 있는 위치에 대한 필요한 정보를 제공하는 데 도움이 되며 일부는 사이트 측면을 변경하기 위한 조언을 제공할 수도 있습니다.

Pingdom , GTmetrix 및 일부 이름과 같은 사이트.

부담스럽다면 심호흡을 해보세요. Dropbox , Apple, Microsoft 등과 같은 수십억 달러 규모 기업의 개발자들도 같은 일을 겪었습니다.

정말이야, 정말이야!

그들은 분 단위로 최적화가 이루어지면서 지금도 수정합니다. 그들은 성공 만트라를 복제하기를 원하지 않고 더 많이 만들고 싶어합니다.

물론 기술에 익숙하지 않은 사람들을 위해 웹 페이지 최적화 등의 작업을 아웃소싱할 수 있는 플랫폼을 소개합니다.

우리 회사 Prime One Global 이 이것을 처리하고 결국 고객뿐만 아니라 고객의 요구에 맞는 웹 사이트를 자랑 할 수 있습니다. 자세히 알아보려면 [email protected] 로 연락하거나 Facebook 페이지에서 핑을 보내주세요.

가기 전에!

이 모든 것이 복잡하게 들릴지 모르지만 이것이 웹사이트가 작동하는 방식입니다. 향상된 최적화와 관련된 기술을 알아야 합니다.

중요한 점을 요약하자면 고객은 최적의 로딩 속도를 요구하며 이를 위해서는 최소한의 디자인을 고수하고 용도에 따라 이미지 형식을 선택해야 합니다 .

잠재 방문자의 관점에서 생각하십시오. 웹사이트가 로드될 때까지 오랜 시간을 기다리시겠습니까?

당연히 아니지.

인내는 오늘날에도 여전히 미덕이지만 거의 모든 면에서 디지털화된 세상에 살고 있기 때문에 앞서 나가기 위해서는 변화를 수용해야 합니다.