웹 최적화 궁극적 인 가이드 (팁 및 우수 사례)

웹 최적화 웹 개발 및 유지 관리의 중요한 부분이지만 웹 마스터가 종종 간과하는 내용입니다. 귀하가 저축 할 수있는 돈에 대해 생각해보십시오. 그리고 제대로 완료되었을 때 귀하의 독자층과 트래픽을 증가시킬 수있는 방법을 생각해보십시오..

지금까지 웹 사이트 (또는 블로그)에 최적화를하지 않았거나 사이트 속도를 높이는 데 도움이되는 방법에 대해 궁금한 점이 있으면 최적화 팁 목록을 살펴보십시오..

더 나은 가독성을 위해 각각 세 가지 섹션으로 나눠 봤습니다. 서버 측 최적화, 자산 최적화 (CSS, Javascript, 이미지 등의 웹 구성 요소 포함) 및 플랫폼, 여기서 우리는 WordPress 최적화. 마지막 섹션에서 우리는 유용하다고 생각한 몇 가지 링크를 던졌습니다. 점프 후 전체 목록.

최적화 : 서버 측

1. 괜찮은 웹 호스트를 선택하십시오.

   귀하의 웹 호스팅 계정은 귀하가 수행하려고하는 최적화와 직접적인 관계가 없지만 올바른 웹 호스팅 계정을 선택하는 것이 중요하다고 생각했습니다. 호스팅 계정은 보안, 액세스 가능성 (cPanel, FTP, SSH), 서버 안정성, 가격 및 고객 지원이 모두 중요한 역할을하는 웹 사이트 / 블로그의 기초입니다. 당신은 좋은 손에 있는지 확인해야합니다..

   추천 읽기 : 웹 호스트 선택 방법 으로 wikiHow 어떤 웹 호스팅 계정을 구매하기 전에 알아야 할 단계와 팁을 제공하는 멋진 기사입니다..

2. 별도로 호스트 자산

   자산에 대해 언급 할 때 우리는 웹 구성 요소를 의미했습니다. 이미지들 과 정적 스크립트 서버 측 처리가 필요하지 않습니다. 여기에는 웹 그래픽, 이미지, 자바 스크립트, 캐스 캐이 딩 스타일 시트 (CSS) 등이 포함됩니다. 자산을 별도로 호스팅하는 것은 필수 사항은 아니지만 블로그의 트래픽이 급증 할 때 서버 구현 측면에서 엄청난 결과를 보았습니다.

   추천 독서: 카풀 차선에서의 병렬 다운로드 극대화.

3. GZip을 이용한 압축

   즉, HTTP 요청이있을 때마다 콘텐츠가 서버 측에서 클라이언트 측으로 이동합니다 (반대의 경우도 마찬가지 임). 전송 내용을 압축하면 각 요청을 처리하는 데 필요한 시간이 크게 줄어 듭니다..

   GZip 이 작업을 수행하는 가장 좋은 방법 중 하나이며 사용중인 서버 유형에 따라 다양합니다. 예를 들어, Apache 1.3 mod_zip 사용, 아파치 2.x mod_deflate를 사용하고 있습니다. Nginx. 다음은 서버 측 압축에 익숙해지는 데 유용한 기사입니다.

   • Apache 파일 압축을 사용하여 웹 사이트 속도 향상
   • mod_gzip과 Apache를 사용하여 웹 출력 압축하기
   • GZIP 압축으로 사이트를 최적화하는 방법
   • ASP 용 서버 측 압축

4. 리다이렉트 최소화

   웹 마스터는 URL 리디렉션 (Javascript 또는 META 리디렉션과 같은)을 항상 수행합니다. 때로는 이전 페이지에서 새 페이지로 사용자를 안내하거나 사용자를 올바른 페이지로 안내하는 것이 목적입니다. 각 리디렉션은 추가 HTTP 요청과 RTT (왕복 시간)를 만듭니다. 리디렉션이 많을수록 느린 사용자는 대상 페이지로 이동합니다..

   추천 독서: 리디렉션 피하기 Google Code를 통해이 문제에 대한 개요를 제공합니다. 또한 리디렉션을 최소화하여 서빙 속도를 높이는 몇 가지 실용적인 방법을 권장합니다.

