웹 성능 트릭 - 기본을 넘어서

이 기사는 New Relic이 후원했습니다. itepoint를 가능하게하는 스폰서를 지원해 주셔서 감사합니다! 우리는 Sitepoint에서 수년에 걸쳐 많은 성과 대화를했으며, 몇 가지 고급 측면으로 주제를 다시 방문 할 때가되었다고 생각합니다. 이 기사에서 언급 된 접근법은 엄격하게 PHP와 관련이 없지만 제대로 사용하면 응용 프로그램을 완전히 새로운 수준으로 가져올 수 있습니다. 우리는 일반적인 내용을 다루지 않을 것입니다. CSS, JS 및 이미지에 대한 요청이 줄어들고 웹 사이트와 유사한 힌트가 일반적인 지식이라는 의미입니다. 대신, 우리는 덜 알려진/사용 된 업그레이드에 중점을 둘 것입니다 키 테이크 아웃

HTML 요소 및 불필요한 태그를 최소화하면 웹 성능을 향상시키는 데 도움이 될 수 있습니다. 프리 페치 기술을 사용하여 리소스를 미리로드하면 속도와 사용자 경험이 향상 될 수 있습니다. CSSLINT 및 CSS와 같은 도구를 사용하여 CSS를 검증하면 오류 및 잠재적 성능 문제를 감지하도록 설명합니다. CSS 2D를 사용하면 상단/왼쪽 대신 객체를 움직일 수 있습니다.

Google의 Pagespeed 모듈은 웹 사이트 최적화를위한 모범 사례를 자동으로 구현하고, 정적 리소스 서빙을 개선하고, CSS 및 JavaScript를 최적화하고 최적화하며 이미지 크기를 줄일 수 있습니다. Google의 오픈 소스 압축 알고리즘 인 Zopfli는 압축을 3-8%증가시켜 많은 클라이언트에 정적 콘텐츠를 제공하는 웹 사이트에 눈에 띄는 차이를 만들 수 있습니다. 작은 성능 수정은 웹 사이트의 전반적인 성능에 큰 영향을 줄 수 있습니다. HAR 및 DEV 도구 프로파일 링과 같은 도구를 사용하여 사이트의 성능을 모니터링하고 필요한 개선 사항을 구현하십시오.

html

불필요한 태그를 제거하십시오 요소가 적을수록 좋습니다. 불필요한 HTML을 제거하십시오

vs.

물론 모든 시나리오에 적용 할 수는 없지만 가능한 많은 DOM 요소를 제거 할 수있는 방식으로 HTML을 구조화하십시오. 는 필요하지 않은 일부 태그를 생략하여 HTML 문서의 파일 크기를 줄일 수 있습니다. 이것은 다소 해킹 된 것처럼 보이고 표준에 위배되는 것처럼 보이므로 전혀 생산에 배포 할 때만 수행해야합니다. 그렇게하면 동일한 코드에서 작업하는 다른 개발자를 혼동하지 않습니다. 프리 페치 프리 피트는 브라우저에 미리 자원이 필요할 때입니다. 리소스는 도메인 (DNS 프리 페치)의 IP, 이미지 또는 CSS 파일과 같은 정적 리소스 또는 전체 페이지 일 수 있습니다. 사용자가 사이트를 방문한 후 다른 도메인으로 이동하거나 예를 들어 이미지와 같은 하위 도메인에서 정적 리소스를 호스팅하면 DNS 프리 페치가 DNS 서버는 이미지를 IP 주소로 해결합니다. 이득은별로 많지 않지만 축적되어 사용자의 브라우저를 작성하는 요청에서 적절한 로딩 시간을 면도 할 수 있습니다. DNS Prefetching은 에서 로 수행됩니다. 현재 방문자가 현재 방문중인 페이지를 완료 한 후 현재 방문자가로드 할 것으로 예상되면 DNS Prefetch를 사용하지 않을 이유가 없습니다.

