웹사이트의 로딩 시간을 최적화하는 것은 사이트 방문자를 즐겁게 하고 온라인 비즈니스에서 창출되는 수익을 늘리는 윈-윈 접근 방식입니다.

웹사이트 속도를 늦추는 모든 문제를 조명하기 위해 Stavros Papadakis를 초대하여 느린 웹사이트 속도를 높이는 프로세스를 설명했습니다.

웹사이트가 느려지는 이유는 무엇입니까?

WordPress 웹 사이트의 속도를 높이는 16가지 방법이 포함된 이전 게시물을 반드시 확인해야 합니다.

이 게시물은 WordPress 웹사이트의 로딩 시간을 최적화하기 위한 최상의 조정이 포함된 빠른 체크리스트를 제공했지만 웹사이트 속도를 늦출 수 있는 많은 문제가 여전히 있습니다.

htaccess 파일에서 압축을 활성화하고 CSS 파일을 결합하고 Javascript 파일을 바닥글로 옮겼지만 여전히 사이트 로딩 시간이 마음에 들지 않는다면 웹사이트 속도를 저하시키는 18가지 일반적인 문제를 확인하십시오.

1. 엄청나게 무거운 웹사이트

180개의 HTTP 요청을 만드는 3MB 페이지가 60개의 HTTP 요청이 있는 1MB 사이트보다 느릴 것이라는 데는 의심의 여지가 없습니다.

사이트의 로딩 시간을 최적화하고 싶으십니까?

이를 수행하는 가장 좋은 방법 중 하나는 사이트의 각 페이지 크기를 최소화하는 것입니다.

이미지를 최적화하고, CSS 파일을 결합하고, Javascript 파일을 축소하고, 많은 프런트 엔드 최적화 조정을 적용할 수 있지만 3MB 사이트가 있으면 사이트 속도가 느려지고 사이트 사용자가 불행해집니다.

21MB는 서버와 브라우저에 엄청난 부하입니다.

사이트를 디자인하거나 다시 디자인하는 동안 필요한 만큼만 로드하고 그 이상은 로드하지 않도록 최선을 다해야 합니다.

다시 말해서, 항상 스스로에게 물어야 합니다.

홈페이지의 슬라이드쇼에 꼭 8개의 큰 이미지가 필요한가요?

홈페이지에 20개의 포트폴리오 항목을 표시해야 합니까?

만족스러운 사용자 후기 12개를 홈페이지에 보여줘야 할까요, 아니면 후기 3개로 잘 될까요?

이 모든 데이터를 로드하면 사이트가 멋지게 보이지만 이 모든 데이터로 인해 사이트가 느려집니다.

로딩이 느린 사이트를 원하십니까? 그렇지 않은 경우 웹 사이트의 페이지당 로드되는 데이터를 최소화하십시오.

2. 최적화되지 않은 이미지

웹 사이트를 로드하는 데 걸리는 시간의 80%가 프런트 엔드 구조에 의해 제어된다는 사실을 알고 계십니까?

이것은 웹 성능 최적화의 놀라운 사실입니다.

최종 사용자 응답 시간의 80%가 프런트 엔드에서 소비됩니다. 그것에 집중하세요.

데이터베이스 또는 PHP 코드를 최적화하려고 시도할 수 있지만 가장 중요한 이 사실을 무시하면 웹사이트가 느려질 것입니다.

460KB PNG 파일을 최적화하면 90KB가 될 수 있습니다.

사이트에 최적화되지 않은 이미지가 10개 있는 경우 2-3MB의 추가 페이지 로드를 추가할 수 있습니다.

이미지를 최적화하지 않으면 사이트 로딩 시간에 심각한 영향을 받을 수 있습니다.

좋은 소식은 Photoshop, ImageOptim 또는 Kraken과 같은 타사 도구를 사용하여 최적화하면 대부분의 JPG 및 PNG 이미지가 이미지 품질을 잃지 않고 40% 또는 최대 80% 더 작아질 수 있다는 것입니다.

3. 과도한 광고 사용

Google Adsense 및 기타 유사한 서비스는 추가 수입원이 될 수 있지만 사이트 속도를 저하시킬 수도 있습니다.