5. DNS 조회 줄이기

   에 따르면 야후! 개발자 네트워크 블로그, DNS (Domain Name System)가 지정된 호스트 이름 또는 도메인 이름의 IP 주소를 확인하는 데 약 20-120 밀리 초가 걸리고 프로세스가 제대로 완료 될 때까지 브라우저가 아무 것도 할 수 없습니다.

   저자 스티브 서더스 최소 2 개에서 최대 4 개까지의 호스트 이름으로 이러한 구성 요소를 분할하면 DNS 조회가 줄어들고 높은 수준의 병렬 다운로드가 가능해질 것을 제안했습니다.. 더 많은 것을 읽으십시오 기사에.

최적화 : 자산 (CSS, 자바 스크립트, 이미지)

1. 여러 개의 자바 스크립트를 하나로 병합

   여러분 rakaz.nl 다음과 같이 여러 개의 자바 스크립트를 결합하는 방법을 공유합니다.

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http : // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   URL을 다음과 같이 변경하여 단일 파일에 추가 :

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   .htaccess 조작 및 PHP 사용. 여기를 클릭하십시오. 더 많은 것을 읽는.

2. 자바 스크립트 및 CSS 압축

   작게 하다 여러 CSS 및 자바 스크립트 파일을 결합하고 내용을 압축하여 불필요한 공백 / 주석을 제거하고 최적의 클라이언트 측 캐싱을 허용하는 HTTP 인코딩 (gzip / deflate) 및 헤더로 결과를 제공하는 PHP5 앱입니다.

   

   온라인으로 압축하십시오.!Javascript와 CSS 파일을 수동으로 온라인으로 압축 할 수있는 웹 서비스도 있습니다. 다음은 우리가 알아야 할 몇 가지 사항입니다.

   • compressor.ebiene (자바 스크립트, CSS)
   • javascriptcompressor.com (자바 스크립트)
   • jscompress.com (자바 스크립트)
   • CleanCSS (CSS)
   • CSS 최적화 도구 (CSS)

3. 머리글 만료 / 캐싱 사용자 정의

   제공 : httpwatch

   사용자 정의 Expiry 헤더를 사용하여 이미지, 정적 파일, CSS, Javascript와 같은 웹 구성 요소는 동일한 사용자가 페이지를 다시로드 할 때 불필요한 HTTP 요청을 건너 뜁니다. 필요한 대역폭을 줄이고 페이지 제공 속도를 획기적으로 향상시킵니다..

   권장 수치 :

   • 야후! 개발자 네트워크 블로그 - 만료 헤더 추가
   • Apache 1.3에서 이미지에 좋은 만료 헤더를 추가하는 방법
   • HTTP 캐싱
   • 웹 작성자 및 웹 마스터 용 캐싱 자습서

4. 애셋로드 오프

   오프 로딩이란 웹 사이트가 호스팅되는 메인 서버에서 자바 스크립트, 이미지, CSS 및 정적 파일을 분리하여 다른 서버에 배치하거나 다른 웹 서비스에 의존하는 것을 의미합니다. 여기에 상당한 개선이있었습니다. 홍 키아 트 애셋을 다른 웹 서비스에로드 해제하여 서버에서 주로 PHP 처리를 수행합니다. 오프 로딩을위한 온라인 서비스에 대한 몇 가지 제안 사항은 다음과 같습니다.

   • 이미지: Flickr, Smugmug, 유료 호스팅 *
   • 자바 스크립트: Google Ajax 라이브러리, Google App Engine, 유료 호스팅 *
   • 웹 양식s : WuFoo, FormStack
   • RSS: Google Feedburner
   • 설문 조사 및 여론 조사: SurveyMonkey, PollDaddy

   * 유료 호스팅 - 유료 서비스는 항상 더 나은 안정성과 안정성을 제공합니다. 웹 사이트에서 지속적으로 애셋을 요청하는 경우 애셋이 제대로 작동하는지 확인해야합니다. Amazon S3 및 클라우드 프론트를 권장합니다..