. 다음 방문에서 일부 리소스가 필요하다는 것을 알고 있으면 프리 페치하고 브라우저 캐시에 저장할 수 있습니다. 예를 들어, 블로그가 있고 해당 블로그에 두 부분으로 구성된 기사가있는 경우 두 번째 부분의 정적 리소스 (예 : 이미지)가 사전로드되어 있는지 확인할 수 있습니다. 와 비슷합니다. Picasa 웹 앨범은 이것을 광범위하게 사용하여 현재보고있는 이미지에 대한 다음 이미지를 다음 이미지를 미리 가져옵니다. 이전 브라우저에서는 JavaScript에서 Phantom Image 요소를로드하여이를 수행 할 수 있습니다. 이것은 이미지를 캐시에로드하지만 어디에서나 사용하지 않습니다. 이 방법은 CSS 및 JS 파일에 대해서는 작동하지 않으므로 고대 브라우저에서 프리 페치를 원한다면 해당 리소스에 독창적이어야합니다. xmlhttprequest가 떠오르십시오 - Ajax를 통해로드하고 어디서나 사용하지 마십시오. 여기를 뽑는 방법에 대해서는 여기를 참조하십시오. 를 염두에 두어야 할 것은 사용자가 필요로하는 또는 거의 확실한 리소스 만 프리 페치하는 것입니다. 사용자가 Paginated 블로그 게시물을 읽는 경우, Prefetch. 사용자가 양식 제출 화면에있는 경우 제출 후 리디렉션되는 화면에서 기대할 수있는 리소스를 확실히 프리 페치하십시오. 전체 사이트를 프리 페치하지 말고 무작위로 프리 페치하지 마십시오 - 대역폭을 고려하고, 프리 페치를 드물게 사용하여 모바일 장치를 염두에 두십시오. 모바일 장치는 일반적으로 제한된 대역폭에 있으며, 2MB 이미지를 사전 다운로드하는 것은 매우 사용자 친화적이지 않을 것입니다. 사용자가 모바일 장치 또는 제한된 대역폭 연결에있을 때를 감지하고 그러한 경우에는 프리 페치를 사용하지 않는 경우 선택적으로 프리 페치하여 이러한 문제를 피할 수 있습니다. 더 나은 것은 웹 사이트에 설정을 추가하고 사람들이 선호하는 것에 동의하도록 요청하십시오 - 선호도를 LocalStorage에 저장하고 사용자 에이전트 문자열로 해시하여 모든 장치에서 사전 페치를 별도로 허용하거나 허용하지 않을 수 있습니다.

.

 당신은 또한 전체 페이지를 사전과 사전에 프레 렌더로 만들 수 있습니다. Pretching Pages는 DOM 컨텐츠 인 HTML을 가져 오는 것을 의미합니다. 이는 실제로 JavaScript, CSS 및 이미지에있는 대부분의 컨텐츠로 인해 속도 향상을 제공하지 않습니다. 이러한 유형의 페치는 현재 Firefox에서만 완전히 지원됩니다. 사전 렌더링은 또 다른 문제입니다. 사전 렌더링은 크롬에만 있으며, 이는 무대 뒤에서 DOM을 가져올뿐만 아니라 모든 관련 내용을 CSS, JS 및 이미지 형태로 가져옵니다. 실제로, 이미 배경에서 전체 페이지를 렌더링합니다. 페이지는 RAM에 앉아서 완전히 열리고 렌더링되어 방문하기를 기다리고 있습니다. 이를 통해 사용자가 사전 링크 링크를 클릭 할 때 변경이 즉각적이 될 수 있지만 이전 단락에서 설명한 것과 동일한 문제를 소개합니다 - 대역폭은 겪을 수 있습니다. 또한 서버는이 프레 렌더를 방문하여 등록하므로 사용자가 실제로 마음을 바꾸고 사전 사용자가있는 웹 사이트를 열지 않으면 비뚤어진 분석을 얻을 수 있습니다. Prerender Syntax는 다음과 같습니다. <link rel="prerender" href="http://example.com/sept/my-post-part-2">
 현재 페이지가 사전에 사전 또는 프리 페치되는 것을 감지하는 올바른 방법은 하나 뿐이며, Page Visibility API와 함께 현재 Android 브라우저 및 Opera Mini를 제외한 모든 주요 브라우저에서 지원되고 있습니다. 이 API를 사용하여 페이지를 실제로 시청 한 다음 수행중인 분석 추적을 시작합니다.
<p>

 css 
</p>
<p>  css lint 
<s> CSSLINT를 사용하여 CSS를 검증하고 오류 및 잠재적 성능 문제를 지적하십시오. 가장 효율적인 CSS를 작성하기 위해 CSSLINT Wiki에 제시된 규칙을 읽고 존중하십시오.
</s></p>  CSS 설명 
<q> 데이터베이스 세계에서 SQL과 마찬가지로 CSS 설명 도구도 https://github.com/josh/css-explain도 있습니다. CSS 선택기를 분석하는 데 사용할 수 있습니다. 즉시 테스트하려면이 파일의 내용을 브라우저의 콘솔에 붙여 넣고 cssexplain ( '. item.subclass.anotherclass')과 같은 명령을 발행하십시오.
  
