PagesPeed 포인트를 추가하기 위해 진단 및 렌더 블로킹 리소스를 편집합니다.

아름다운 웹 사이트 ...하지만 느리게! 고객은 완전히 사라집니다! 이 문제로 인해 두통이 있습니까? 웹 사이트에 대한 투자. 그러나 Google Pagespeed Insights의 포인트를 확인할 때 Red Letters는 귀여운 점수로 렌더 블로킹 리소스 제거" 그렇다면 왜 웹 사이트를 꿈꾸지 않기 위해 중요한 "캐릭터"입니까? 이 기사에는 손을 잡는 답변이 있습니다. 느린 웹 사이트를 빨리 변경하려면 로켓을 고수하십시오!

인생의 실제 문제

아름답게 장식 된 식당을 열겠다고 상상해보십시오. (귀하의 웹 사이트). 고객은 줄을 서서 기다리고 있지만 (입력 한 트래픽), 상점에는 입구에서 화가와 전기 기술자가 있습니다. (렌더 블로킹 리소스) 그리고 "잠깐! 우리가 벽을 끝내고 배선을 먼저 기다릴 때까지 기다립니다. 모두가 상점에 들어갈 수 있습니다."고객은 어떻게 할 것인가? 물론, 그들 대부분은 작별 인사를하고 다른 가게에 간다! 이것이 정확히 일어난 일입니다. 귀하의 웹 사이트, 사용자, 특히 모바일에서는 기다리고 싶지 않습니다. 웹 사이트가로드가 완료되지 않은 3-4 초 만에. 그들은 즉시 눌러 경쟁사에게 갈 준비가되었습니다. 그리고 다음은 바운스 속도가 높고, 전환이 줄어든다는 것입니다. 최악의 것은 Google이 웹 사이트가 좋지 않다고 생각한다는 것입니다. 순위가 다시 떨어졌습니다. 이것은 온라인 비즈니스 사람들의 악몽입니다.

그림을위한 프롬프트 : 문제 해결 후 Google Pagespeed Insights의 이미지를 비교하십시오. 렌더 블로킹 리소스. 첫 번째 측면은 "렌더 블로킹 리소스 제거"와 그린 그린이라는 하이라이트가있는 낮은 점수 (빨간색)를 가지고 있습니다.

그 문제가 발생한 이유는 무엇입니까?

더 명확 해지려면 브라우저 (예 : Chrome, Safari)를 이해해야합니다. "만들기"웹 페이지. 누군가가 귀하의 웹 사이트에 오면 브라우저는 집 전체의 "녹색 인쇄"와 같은 HTML 코드를 읽는 것으로 시작합니다. 한 번에 한 줄을 읽습니다. 그러나 CSS 파일 (웹 사이트의 모습이 어떻게 표시되는 스타일 시트 스타일 파일) 또는 JavaScript (웹을 만드는 스크립트 파일)를 다운로드 할 때마다 즉시 집을 짓는 것이 "중지"됩니다! 그것은 모든 것을 남겨두고 해당 파일을 다운로드하기 위해 실행됩니다. 먼저 끝내고 집을 짓기 위해 돌아올 수 있습니다. "기다리고 중지". 이것이 우리가 "렌더 블로킹" 또는 디스플레이를 방해하는 리소스는 단순히 말하기를 단순히 말하며, CSS 및 JavaScript 파일은 불필요하게 막을 차단하여 브라우저가 웹 페이지를 느리게 볼 수 있도록하는 웹 페이지를 보여줍니다. Depth 정보 기술의 경우 GTMetrix .

그림을위한 프롬프트 : 브라우저 작동을 보여주는 쉬운 인포 그래픽 이미지. HTML을 읽고 "정지"기호가있는 직선입니다. 라인이 계속되기 전에 CSS와 JS가 파일을 파일하면 빨간색이 나타납니다.

남은 경우 어떤 영향을 미칩니 까?

문제를 무시하고 렌더 블로킹 리소스는 집안의 물이 누출되는 것과 다르지 않습니다. 처음에는 조금 일 수 있습니다. 그러나 장기적인 영향은 예상보다 심각합니다.