2~3개의 다른 광고 서비스를 사용하여 헤더, 오른쪽 사이드바, 게시물 본문 및 페이지 하단에 광고를 로드하는 웹사이트는 광고가 1개만 있는 웹사이트보다 훨씬 느립니다. 오른쪽 사이드바 또는 게시물 본문에 있습니다.

광고는 대부분의 사용자에게 성가실 뿐만 아니라 사이트 속도도 저하시킵니다.

클라이언트 웹사이트에서 다음 스크린샷을 확인하십시오.

이 성가신 광고가 모두 필요합니까?

믿거나 말거나 4개의 다른 광고가 있습니다. 스크린샷 상단에 하나의 광고, 광고인 비디오, 오른쪽 사이드바에 광고, 페이지 하단에 또 다른 광고가 있습니다! 말할 필요도 없이, 이러한 광고는 대부분의 사용자에게 성가시고 사이트의 로딩 시간도 느려집니다.

요약하자면 광고는 항상 주의해서 사용해야 합니다. 광고가 수익을 창출하지 않는 한 제거해야 합니다.

4. 이미지의 잘못된 치수

HTML에서 이미지의 크기를 조정하면 안 됩니다. 큰 이미지의 크기를 조정하고 크기가 조정된 이미지를 대신 사용해야 합니다.

예를 들어 이미지가 1200px x 600px이고 "더 작은" 버전(예: 400px x 200px)을 사용하려고 한다고 가정해 보겠습니다.

이 경우 원본 이미지를 사용하지 말고 HTML에서 너비와 높이 치수를 변경하여 축소하십시오.

원본 이미지의 크기를 1200px x 600px에서 400px x 200px로 조정하여 새 축소판 이미지를 만들고 더 작고 더 빨리 로드되는 새 이미지를 사용해야 합니다.

2KB의 32 x 32 Facebook 아이콘 대신 150KB의 256 x 256 Facebook 이미지를 로드하는 데 사용되는 많은 사이트를 발견했습니다!

5. 무의미한 리디렉션

간단한 퀴즈가 하나 있습니다.

다음 이미지 중 A, B, C 또는 D 중 어느 것이 더 빨리 로드됩니까?

가. http://www.domain.com/image.jpg
나. http://domain.com/image.jpg
다. https://www.domain.com/image.jpg
D. https://domain.com/image.jpg

A를 선택하셨나요? 잘못된.
B를 선택하셨나요? 잘못된.
C를 선택하셨나요? 잘못된.
D를 선택하셨나요? 또 틀렸어!

정답은 사이트에 따라 다르다는 것입니다!

사이트가 https://www.domain.com인 경우 HTTPS가 아닌 버전의 이미지(http://www.domain.com/image.jpg)를 호출하면 http에서 추가 리디렉션이 발생합니다. //www.domain.com/image.jpg에서 https://www.domain.com/image.jpg로 브라우저에 의해 이미지를 로드합니다.