<to> 목표는 1 ~ 10의 척도에서 가능한 최저 점수를 얻는 것입니다. 내 JSFiddle에서 시도해 볼 수도 있습니다. 결과는 너무 심각하게 받아 들여지지 않지만 (CSSLINT 조언에 따라 더 잘하는 것이 좋습니다), 그들은 여전히 ​​선택기의 복잡성을 설명하고 최소한 가능한 문제를 힌트하는 데 좋은 역할을합니다.
<h2>  번역 대 상단/왼쪽 
<s> CSS 2D 사용 상단/왼쪽 대신 개체를 이동하도록 번역하십시오. Paul Irish와 Chris Coyer가 환상적인 일을했을 때 이것을 자세히 설명하려고 할 필요는 없습니다. 자료를 읽거나 보고이 지식을 구워야합니다.
  부드럽게 스크롤 
<not> 당신은 페이스 북과 구글과 같은 사이트가  ages 를 열 때 스크롤 될 수 있다는 것을 알았을 것입니다. 워밍업하는 데 시간이 필요한 것과 거의 같습니다. 이것은 오늘날의 많은 웹 사이트와 거대한 UX Gutpunch에서 문제입니다. 페이지를 부드럽게 스크롤하는 것은 어렵지 않습니다. 특히 무엇을 찾아야하는지 알 때는 어렵지 않습니다. 스크롤 지연을 줄이기위한 핵심은 페인트를 최소화하는 것입니다. 페인트는 화면의 내용이 프레임에서 프레임으로 변경 될 때 발생하는 것입니다. 브라우저는 화면에서 그것을 다시 칠해야합니다. 새로운 모양을 계산 하고이 새로운 모양을 때려야합니다. 렌더링 된 웹 사이트 중 하나가 구성됩니다. 이러한 문제에 대한 자세한 내용과 페인트 문제를 진단하는 방법을 알아 보려면 Paul Lewis의 우수한 게시물을 참조하십시오.
<li>
<h4> 서버 
</h4>
<p>  쉬운 승리로 PHP를 최적화하십시오
<things> PHP 측에서 앱 속도를 높이기 위해 할 수있는 일이 많이 있습니다. 쉽게 승리하려면 Fredric Mitchell의 마지막 기사 또는 Sitepoint의 다른 공연 관련 기사를 참조하십시오.
  Google의 Pagespeed 모듈을 사용하십시오
<eed> Google의 PagesPeed 모듈은 Nginx 및 Apache에 설치할 수있는 모듈로 웹 사이트 최적화를위한 몇 가지 모범 사례를 자동으로 구현합니다. 이 모듈은 클라이언트가 인식 한 웹 사이트의 성능을 평가하여 모든 규칙이 가능한 한 많은 것을 존중하고 특히 정적 리소스의 서빙을 개선하도록합니다. 사용되지 않는 메타 데이터를 제거하여 CSS 및 JavaScript를 최적화, 최적화 및 압축하고 압축하고 이미지 크기를 줄이고 브라우저 캐시를 더 잘 활용하여 헤더를 올바르게 만료합니다. 무엇보다도 - 그것은 당신의 아키텍처 변경이 필요하지 않습니다. 서버에 연결하면 작동합니다. 모듈을 설치하려면 다음 지침을 따르십시오. Nginx 소스에서 빌드해야하지만 이는 단순한 작업 명령입니다. PagesPeed에 제대로 소개하려면 다음 비디오를 참조하십시오. 지금까지는 조금 길고 오래되었지만 여전히 엄청나게 귀중한 리소스입니다.
<em>  </em>
  spdy 를 사용하십시오