5. 웹 이미지 처리

   이미지는 웹 사이트의 중요한 부분입니다. 그러나 제대로 최적화되지 않으면 부담이 커지며 예측할 수 없을 정도로 많은 양의 대역폭을 매일 사용하게됩니다. 여기에 몇 가지가있다. 이미지 최적화를위한 우수 사례:

   • PNG 이미지 최적화Smashing Magazine의 사람들은 PNG 이미지를 최적화하는 데 유용한 영리한 기술을 설명합니다..
   • 웹 최적화 - 필요한 것들 (형식) JPEG, GIF, PNG 및 웹용 이미지 저장 방법에 대해 자세히 알아보십시오..
   • 이미지의 크기를 조정하지 마십시오.항상 연습을 삽입하십시오. 폭 과 신장 각 이미지에 대해 또한 웹상에 더 작은 버전이 필요하기 때문에 이미지를 축소하지 마십시오.. 예를 들어: 웹 사이트의 200x200 픽셀 이미지를 50x50 픽셀로 강제 변경하지 마십시오. 폭 과 신장. 50x50 픽셀로 가져 오기.

   웹 서비스 및 도구로 최적화. 좋은 소식은 이미지를 최적화하기 위해 Photoshop 전문가가 아니어도된다는 것입니다. 작업을 수행하는 데 도움이되는 웹 서비스 및 도구가 많이 있습니다..

   • Smush.it아마도 이미지를 최적화하는 가장 효율적인 온라인 도구 중 하나 일 것입니다. 거기에 대한 WordPress 플러그인도 있어요.!
   • JPEG 및 PNG 스트리퍼JPG / JPEG / JFIF 및 PNG 파일에서 불필요한 메타 데이터 (스팸성) 제거 / 제거 / 제거를위한 Windows 도구.
   • 온라인 이미지 최적화 도구GIF, 애니메이션 GIF, JPG 및 PNG를 쉽게 최적화 할 수 있으므로 Dynamic Drive를 통해 사이트에서 최대한 빨리로드 할 수 있습니다.
   • SuperGIF모든 GIF 이미지와 애니메이션을 손쉽게 만들 수 있습니다..
   • 여기에 더 많은 것이있다..

6. CSS 처리

   현대 웹 사이트는 CSS를 스타일의 기초이자 모양과 느낌으로 사용합니다. CSS는 변경에 큰 유연성을 제공 할뿐 아니라 필요한 코드 측면에서도 적습니다. 그러나 잘못 코딩 된 경우 역효과가 날 수 있습니다. 다음은 몇 가지 체크리스트 또는 CSS가 올바르게 최적화되었는지 확인하는 가이드입니다.

   • 당신의 성분의 아이를 자식들과 나란히 유지하기CSS 선택자로 마크 업을 깨끗하게 유지하는 방법.
   • CSS를 짧게 유지하십시오.그들이 같은 스타일을 줄 때, 코드는 더 짧아집니다. 여기에 CSS 속기 가이드 아마 필요할거야..
   • CSS 스프라이트 사용CSS Sprite 기술은 하나의 이미지 파일에 여러 이미지 (또는 모두)를 결합하여 페이지가로드 될 때마다 HTTP 요청을 줄이고 CSS로 출력을 제어합니다. 배경 위치 속성. 다음은 CSS 스프라이트를 만드는 데 유용한 가이드와 기술입니다.
     • 온라인 CSS 스프라이트 생성기
     • 최고의 온라인 오프라인 CSS 스프라이트 생성기
   • 모든 선언을 한 번만 사용하기CSS 파일을 최적화 할 때 가장 강력한 방법 중 하나는 모든 선언을 한 번만 사용하는 것입니다.
   • CSS 파일의 양 줄이기그 이유는 간단합니다. 웹 페이지가 요청 될 때 더 많은 HTTP 요청을하는 CSS 파일이 많을수록 더 많이 만듭니다. 예를 들어 다음과 같은 CSS 파일을 여러 개 만드는 대신

     하나의 CSS로 결합 할 수 있습니다.

   권장 수치 :

   • CSS 파일을 확인, 정리 및 최적화하는 유용한 도구CSS 코딩에 대해 전혀 알지 못하는 경우에도 CSS 코드를 최적화하는 데 사용할 수있는 유용한 도구.
   • 깨끗하고 최적화 된 CSS 코드의 7 가지 원칙최적화는 파일 크기를 최소화하는 것이 아닙니다. 조직화되고 복잡하지 않으며 효율적입니다..
   • CSS를 최적화하는 모범 사례이 기사를 실제 최적화 최적화 팁이 아닌 학업 수행과 같게 생각하십시오..