사이트에 www가 없는 버전(http://domain.com/)을 사용하는 경우 이미지에도 항상 www가 없는 버전을 사용해야 합니다(예: http://domain.com/image. jpg 대신 http://www.domain.com/image.jpg).

브라우저는 이런 종류의 무의미한 리디렉션을 좋아하지 않습니다.

무의미한 리디렉션은 사이트 속도를 저하시킵니다.

파일에 대한 상대 URL(예: <img src=”//eadn-wc04-1126528.nxedge.io/image.jpg” />)을 사용하면 로드 시간을 늦추는 이 일반적인 문제를 쉽게 제거할 수 있습니다. 귀하의 사이트.

6. 잘못된 서버 위치

사이트 트래픽이 주로 미국 또는 영국에서 발생하는 경우 사이트는 각각 미국 또는 영국에 위치한 호스팅 회사에서 호스팅해야 합니다.

서버가 사이트 방문자와 가까울수록 웹 사이트가 더 빨라집니다.

말할 필요도 없이 전 세계에서 트래픽이 발생한다면 각 사용자의 위치에 더 가까운 서버에서 이미지, CSS 및 Javascript 파일을 로드할 수 있도록 Content Delivery Network 또는 CloudFlare를 사용하는 것이 좋습니다.

7. Dodgy 공유 호스팅 계획

아무도 사이트 호스팅에 $$$를 지불하고 싶지 않지만 40개의 활성 플러그인이 있는 WooCommerce 사이트 또는 5,000개 제품이 있는 Magento 사이트를 월 5달러의 비용으로 공유 호스팅 계획을 통해 제공하는 것은 재앙의 지름길입니다.

귀하의 사이트에 대한 최상의 로딩 시간을 얻으려면 항상 좋은 호스팅 회사에 투자해야 합니다.

사이트를 사용할 수 없거나 속도가 느린 경우 공유 호스팅 계획을 사용하여 한 달에 몇 달러를 절약할 수 있지만 클라이언트를 잃음으로써 훨씬 더 많은 손실을 보게 됩니다(로딩 속도가 느린 사이트를 방문하는 사용자는 이 사이트를 다시 방문하지 않음).

Woocommerce 또는 많은 활성 플러그인을 사용하는 무거운 WordPress 사이트가 있는 경우 WP Engine 및 FlyWheel(제휴 링크)을 적극 권장합니다.

VPS로 업그레이드하기 위해 한 달에 200,000번의 고유한 방문을 기대해서는 안 됩니다. 수백 개의 사이트가 있는 동일한 오버로드된 서버에서 사이트를 호스팅하는 동안에는 이러한 일이 발생하지 않습니다.

8. 소셜 미디어 스크립트의 과도한 사용

소셜 미디어(Facebook, Twitter, Pinterest 등) 스크립트는 페이지에 추가될 때마다 DNS 조회, Javascript 파일 세트 및 몇 가지 이미지를 추가합니다.

사용자가 쉽게 게시물을 공유할 수 있도록 이러한 공유 옵션 중 많은 부분을 게시물 끝에서 사용할 수 있어야 하지만 모든 단일 페이지에서 모든 공유 옵션을 로드하는 것은 이치에 맞지 않습니다.

연락처 페이지나 카테고리 페이지와 같은 모든 단일 페이지에 소셜 미디어 아이콘을 로드하는 의미는 무엇입니까?

홈페이지 또는 카테고리 페이지의 각 게시물에 대해 5개의 다른 소셜 미디어 수를 표시하면 사이트에 많은 부하가 추가됩니다. 이 페이지에 개수를 표시하는 것이 얼마나 중요합니까? Facebook, Twitter, Pinterest, Google Plus 및 LinkedIn도 표시해야 합니까?

너무 많은 소셜 미디어 스크립트로 인해 사이트 성능이 저하될 수 있습니다.

자신에게 잘 맞는 1~2개만 보여주는 것이 가장 좋습니까? 많은 주식을 얻지 못한다면 조금이라도 보여주는 것이 많은 의미가 있습니까?

사이트 페이지에 소셜 미디어 옵션을 추가하기 전에 항상 두 번 생각해야 합니다.

9. 이미지의 잘못된 파일 형식

이미지에 투명도가 필요한 경우 PNG 파일 유형을 피할 수 없지만 투명도가 필요하지 않은 경우 파일 크기가 JPG 이미지보다 훨씬 느리기 때문에 이미지를 PNG 파일로 저장해서는 안 됩니다.

무거운 GIF 파일은 사이트 로딩 시간을 크게 늦출 수 있으므로 최소화하거나 제거하십시오.

또한 이미지의 텍스트를 편집하는 데 시간이 많이 걸리고 생성된 이미지도 훨씬 무거우므로 텍스트가 포함된 이미지를 콘텐츠로 저장하지 않도록 해야 합니다.

JPG를 기본값으로 사용하십시오. 대부분의 파일에 대해 가장 작고 가장 빠른 로딩 파일 유형입니다.

10. 전용 서비스를 이용하지 않는 경우

서버의 부하를 줄일 수 있는 인기 있는 서비스가 많이 있습니다.

사이트에 동영상이 있습니까? Youtube, Wistia 또는 Vimeo를 사용해야 합니다.

귀하의 사이트에 많은 의견이 있습니까? Disqus, IntenseDebate 또는
담화.

jQuery, jQuery UI, AngularJS 또는 Mootools를 사용합니까? Google 호스팅 라이브러리를 통해 로드해야 합니다.

WordPress를 사용하고 인기 게시물을 표시합니까? 자동으로 수행하는 Jetpack을 사용해야 합니다.

콘텐츠 전송 네트워크(CDN)를 사용하여 사이트 대신 이미지를 제공할 수도 있습니다.

사이트에 상당한 트래픽이 발생하고 많은 이미지와 비디오를 로드하는 경우 사이트 로드 시간을 위에서 언급한 트릭과 사이트 워크로드의 균형을 맞춰 크게 최적화할 수 있습니다.

11. 404 오류

존재하지 않는 파일을 로드하려고 하거나 브라우저에서 찾을 수 없는 경우 사이트 로드 시간은 이 404 HTTP 오류의 영향을 받습니다.

가장 빠른 로딩 시간을 달성하려면 페이지를 렌더링하는 동안 항상 404 오류를 확인해야 합니다. Webpagetest 및 GTMetrix를 사용하여 사이트의 생성된 폭포수를 확인하거나 Chrome 및 Firefox와 같은 브라우저의 네트워크 탭을 사용하여 이를 수행할 수 있습니다.

Webpagetest가 폭포수에 빨간색 선을 표시하면 즉시 해당 404 오류 문제를 해결하고 수정해야 합니다.

404 오류는 로딩 시간을 망칠 수 있습니다

이러한 종류의 오류는 특히 공유 호스팅 계획을 통해 사이트를 제공하는 경우 웹사이트의 로딩 시간을 망칠 수 있습니다.

12. 사이트를 캐싱하지 않음

모든 콘텐츠 관리 시스템(WordPress, Joomla, Drupal, Magento)은 많은 양의 데이터를 저장하기 위해 데이터베이스를 사용합니다.

이는 사이트 관리에 유용하지만 요청될 때마다 각 페이지를 생성하기 위해 서버에 추가 로드를 추가한다는 의미이기도 합니다.

캐싱을 사용하여 이 문제를 해결할 수 있습니다.

WordPress를 사용하는 경우 다음과 같은 캐싱 플러그인을 사용할 수 있습니다.
W3 Total Cache 또는 WP Super Cache 또는 ZenCache를 사용하거나 캐싱을 처리하는 WP Engine 및 FlyWheel(제휴 링크)과 같은 관리 서버 호스팅 회사를 사용합니다.

말할 필요도 없이 Joomla, Drupal 및 Magento는 캐싱 옵션도 제공하므로 각 페이지를 반복해서 생성하는 대신 후속 사이트 방문자에게 사이트의 캐시된 버전을 제공함으로써 많은 도움이 됩니다.

페이지를 캐싱하면 사이트 속도가 크게 향상될 수 있습니다.

캐싱은 모든 데이터베이스 기반 웹 사이트에서 생각할 필요가 없습니다. 10분의 캐싱 기간이라도 웹사이트의 로딩 시간을 획기적으로 최적화할 수 있습니다.

13. 수백 개의 HTTP 요청

사이트에 로드된 모든 CSS 파일, Javascript 파일 또는 이미지는 HTTP 요청입니다. 사이트에 HTTP 요청이 많을수록 사이트 속도가 느려집니다.

CSS와 Javascript 파일을 결합하고 CSS 파일을 인라인하고 작은 이미지에 CSS 스프라이트를 사용하려고 시도할 수 있지만 이러한 조정을 구현하고 여전히 150개의 HTTP 요청이 있는 경우 분명히 다음에서 콘텐츠를 제거하여 사이트를 깔끔하게 정리해야 합니다. 그것.

246 HTTP 요청은 아무리 최적화되어 있어도 사이트 속도를 저하시킵니다.

사이트의 각 페이지에 많은 콘텐츠를 표시하고 싶은 생각이 들지만 "적을수록 좋습니다"라는 점을 명심하여 너무 많은 이미지나 스크립트를 로드하지 않도록 하십시오.

14. 잘못된 서버 구성

공유 호스팅 계획을 사용 중인 경우 서버당 가능한 한 많은 사이트를 제공하기 위해 최선을 다하는 것이 일반적입니다.

그들은 일반적으로 압축 및 KeepAlive와 같은 기능을 비활성화하여 이를 수행합니다.

HTTP 연결 유지를 활성화하면 동일한 TCP 연결이 여러 HTTP 요청을 보내고 받을 수 있으므로 후속 요청에 대한 대기 시간이 줄어듭니다.

압축은 서버에서 전송되는 파일의 크기를 줄여 브라우저로 전송되는 속도를 높입니다.

공유 호스팅 계획을 사용 중이고 호스팅 회사에서 압축 및 연결 유지를 비활성화한 경우 가능한 한 빨리 호스팅 회사를 전환해야 합니다.

서버에서 연결 유지 및 압축을 활성화해야 합니다.

15. CSS 가져오기

CSS 가져오기는 CSS 재설정 파일을 가져오는 것과 같이 새 CSS 파일 위에 CSS 파일을 가져오는 좋은 방법이지만 웹 페이지를 로드하는 동안 추가 지연도 추가됩니다.

가능하면 CSS 가져오기를 피해야 합니다.

16. 각 페이지에 불필요한 파일 로드

사이트 페이지에서 필요한 경우에만 CSS 및 Javascript 파일을 로드해야 합니다.

예를 들어 특정 Javascript 파일이 단일 페이지에만 필요한 경우 해당 Javascript 파일을 사이트의 모든 단일 페이지에 로드하는 대신 이 URL에서만 로드해야 합니다.

이 간단한 규칙을 따르지 않으면 페이지에 30개의 CSS와 40개의 Javascript 파일을 로드하게 되어 3개의 CSS와 4개의 Javascript 파일만 필요하므로 63개의 추가 HTTP 요청을 만들고 페이지에 수백 킬로바이트를 추가하게 됩니다. 크기.

17. 백그라운드에서 무거운 파일 로드하기

거의 보이지 않는 큰 배경 이미지를 로드하는 데 사용되는 사이트가 많습니다.

배경에 로드된 500KB 이미지가 정말로 필요합니까? 가능하면 CSS3를 사용하거나 대신 배경색을 사용해야 합니다.

사이트가 로드되는 동안 배경에 사운드 파일을 로드하는 것도 좋지 않습니다.

이러한 기술의 대부분은 사이트 속도를 늦추므로 피해야 합니다.

18. 전문가를 사용하지 않음

제 목표는 사이트의 느린 로딩 페이지를 수정하는 데 충분한 정보를 제공하는 것이었습니다.

사이트 로딩 시간을 최적화하는 것은 귀하와 귀하의 웹사이트를 방문하는 모든 사람에게 윈-윈 상황입니다. 더 빠른 사이트는 더 높은 전환율, 더 나은 검색 엔진 순위 및 더 즐거운 사용자 경험을 의미합니다.

일을 잘하고 싶을 때 전문가를 고용하는 것이 가장 좋습니다.

아마추어는 모범 사례를 따를 수 있지만 어디서부터 시작해야 할지 모릅니다.

전문가가 사이트 속도를 저하시키는 실제 문제를 해결합니다.

아마추어가 웹 사이트의 실제 문제를 모를 때마다 호스트 이동, 테마 변경, 다른 캐싱 플러그인 설치 또는 CMS 전환과 같은 무의미한 임시 솔루션을 권장합니다.

내 고객 중 많은 수가 사이트의 실제 문제를 수정하지 않고 캐싱 플러그인을 설치한 아마추어에게 시간과 돈을 낭비했습니다.

각 웹 사이트는 고유하므로 사이트마다 다른 속도 최적화 조정을 적용해야 한다는 점을 항상 염두에 두어야 합니다.

요약하자면, 사이트의 로딩 시간 최적화는 항상 외과적 정밀도로 속도 최적화 조정을 수행할 전문가에 의해 수행되어야 합니다.

사용자가 초고속 로딩 시간을 보고 얼마나 기뻐할지 상상해 보십시오!

저를 고용하고 싶다면 기꺼이 도와드리겠습니다. 내 포트폴리오를 보고 지금 AwesomeWeb에서 저에게 연락하십시오!