• 사용자 경험 (UX)은 가난합니다. 천천히로드하는 웹을 좋아하는 사람은 없습니다. 특히 참을성이없는 휴대 전화 사용자는 좌절감을 느끼고 브랜드가 전문적이지 않다는 것을 알 수있는 원래 자본입니다. 클리닉 웹 사이트 나 서비스 사업이 고객이 사라질 때까지 느린 주된 이유
• 채권 속도가 상승합니다 : 웹로드가 느려집니다. 사람들이 더 많은 사람들을 눌렀을수록 Google의 정보에 따르면 웹 사이트 만 1 초에서 3 초로로드됩니다. 사람들이 최대 32%를 눌렀을 가능성이 있습니다!
• 핵심 웹 생명체 방울 : 이 문제는 핵심 웹 생명체의 중요한 메트릭 매트 중 하나 인 LCP (Later Concentful Paint)에 직접 영향을 미칩니다 . LCP 가치가 나쁘면 Google은 웹 사이트가 낮다는 것을 알게됩니다.
• SEO 랭킹 : 2021 년 이래 Google은 Page Experience를 순위의 요소로 가져 왔습니다. 느리고 나쁜 웹은 UX가 크게 줄어들 수있는 기회가 있습니다.
• 소득 및 사업 기회 손실 : 이 모든 효과가 같은 일로 이어지면 웹 사이트의 경쟁 업체의 고객과 수입을 더 빨리 잃게됩니다.

그림의 프롬프트 : 그래프는 더 높은 바운스 속도로 웹 로딩 시간이 증가하는 관계를 보여줍니다. 고객의 눈살을 찌푸린 아이콘과 함께

해결책이 있습니까? 그리고 어디에서 시작해야합니까?

좋은 소식은이 문제를 해결할 수 있다는 것입니다! 주요 원칙은 우리가 브라우저에 새로운 "우선 순위를 정해야한다"는 것입니다. "이봐! 당신은 가장 필요한 것을 가져 가십시오. 고객을 먼저 보여 주러 가십시오. 서두르지 않은 것들에 대해서는 나중에 다운로드 할 수 있습니다."다음 주요 기술이 있습니다.

JavaScript (JS)의 경우 :

• 사용 속성 연기 : 이것은 가장 쉽고 가장 효과적인 방법입니다. 태그를 하기 만하면 됩니다 เบราว์เซอร์จะโหลดไฟล์ JS นั้นไปพร้อมๆ กับการสร้างหน้าเว็บ (ไม่หยุดรอ) และจะเริ่มทำงานก็ต่อเมื่อสร้างหน้าเว็บเสร็จแล้ว เหมาะกับสคริปต์ส่วนใหญ่ที่ไม่จำเป็นต้องทำงานทันที
• 속성 Async : 연기 와 유사하게 브라우저는로드를 중지하지 않습니다. 그러나로드가 완료 되 자마자 웹 페이지가 완료되기 전에 작동 할 수 있습니다. 일부 추적 스크립트와 같은 다른 부품과 관련이없는 스크립트에 적합합니다.

CSS 파일의 경우 :

• 인라인 중요한 CSS : 이것은 CSS 문제를 해결하는 데 핵심입니다. 디스플레이에 필요한 CSS 코드 만 "당기기"입니다. "화면의 첫 번째 부분"(위의 첫 부분)은 태그에 넣습니다. ในไฟล์ HTML โดยตรง
• 나머지 CSS를 차단하지 않고로드하십시오. 나머지 CSS (아래로 스크롤 해야하는 부품의 경우) 첫 번째 디스플레이에 개입하지 않도록 특수로드 방법을 사용합니다.
• 미디어 쿼리 사용 : 일부 장치 만 사용하는 CSS (예 : 인쇄 또는 특수 화면)의 경우 브라우저의 속성 미디어가 필요할 때만 다운로드 할 수 있습니다.

그리고 어디에서 시작해야합니까? 가장 쉬운 것은 Google Pagespeed Insights로 이동하여 URL을 먼저 올리는 것입니다. 먼저 결과를 참조하십시오. 파일 목록으로 고소합니다. 어느 것이 "피고인"입니까?

삽화를위한 프롬프트 : 인포 그래픽 비교 정상 하중 (정상), 비동기 및 각 시간 유형이 웹 페이지 (타임 라인)에서 어떻게 작동하는지 보여줍니다.

성공했던 실제의 예