WordPress에 대한 최적화

때때로 Google은 WordPress 블로그의 성능을 모니터링, 벤치마킹 및 분석합니다. 사이트가 느리게 실행되는 경우 이유를 알아야합니다. 다음은 몇 가지 기본적인 변경 사항입니다. WordPress 블로그의 속도가 크게 향상 될 것입니다..

1. 캐시 당신의 절름발이 블로그

   WP- 캐시 매우 효율적이고 신속한 응답을 제공하는 매우 효율적인 WordPress 페이지 캐싱 시스템입니다. 우리는 또한 WP 수퍼 캐시 이전에 언급 한 플러그인에서 향상되고 훌륭한 작업도합니다..

2. 사용하지 않는 플러그인 비활성화 및 삭제

   블로그가 실제로 느리게로드되는 것을 발견하면 플러그인이 많이 설치되어 있는지 확인하십시오. 그들은 범인일지도 모른다..

3. 불필요한 PHP 태그 제거

   테마의 소스 코드를 살펴보면 다음과 같은 태그가 많이 발견됩니다.

   서버에 부하를주지 않는 텍스트 콘텐츠로 대체 될 수 있습니다. 체크 아웃 마이클 마틴'에스 WordPress Blo에서 삭제할 태그 13 개지

권장 수치 :

• 3 쉬운 방법 WordPress의 최대 속도John Pozadzides는 Digg 트래픽 스파이크를 통해 블로그가 원활하게 항해하는 방법을 공유합니다..
• 최대 성능을위한 13 가지 WordPress 속도 팁 및 트릭 다음은 WordPress 사이트가 트래픽이 많거나 모르는 숨겨진 문제로 인해 실적이 좋지 않다는 것을 발견하면 시도해 볼만한 몇 가지 사항입니다..
• 40 WordPress에 최적화 팁슬라이드의 최적화 팁. 40 분 안에 40 팁.

마지막으로 중요한 것은 ...

다음은 웹 최적화에서보다 넓은 관점과 더 나은 분석을 제공하는 유용한 웹 서비스 및 도구입니다.

• 야후! YSlow

  YSlow 웹 페이지를 분석하고 고성능 웹 페이지에 대한 규칙 집합을 기반으로 성능을 향상시킬 수있는 방법을 제안합니다. 웹 사이트를 더 빨리로드하기 위해 수행해야 할 작업을 알려줍니다..

  (방화 녀 필수)

  

• PageSpeed

  비슷하다 야후! YSlow, Google 페이지 속도 는 오픈 소스 Firebug 애드온으로 웹 사이트 성능과이를 향상시키는 방법을 평가합니다. (방화 녀 필수)

  

• Pingdom 도구

  Pingdom 도구 모든 객체 (이미지, CSS, 자바 스크립트, RSS, 플래시 및 프레임 / iframe)를 포함하여 웹 사이트를 완전히로드하고 총 개체 수, 총로드 시간 및 전체 크기를 포함한로드 된 페이지에 대한 일반적인 통계를 보여줍니다 사물.

  

권장 수치 :체크 아웃 할 가치가있는 더 많은 팁과 도구가 있습니다..

• Google 웹 최적화 도구
• 더 빠른 웹 페이지 개발을 돕는 15 가지 도구
• 귀하의 웹 사이트 속도를 높이고 코드 최적화를위한 15 가지 이상의 팁!