PageSpeed와 유사한 노력으로 Google은 SPDY의 개발을 이끌고 있습니다. mod_spdy는 웹 사이트를 훨씬 더 빨리 제공하도록 설계된 또 다른 Apache 모듈입니다. 설치하는 것은 원하는만큼 간단하지 않으며 브라우저 지원이 필요하지만 하루 종일 더 좋아 보입니다. SPDY는 실제로 프로토콜 (HTTP와 마찬가지로 프로토콜과 마찬가지로)입니다. 자세한 내용은이 초보자 친화적 인 고장에 대해서는이 높은 수준의 개요를 참조하십시오. SPDY를 사용하는 것은 여전히 ​​더 광범위한 채택을 기다리면서 위험 할 수 있지만, 이익은 지금까지 위험을 능가하는 것으로 보입니다. </eed></things></p>.</li>
<li>
<h4>Use WebP for images</h4>
<p>WebP is an image format aiming to replace all others – JPG, PNG and GIF. It supports alpha layers (transparency), animation, lossless and lossy compression, and more. 브라우저 채택은 매우 느리지 만, 위에서 언급 한 PagesPeed 모듈과 같은 웹p 전환을 자동화하는 도구를 사용하여 요즘 모든 이미지 유형을 지원할 수 있습니다 (이미지를 자동으로 Webp On-Fly로 변환 할 수 있음). For an in-depth introduction and discussion about WebP, see this comprehensive guide.</p>
</li>
<li>
<h4>Compress with Zopfli</h4>
<fl> Zopfli 압축을 사용하여 정적 자원을 미리 압축하십시오. 오픈 소스 압축 알고리즘으로 Google이 다시 주도하여 온라인으로 사용되는 일반적인 압축 방법과 비교할 때 압축이 3-8% 증가합니다. 소규모 웹 사이트에서는 차이가 없지만 앱을 확장하거나 많은 고객에게 정적 콘텐츠를 제공하는 경우 Google 웹 글꼴 팀에서보고 한 바와 같이 눈에 띄는 차이를 만들 것입니다. >
<p>
</p>

</fl>
</li>


 결론 <!-- Place this tag in your head or just before your close body tag. -->
<ways> 앱의 성능을 향상시키는 방법에는 여러 가지가 있으며 종종 인생과 마찬가지로 전체가 부품의 합보다 큽니다. 이 기사에서 언급 한 일부 측정 및 이전의 조치를 구현하면 훌륭하고 확실한 개선을 얻을 수 있습니다. 그것들을 모두 구현하면 앱이 너무 빠르고 가벼워서 시간을 여행 할 수 있습니다. 앱을 모니터링하고, HAR을 활용하고, DEV 도구 프로파일 링을 보거나,이 모든 작업을 수행하는 서비스에 가입하십시오. 사이트의 성능 측면을 무시하지 마십시오. 요즘 대부분의 프로젝트는“Do and Depart”이지만 자랑스럽지 않은 웹 사이트를 고객으로 떠나지 마십시오.
<imate> 당신이 할 수있는 작은 수정을 과소 평가하지 마십시오 - 당신은 어느 쪽이 우수성에 대한 팁 포인트가 될지 결코 알지 못합니다! <!-- Place this tag where you want the widget to render. -->.



<questions> 웹 성능 트릭에서 자주 묻는 질문 (FAQ)