이미지가 더 명확 해지려면이 문제가 발생한 전자 상거래 웹 사이트의 경우를 들어 올리고 싶습니다. 그들의 웹 사이트는 특히 Shopify Pagespeed 점수 약 38 (빨간색)에서 매우 느리게 다운로드하며 렌더 블로킹 리소스가 있습니다. 제품 이미지가 완료되기 전에 많은 고객이 웹 사이트를 누르십시오.

미션 : 팀은 검사를 받아 주요 문제가 설치된 많은 타사 앱에서 나온다는 것을 발견했습니다. 그들 각각은 자신의 자바 스크립트 및 CSS 파일을 사용하여 오랫동안 "대기 대기"를 초래합니다.

해결책:

1. 불필요한 앱 확인 및 삭제 : 거의 사용되지 않거나 겹치는 기능을 제거하는 앱을 제거하여 시작하십시오.
2. 사용 연기 JavaScript : 나머지 앱의 스크립트와 테마 스크립트가 추가됩니다. 모든 연기됩니다 기본 성능을 방해하지 않기 위해
3. 크리티컬 CSS 생성 및 인라인 CSS : 팀은 중요한 CSS 도구를 사용하여 헤더, 메뉴 및 영웅 배너에 직접 HTML을 넣는 데 필요한 스타일을 가져옵니다.
4. 나머지 CSS Lazy-Load를로드하십시오 : 메인 CSS 파일은 웹 페이지가 표시된 후 다운로드하도록 조정됩니다.

결과 : Pagespeed Insights 점수를 조정 한 지 1 주일 만에 38에서 89로 돌진합니다 (노란색, 거의 녹색). LCP 값은 2.5 초보다 낫습니다. 가장 중요한 것은 경계 율이 18% 감소하고 전환율은 1.2% 증가한 것입니다. 이것은 "속도 복원"을 웹 사이트로 복원하는 실질적인 결과입니다. 이는 전자 상거래 최적화 감사 서비스의 주요 목표 중 하나 입니다 .

삽화를위한 프롬프트 : 예를 들어 왼쪽은 전자 상거래 웹 사이트 이전에 천천히로드되는 웹 사이트입니다. 요소는 좋지 않습니다. 오른쪽은 빠르게로드 된 동일한 웹 사이트이며 전환율 수가 증가한 아름다운 결과를 표시했습니다.

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음)

이 문제를 관리 할 준비가 되었습니까? 이 단계를 따를 수 있습니다.

1 단계 : 캐릭터를 찾으십시오.

• Google Pagespeed Insights 로 이동하십시오
• 웹 사이트 URL을 넣고 "분석"을 누릅니다.
• "기회"섹션을 보려면 아래로 스크롤하고 "렌더 블로킹 리소스 제거"
• 문제가되는 .js 및 .css 파일 목록을 보려면 클릭하십시오.

2 단계 : JavaScript 파일 관리 (쉽게 만들기 쉽음)

