사이트를 빠르게 빛나게 만들기: 1부
게시 됨: 2015-03-18비밀이 아닙니다. 오늘날의 웹 사용자에게는 속도가 필요합니다. 인터넷 및 셀룰러 연결이 점점 더 빨라짐에 따라 사용자는 사이트가 빠르게 로드되기를 기대하며 이러한 페이지를 신속하게 제공하기 위해 할 수 있는 일을 하는 것이 개발자의 임무입니다. 그렇다면 어떻게 하면 사이트를 빠르게 타오르게 만들 수 있을까요? 다음은 WordPress로 빌드할 때 구체적으로 수행해야 하는 작업입니다.
가장 먼저 해야 할 일: 사이트 속도 테스트
성능은 프론트엔드와 백엔드의 두 가지 주요 범주로 나눌 수 있습니다. 백엔드는 서버 및 페이지에 데이터가 채워지는 방식과 관련된 모든 것으로 간주합니다(테마의 PHP 코드는 "백엔드"임). 프런트 엔드는 모든 자산(CSS, JavaScript, 이미지 등)과 마크업으로 구성됩니다. 웹 브라우저가 읽고 해석하는 모든 것은 "프론트 엔드"입니다. 성능 측면에서 이러한 구분을 하는 이유는 무엇을 최적화하고 있는지, 더욱 중요하게는 어디에서 가장 최적화해야 하는지를 아는 것이 좋기 때문입니다.
사이트 속도를 테스트하려면 WebPagetest와 Google PageSpeed Insights를 함께 사용하는 것이 좋습니다. WebPagetest는 사이트가 로드되는 데 걸리는 실제 시간(초)에 대한 좋은 정보를 제공하여 사이트가 느리게 로드되는 원인이 백엔드인지 프론트엔드인지 알 수 있는 몇 가지 유용한 메트릭을 제공합니다. PageSpeed Insights는 사이트가 브라우저에서 렌더링되는 방식과 프런트 엔드에서 개선할 수 있는 사항을 확인하는 데 가장 적합합니다.
이 기사는 완전히 사용자 정의된 WordPress 사이트에 중점을 둡니다. 부피가 큰 테마와 19개의 타사 플러그인(플러그인은 프런트 엔드와 백 엔드 모두를 느리게 할 수 있음)을 사용하여 사이트에서 속도 테스트를 실행하는 경우 빈 상태에서 시작하여 플러그인을 하나씩 천천히 활성화하여 플러그인을 찾으십시오. 속도를 늦추는 것입니다.
프런트 엔드 성능
지금 WordPress 테마의 접근성을 개선하는 방법
휴가를 나와도 웹을 사용하지 않는 날이 없습니다. 나는 당신이 공감할 수 있을 것이라고 추측할 것입니다. 점점 더, 인터넷은 ...
Fastly의 최고 성능 책임자인 Steve Souders에 따르면 성능의 황금률은 페이지 전체 로드 시간의 80-90%가 프런트 엔드로 구성된다는 것입니다(80/20 규칙). 백엔드의 10-20%가 매우 중요하지만, 가장 빠른 호스트 비용을 사용하더라도 사용자가 인식할 수 있도록 프론트엔드를 최적화하지 않으면 사이트는 여전히 잠재력을 최대한 발휘할 수 없습니다. 빠르게 로딩 중입니다. 프런트 엔드 최적화와 관련하여 인식이 중요합니다. 사용자는 사이트가 로드되는 데 걸리는 시간(초)에 신경 쓰지 않을 것입니다. 그들이 정말로 관심을 갖는 것은 얼마나 빨리 콘텐츠와 상호 작용하고 콘텐츠를 보거나 지연 없이 작업을 수행할 수 있는지입니다. 실제 로드 시간에 대해 걱정할 필요는 없지만(그렇게 해야 함) 아래 기술을 따르면 사이트가 가능한 한 빨리 사용 가능한 상태인지 확인할 수 있습니다. 모든 자산.
CSS
CSS가 브라우저에 전달되기 전에 가장 중요한 것은 단순히 CSS를 압축하고 사용하지 않는 선택기를 제거하는 것입니다. 특히 Sass와 같은 전처리기를 사용하는 경우 테마를 개발할 때 좋은 개발 워크플로를 중단하면 이 프로세스가 간단해집니다. 개발하는 동안 명령을 실행하는 JavaScript 작업 실행기인 Grunt를 사용합니다. 모든 Sass 파일을 하나로 컴파일(즉, Sass 부분 파일을 사용하는 경우)하고, 축소하고 압축하는 grunt-contrib-sass라는 Grunt용 플러그인이 있습니다. 그 위에 grunt-contrib-watch 플러그인을 추가하면 파일을 저장할 때마다 Sass 작업이 실행됩니다. 쉬운! 가장 최신의 CSS 방법론을 사용하지 않는 경우 잠을 자지 말고 CSS를 작성하는 동안 중복 및 거대한 파일 크기를 피하기 위해 일종의 표준을 따르십시오.
스타일시트가 준비되면 로드하는 가장 쉬운(그리고 지금까지 표준) 방법은 <head> 에서 참조하는 것입니다. 그렇게 하면 나머지 DOM이 로드되기 전에 브라우저가 이를 로드하고 구문 분석합니다. 그러나 <head> 에 "중요한" 스타일이 인라인된 다음 JavaScript를 사용하여 전체 스타일시트를 비동기식으로 로드하는 새로운 기술이 있습니다. 나는 사이트를 1초 이내에 로드(또는 로드하는 것으로 인식)하도록 절대적으로 시도할 때만 이 기술을 실제로 사용하지만, 워크플로에 맞는지 살펴보고 확인하는 것은 좋은 일입니다. Filament Group에는 이 기술 사용에 대한 방대한 기사가 있습니다.
자바스크립트
WordPress가 MySQL을 사용하는 방법 이해
대체로 WordPress는 두 개의 세그먼트로 나눌 수 있습니다. WordPress 사이트의 모양과 느낌을 생성하는 로직과 템플릿은 모든 콘텐츠와 기능을 저장하는 MySQL 데이터베이스...
JavaScript 최적화의 황금률은 간단합니다. 가능한 한 적은 수의 JavaScript 파일을 제공하고 축소하고 연결하는 것입니다. 타사 WordPress 플러그인은 축소되지 않은 차단 JavaScript 파일로 문서를 부풀려 해로울 수 있으므로 플러그인을 선택할 때 주의하는 것이 중요합니다. 이상적으로는 모든 JavaScript 파일을 하나로 연결한 다음 그 파일을 축소하는 것이 좋습니다. 모든 파일을 하나로 연결할 수 없는 경우 JavaScript 파일을 비동기식으로 로드하거나 페이지의 나머지 부분이 로드된 후 사용할 수 있는 "async" 및 "defer"라는 HTML 속성이 있습니다.
오늘날 JavaScript를 참조하는 가장 일반적인 장소는 문서 하단의 닫는 태그 바로 앞입니다. 그러나 JavaScript를 로드하는 고급 기술이 있습니다. 다시 말하지만, Filament Group은 이에 대해 수많은 연구를 수행했으며 초고속 페이지 로드 시간을 목표로 하는 경우 사용할 수 있는 여러 오픈 소스 프로젝트를 보유하고 있습니다. 나는 그들의 물건이 굉장하다고 생각합니다). 가장 좋은 방법은 <head> 에 작은 함수를 인라인하여 스크립트를 동적으로 로드하는 것 같습니다. 그런 다음 페이지의 나머지 부분을 차단하지 않고 스크립트 태그를 추가합니다. 자세한 내용은 loadJS 스크립트를 확인하세요.
이미지
이미지는 종종 페이지에서 가장 큰 파일이며 페이지 로드 시간의 가장 큰 지연을 담당합니다. 하지만 이미지의 좋은 점은 CSS 및 JavaScript와 달리 대부분의 브라우저가 이미지를 비동기식으로 로드한다는 것입니다. 이는 최소한 페이지의 인지된 성능에 도움이 되지만 A) 가능한 한 적은 수의 이미지를 제공하고 B) 해당 이미지가 가능한 한 많이 압축되었는지 확인하고 싶습니다.
압축 도구는 이미지에서 가능한 많은 초과분을 짜내는 데 필요합니다. ImageOptim은 Grunt와 같은 작업 실행기와 함께 사용하기 위한 OptiPNG 및 jpegtran과 함께 이 작업을 잘 수행하는 훌륭한 Mac 앱입니다.
글꼴
웹 글꼴은 요즘 매우 일반적입니다. 거의 모든 프로젝트에서 Google Web Fonts를 사용하지만 최근까지 <head> 에서 참조하는 것만으로 성능이 저하되었다는 사실을 깨닫지 못했습니다. 성능에 미치는 영향은 적지만 이 기사는 사이트를 빠르게 타오르게 만드는 방법에 대한 기사이므로 모든 것이 중요합니다! 웹 글꼴을 사용하여 최상의 성능을 얻으려면 Google과 Typekit이 공동 개발한 Web Font Loader를 사용하는 것이 좋습니다. Google Web Fonts와 같은 타사에서 글꼴 로드를 관리하고 비동기식으로 로드할 수 있도록 하는 오픈 소스 스크립트입니다(이 단어가 지겹습니까?).
예상대로 Web Font Loader를 프로젝트에 통합하는 데 필요한 몇 가지 구성이 있으므로 설정 방법에 대한 자세한 내용은 GitHub에서 프로젝트를 확인하세요.