<difference> HTML에서 DIV와 SPAN 태그의 차이점은 무엇입니까? <h2> </h2> HTML에서 DIV 및 SPAN 태그는 각각 블록 레벨 및 인라인 요소를 그룹화하는 데 사용됩니다. DIV 태그는 더 큰 코드 덩어리에 사용되는 블록 레벨 요소이며, SPAN 태그는 선 내부의 작은 HTML 덩어리에 사용되는 인라인 요소입니다. 그들 사이의 주요 차이점은 웹 페이지의 레이아웃에 어떻게 영향을 미치는지입니다. div 요소는 새로운 라인을 생성하고 사용 가능한 전체 너비를 차지하지만, 스팬 요소는 새로운 라인을 생성하지 않고 필요한만큼 폭을 차지합니다. <p>.<improve> 내 웹 사이트의 성능을 향상시키는 방법은 무엇입니까? <h3> </h3> 웹 사이트의 성능을 향상시키는 몇 가지 방법이 있습니다. 가장 효과적인 방법 중 하나는 이미지를 최적화하는 것입니다. 대형 고해상도 이미지는 사이트 속도를 늦출 수 있으므로 크기를 조정, 압축 및 최적화하는 것이 중요합니다. 또 다른 방법은 CSS 및 JavaScript 파일을 최소화하여 파일의 크기를 줄이고 사이트 속도를 높이는 것입니다. CDN (Content Delivery Network)을 사용하여 전 세계 사용자에게 콘텐츠를보다 빠르게 전달할 수 있습니다.  <p> 웹 사이트 성능이 사용자 경험에 미치는 영향은 무엇입니까? </p> <h3> 웹 사이트 성과는 다음과 같습니다. 사용자 경험에 중대한 영향을 미칩니다. 느리게로드하는 웹 사이트는 사용자를 실망시키고 이탈률이 높아질 수 있습니다. 반면, 빠르게로드하는 웹 사이트는 사용자 만족도를 향상시키고 참여를 늘리며 잠재적으로 전환율이 높아질 수 있습니다. 따라서 가능한 최상의 사용자 경험을 제공하기 위해 웹 사이트의 성능을 최적화하는 것이 중요합니다. </h3> <p> HTML은 웹 사이트 성능에 어떤 영향을 미칩니 까?  </p> HTML 웹 사이트의 성능에 큰 영향을 미칩니다. 예를 들어, 불필요한 태그, 테이블의 과도한 사용 및 양식을 부적절하게 사용하면 웹 사이트 속도가 느려질 수 있습니다. 반면에 깨끗하고 잘 구조화 된 HTML은 웹 사이트의로드 속도와 전반적인 성능을 향상시킬 수 있습니다.  <h3> 일부 고급 웹 성능 트릭은 무엇입니까? </h3> <p> 일부 고급 웹 성능 트릭에는 프리 페치 사용 및 프리 페치 및 배경에 리소스를로드하기위한 사전로드, 서버 푸시를 구현하여 단일 클라이언트 요청에 대한 여러 응답을 보내고 서비스 작업자를 사용하여 자원을 캐시하고 캐시에서 직접 제공합니다. 이러한 기술은 웹 사이트의 성능을 크게 향상시킬 수 있지만 웹 기술과 신중한 구현에 대한 깊은 이해가 필요합니다.  </p> 웹 사이트의 성능을 어떻게 측정 할 수 있습니까?  <h3> 사용할 수있는 몇 가지 도구가 있습니다. Google의 Pagespeed Insights, GTMetrix 및 WebPagetest를 포함하여 웹 사이트의 성능을 측정하십시오. 이 도구는 웹 사이트의로드 속도, 자원 사용 및 기타 성능 지표에 대한 자세한 통찰력을 제공 할 수 있습니다. 또한 웹 사이트의 성능을 향상시키는 방법에 대한 권장 사항을 제공 할 수 있습니다. </h3> <p> 웹 사이트 성능에서 JavaScript의 역할은 무엇입니까?  </p> JavaScript는 웹 사이트 성능에 중요한 역할을합니다. 웹 사이트의 기능과 상호 작용을 향상시킬 수 있지만, 제대로 쓰여지지 않았거나 과도한 JavaScript는 웹 사이트를 늦출 수 있습니다. 따라서 효율적인 JavaScript를 작성하고 사용을 최소화하며 웹 사이트의 성능을 향상시키기 위해 JavaScript 파일을 연기하거나 비동기로로드하는 것이 중요합니다.<s> CSS는 웹 사이트 성능에 어떤 영향을 미칩니 까?  <h3> CSS는 여러 가지 방법으로 웹 사이트 성과에 영향을 미칩니다. 크고 복잡한 CSS 파일은 웹 사이트 속도를 늦출 수 있으므로 CSS를 깨끗하고 잘 조직하는 것이 중요합니다. 성능 문제를 일으킬 수 있으므로 과도한 CSS 애니메이션을 사용하지 않아야합니다. 또한 CSS 스프라이트를 사용하여 여러 이미지를 하나로 결합하여 HTTP 요청 수를 줄이고 웹 사이트의로드 속도를 향상시켜야합니다.  </h3> 서버 응답 시간이 웹 사이트 성능에 미치는 영향은 무엇입니까? </s><p> </p> 서버 응답 시간은 서버가 브라우저의 요청에 응답하는 데 걸리는 시간입니다. 서버 응답 시간이 느리면 웹 사이트가 크게 느려질 수 있으며 빠른 서버 응답 시간은 웹 사이트의로드 속도를 향상시킬 수 있습니다. 따라서 신뢰할 수있는 호스팅 제공 업체를 선택하고 서버 구성을 최적화하여 서버 응답 시간을 개선하는 것이 중요합니다.  <h3> 모바일 장치 용 웹 사이트를 최적화하려면 모바일 장치 용 웹 사이트 최적화를 어떻게 최적화 할 수 있습니까? 점점 더 많은 사용자가 스마트 폰과 태블릿에서 웹을 탐색하고 있기 때문에 중요합니다. 반응 형 디자인을 사용하고 모바일의 이미지 최적화, 무거운 JavaScript 및 CSS 사용을 줄이며 모바일 친화적 인 탐색을 구현하여 모바일 장치 용 웹 사이트를 최적화 할 수 있습니다. 또한 다양한 모바일 장치에서 웹 사이트를 테스트하여 모든 모바일 장치에서 잘 수행해야합니다.</h3></improve></p></difference></questions></imate></ways></not></s>
</h2></to></q>

위 내용은 웹 성능 트릭 - 기본을 넘어서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!