• 각 .js 웹 사이트의 HTML에서 해당 파일을 사용하는 코드를 찾을 수 있습니다.
• 다음과 같이 보일 것입니다.
• 태그에 연기를 추가 할 수 있습니다 .
• PagesPeed의 모든 스크립트 로이 작업을 수행하십시오 (긴급하게 작업하는 데 필요한 스크립트 제외.

3 단계 : CSS 파일 관리 (약간 더 복잡함)

원칙은 CSS를 "Critical"및 "Non-Critical"의 두 부분으로 나눌 것입니다.

1. 중요한 CSS 작성 : 와 같은 온라인 도구를 사용하십시오 . URL을 추가하십시오. CSS 코드를 생성합니다.
2. 중요한 CSS를 헤드에 넣으십시오. 이전 단계에서 얻은 코드를 복사하십시오. 섹션에 넣으십시오 태그에 넣어 웹 사이트의
3. 원래 CSS 파일이 차단되지 않도록 : 태그 찾기 원래 CSS 파일 중에서 나중에 다운로드하도록 브라우저를 속이기 위해이 유형으로 조정하십시오.
   
   이 기술은 브라우저에 "이것은 인쇄 스타일입니다 (다운로드 할 필요는 없음)"라고 말하지만 부하가 완료되면 (onload) 이전과 같이 모든 장치 (모두)로 다시 변경합니다. 더 많은 것을 이해하려면 Google Web.dev 의 약간의 조언을 읽으십시오

주의 : 실제로 사용하기 전에 실험 버전 (스테이징)에서 모든 변경 사항을 테스트해야합니다. 웹을 보호합니다

그림을위한 프롬프트 : Google Pagespeed Insights를 사용하는 프로세스를 보여주는 화면은 "Elminate 렌더 블로킹 리소스"와 문제가되는 원형 원을 가리 킵니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

연기 와 비동기를 사용하는 방법은 무엇입니까? 어느 것을 선택해야합니까? A : 둘 다 브라우저가 스크립트를 다운로드하지 않도록합니다. 그러나 "작업 순서"에서 다릅니다. 연기는 웹 페이지가 먼저 완료 될 때까지 기다렸다가 작동합니다. (그리고 코드로 작성된 각각 실행됩니다)는 대부분의 스크립트에 안전하고 적합합니다. Async는 하중이 완료 되 자마자 작동합니다. 순서에 관심이없고 Google Analytics와 같은 사람에게 바쁘지 않은 독립 스크립트에 적합한 것을 기다리지 않습니다. 확실하지 않은 경우 연기를 . Q2 : 부러 질까요? 웹 사이트가 중단됩니까? A : 기회가 있습니다! 특히 DEFER 또는 ASYNC 와 함께 작동 해야하는 스크립트를 사용하여 (스크립트 B 앞에서 스크립트 A와 같은 스크립트 B와 같은 스크립트 b) 일부 웹 기능이 왜곡 될 수 있습니다 . 웹 사이트 개발 전문가를 위한 자신감이 없거나 복잡한 코드라면 을 관리하는 것이 좋습니다 . 왜 일부 파일을 수정할 수 없습니까? 특히 외부의 스크립트? A : 맞습니다. Facebook Pixel, Google Tag Manager 또는 Live Chat과 같은 타사의 스크립트는 그의 Origin 파일을 편집 할 수 없습니다. 가장 좋은 방법은 해당 스크립트를 사용해야하는지 여부를 고려하는 것입니다.

Q4 A : 필요하지 않습니다. 실제 목표는 숫자 100이 아니지만 "사용자가 웹 사이트가 빠르다고 느끼고 핵심 웹 생명체는"좋은 "기준 (녹색)에 있습니다. 100 점수의 추격은 불필요하게 일부 기능과 교환해야 할 수 있습니다. 최상의 경험을 얻기 위해 사용자를 향상시키는 데 집중하는 것만으로도 충분합니다. SEO는 여러 요인에 따라 Google의 첫 페이지에 첨부됩니다 속도뿐만 아니라

그림을위한 프롬프트 : 연기, 비동기, 깨진 코드 및 100 점을 나타내는 작은 아이콘으로 둘러싸인 큰 물음표 아이콘.

이해하기 쉬운 요약 + 노력하고 싶어

다시 마음의 요약. "렌더 블로킹 리소스"문제는 불필요한 CSSCIPT 파일을 사용하면 브라우저가 웹 페이지를 천천히 표시 할 수 있다는 것입니다. 최상의 솔루션의 사용자 경험, SEO 순위 및 판매에 영향을 미치는 최상의 솔루션은 연기 하고 사용자가 가능한 한 빨리 웹의 첫 부분을 볼 수 있도록 "인라인 중요한 CSS"기술을 사용하여 "새로운 우선 순위"입니다.

웹 사이트 속도 개선은 기술적 인 문제 일뿐 만 아니라 사용자의 귀중한 시간에 대해 "존중을 나타내는"것입니다. 웹을 더 빨리 만들면 좋은 첫인상을 만들고 있습니다. 그리고 고객을 환영 할 수있는 문을 열어 비즈니스를 더 쉽게 입력 할 수 있습니다.

지금! 기다리지 마십시오. URL을 사용하여 Google Pagespeed Insights에서 테스트하고 한 단계 권장하는 단계를 수정하십시오. 오늘 약간의 조정만으로도 내일 비즈니스 결과를 믿을 수 없을 것입니다!

너무 복잡하다고 느끼거나 전문가가 웹 사이트를 "진단 및 수술"하는 데 도움을주기를 원한다면 빨리 돌아와서 다시 속도를 첨부하십시오. Vision X Brain Team에 무료로 문의하십시오! 우리는 당신을위한 돈 도구가되는 것이 느리게 웹 사이트를 변경할 준비가되었습니다.

삽화를위한 프롬프트 : 강력한 그래픽으로 로켓은 컴퓨터 화면에서 솟아 오르고 있으며, "지금 속도를 높이십시오!"

‍