중요한 CSS와 일하는 방법은 무엇입니까? (웹로드를위한 기술)

인생의 실제 문제

이렇게 느낀 적이 있습니까? 흥미로운 웹 사이트를 클릭하십시오. 그러나 환영하는 것은 ... 흰색 화면 , 두 번째는 기다릴 수 있습니다 ... 끝까지 인내심을 잃고 꺼집니다! 이런 종류의 과민성은 고객이 매일 만나는 것입니다. 전환율과 SEO 순위를 조용히 파괴하는 "살인"입니다. 당신이 모르는 것입니다

"느린 다운로드 웹 사이트"증상, 특히 감정뿐만 아니라 첫 번째로 본 (주름 위) 증상. "렌더 블로킹 리소스" 라는 기술적 인 문제 또는 웹 페이지의 표시를 차단 한 리소스입니다. 중요한 요소는 우리의 무거운 CSS 파일입니다.이 문제는 해결해야 할 긴급한 문제입니다. 직접 추가하기 위해 렌더 블로킹 리소스를 수정하는 방법 에 대해 자세히 알아볼 수 있습니다

삽화를위한 프롬프트 : 사용자 이미지는 여전히 흰색 인 스마트 폰 화면을 쳐다 보면서 자극적 인 표현을 보여줍니다. 중간에는 로딩 기호 만 있습니다. 웹 사이트가 너무 오래 다운로드되기를 기다리는 느낌을 전달합니다.

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

이미지를 명확하게 보려면 브라우저 (예 : Google Chrome)가 매우 부지런한 배달 직원처럼 작동한다고 상상해보십시오. 누군가가 귀하의 웹 사이트에 전화하면 이전에 HTML 파일 (웹 구조)을 얻을 수 있습니다. HTML에서 명령을 읽은 후에는 "Hey!"명령을 찾기 전에 모든 CSS 파일을 다운로드 해야하는 내용을 보여주기 전에! "CSS 파일은 색상 웹이 무엇을 해야하는지 말하는 드레싱 매뉴얼과 같지만 포인트는 전체 CSS 파일이 먼저 완료되기 위해 "모든 것을 중지 " 일부 스타일은 사용자가 보지 못한 웹 사이트의 하단 내용에 대한 스타일입니다.

"계속하기 전에 끝날 때까지 기다려야합니다." 렌더 블로킹이라는 단어의 기원이며 , CSS 파일이 크고 복잡합니다. 대기는 더 길다. 먼저 볼 수있는 중요한 내용에도 불구하고 사용자가 흰색 화면을 더 오래, 불필요하게 응시하면 CS 만 있으면됩니다.

그림의 프롬프트 : 쉬운 일기 이미지는 일반 브라우저의 프로세스를 보여줍니다. 1. 브라우저 요청 html -> 2. CSS -> 3 참조 -모든 CSS 파일을 다운로드하려면 작동 중지 (빨간 정지 기호 포함 중지 -> 4 참조).

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

CSS는 아름다운 상점을 여는 것과 다르지 않기 때문에 웹 사이트가 느리게로드되는 문제를 간과합니다. 그러나 고객이 결과를 입력 할 수 있도록 문을 잠그는 것은 예상보다 훨씬 강렬합니다.

• 사용자 경험 (UX) 파괴 : 아무도 기다리는 것을 좋아하지 않습니다. 이 연구에 따르면 단지 1-3 초 만에 웹 사이트의 속도가 느려지고 경계 가능성의 32% 이상이 추가됩니다.
• 전환율. 스케일 : 좌절감을 느끼는 고객은 물건을 사지 않는 고객입니다. 판매를 마감하거나 리드를 받거나 사람들이 중요한 버튼을 클릭 할 수있는 기회. 느린 속도로 눈의 깜박임에서 사라질 것입니다.
• SEO 순위. 드롭 : Google은 핵심 웹 생명체를 순위 요소 중 하나로 사용하여 사용자 경험에 큰 중요성을 부여합니다. 느린 웹 사이트는 LCP (가장 큰 콘텐츠 페인트) 값에 직접적인 부정적인 영향을 미칩니다. 중요한 메트릭 중 하나는 핵심 웹 활력을 향상시킵니다 그리고 마침내 넘어졌습니다
• 신뢰성 상실 : 느린 웹 사이트는 비전문가를 반영합니다. 고객이 귀하와 거래 할 자신감이 부족하여 웹의 경쟁사에게 더 빨리 탈출 할 수 있습니다.

삽화의 프롬프트 : 2 개의 그래프 이미지 비교 첫 번째 막대에는 맨 위에 눈이 눈을 띠고 있습니다. "전환율"메시지로 그래프가 떨어졌고 다른 하나는 스마일 아이콘이 있습니다. "바운스 속도"메시지가 표시되어 부정적인 영향을 전달합니다.

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

좋은 소식은 ... 우리는이 문제를 해결하기위한 "고속도로"가 있다는 것입니다. "중요한 CSS" 또는 "절대적으로 필요한 CSS" 라고합니다

그것의 원칙은 매우 쉽습니다. 브라우저가 디스플레이 전에 모든 CSS를 다운로드하도록 강요하는 대신 : 새로운 게임으로 변경됩니다.

1. 찾아서 추출 (추출) : "폴드 위"내용에 필요한 CSS 스타일 만 찾을 수 있습니다.
2. HTML (인라인)에 묻힌 : CSS를 추출한 (매우 작음)를 가져와 태그를 넣습니다. ภายในส่วน ของไฟล์ HTML โดยตรง
3. 나머지를 나중에로드 (Async/Defer) : 다운로드하도록 주문할 모든 CSS 파일. "디스플레이를 차단하지 마십시오"(비동기 적으로) 웹 페이지가 표시된 후 페이지 뒤에서 점차 다운로드해야합니다.

결과는 무엇입니까? 브라우저는 Critical CSS가있는 HTML 파일을 수신하고 내장되어 있으며 사용자가 볼 수있는 첫 번째 웹 페이지를 "색상"하거나 표시 할 수 있습니다. 거의 즉시! 사용자는 귀하의 웹 사이트가 빠르다고 생각하지만 다른 CSS는 점차적으로로드됩니다. Smashing Magazine이 성능 최적화의 핵심에 제공하는 중요한 기술 중 하나입니다

그림을위한 프롬프트 : 이해하기 쉬운 이해가 쉬운 CSS의 개념을 설명하십시오. 2. CSS 코드를 HTML 파일 (인라인)에 넣으십시오. 3. 나머지 CSS 파일은 나중에로드됩니다 (비동기로드).

성공했던 실제의 예

"세련된 장식"온라인 가정 장식 상점을 상상해보십시오. 매우 아름다운 웹 사이트가 있습니다. 그러나 큰 문제가 발생했을 때, 휴대 전화의 판매량은 팀이 Google Pagespeed Insights 점수가 LCP (가장 큰 콘텐츠 페인트)가 최대 4.8 초로 매우 나쁘다는 목표보다 훨씬 낮습니다. 이는 고객이 거의 5 초 동안 흰색 화면을 응시하기 위해 첫 번째 제품 이미지를보기 위해 거의 5 초 동안 흰색 화면을 응시해야 함을 의미합니다!

선회 미션 : 개발 팀은 중요한 CSS 기술을 사용하기로 결정했습니다. 헤더, 영웅 배너 및 HTML에 표시된 첫 4 개 항목에 필요한 CSS를 추출하고 나중에 기본 CSS 파일을 설정합니다.

실질적인 결과 : 1 주일 만에 웹 LCP 값은 4.8 초에서 1.6 초로 감소했습니다! 사용자는 웹이 "다른 스토리처럼"더 빠른 "휴대 전화의 Bondce rate가 25% 감소했다고 생각하며, 가장 중요한 것은 바트 하나도 촬영하지 않고도 전환율이 12% 증가한 것으로 생각 이것은 사용자가 먼저 보는 것에 초점을 맞추는 힘입니다. 위의 위에 여전히 매우 중요하다는 생각과 일치합니다

그림을위한 프롬프트 : 화면/후 화면의 비교 이미지. Google Pagespeed Insights. 사진은 빨간색 성능과 높은 LCP를 보여줍니다. Aftert 이미지는 녹색 점수와 LCP 값이 상당히 낮은 것을 보여줍니다.

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

중요한 CSS는 그리 어렵지 않습니다. 현재 많은 도구가 있습니다. 다음 단계를 따르십시오.

1 단계 : 중요한 CSS 추출.
가장 좋은 방법은 자동 도구를 사용하는 것입니다. 직접하는 것은 시간 낭비이며 매우 쉽기 때문입니다.

• 온라인 도구 : 무료 중요한 CSS를 제공하는 웹 사이트가 있습니다. Sitelocity의 중요한 CSS 생성기와 같은 URL을 넣으십시오.
• NPM 패키지 (개발자 용) : 개발자 인 경우 매우 인기 있고 강력한 'Critical' 빌드 프로세스 시스템에서 작동 할 수 있습니다.
• CMS 플러그인 (WordPress/Shopify 용) : 대부분의 플랫폼에는 WP Rocket, PerfMatters (WordPress)와 같은 자동 속도 플러그가 있으며 일반인에게 가장 쉬운 방법입니다.

2 단계 : 웹 사이트에 넣습니다.

1. 첫 번째 단계에서 추출한 CSS 코드를 가져옵니다. 태그에 넣으십시오 ที่ส่วน ของหน้าเว็บคุณ
2. 원래 CSS 다운로드 명령을 다음에서 조정하십시오.
   나중에 다운로드 할 수 있도록 이와 같이 되려면 :
   

이 새 코드는 브라우저에 "긴급하지 않고이 파일을 미리 다운로드합니다. 부하가 완료되면 스타일 시트로 사용하십시오."사용자가 JavaScript를 끄는 경우 보호입니다. 전문가가 필요한 경우 이러한 구조를 확인하고 개선하십시오. 전자 상거래 최적화 감사가 도움이 될 수 있습니다.

그림을위한 프롬프트 : INFOVIC, 3 단계, 중요한 CSS, 아이콘이 포함 된 1. 생성 (컴퓨터 사용) 2. 인라인 (HTML에 코드를 넣음) 3.

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

Q : HTML 파일이 더 커질까요? 부정적인 영향이 있습니까?
답 : 예, HTML 파일이 약간 더 커집니다. 그러나 이것은 "큰 가치"의 교환입니다. 사용자의 이점은 웹 페이지를 즉시 표시 할 수 있습니다. HTML 파일 크기보다 더 많은 가치만으로도 사용자의 전반적인 경험이 크게 증가했습니다. 이것이 우리의 주요 목표입니다

질문 : 모든 페이지에 대해 별도의 임계 CSS를 만들어야합니까?
답변 : 이론에서 가장 좋은 것은 "예"입니다. 각 템플릿 (첫 페이지, 제품 페이지, 블로그 페이지)은 레이아웃과 접힘 스타일 이상입니다. 그러나 처음에는 첫 번째 페이지 및 기본 방문 페이지와 같이 트래픽이 가장 높은 중요한 페이지에 집중할 수 있습니다. 대부분의 자동 도구는 CSS를 만드는 데 도움이 될 수 있습니다.

질문 : 웹 디자인의 편집이 있다면 어떻게 처리 하는가?
답 : 이것은 주요 도전입니다. 위의 폴드에서 디자인을 변경할 때마다 새로운 Critical CSS를 만들어야합니다. 이것이 자동화 된 빌드 프로세스가 개발자를위한 이유입니다. 또는 CMS 사용자를위한 신뢰할 수있는 플러그를 가장 권장되는 방법으로 사용하면 변경이있을 때마다 스스로를 재생하는 데 도움이되므로 관리가 훨씬 쉬워지고 지속 가능한 웹 디자인 가이드 라인 도

삽화를위한 프롬프트 : 사람의 이미지는 컴퓨터 앞에서 진지하게 생각하고 있습니다. 분명한 답변이 필요한 질문이있는 것에 대해 언론 주위에 물음표 (?)가 떠 다니면서

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

Critical CSS 는 프로그래머를위한 기술 일뿐 만 아니라 사용자에게 최고의 경험을 제공하는 웹 사이트를 만드는 "마음"입니다. "가장 중요한 것을 먼저 전달하는 것"으로서 "모든 것을 기다리게하기 위해"사고 방식을 바꾸는 방법입니다. 사용자가 원하는 컨텐츠를 잠시 동안 보게하려면 "고객 손실"과 "일반 고객 생성"의 차이점입니다.

흰색 화면과 지루한 것이 더 이상 사업을 파괴하기 위해 기다리지 않도록하십시오. 다양한 도구를 사용해보십시오. 귀하의 웹 사이트를 확인하는 것이 좋습니다. 오늘 투자에서 개선하기 시작한 것은 오늘날 효과적입니다. 앞으로 전환과 SEO의 성장을위한 강력한 토대를 구축하는 것입니다.

귀하의 웹 사이트 ... 더 빨리 준비가 되셨습니까? 즉시 해보면 결과에 분명히 놀랄 것입니다!

삽화를위한 프롬프트 : 로켓 이미지가 하늘로 빠르게 돌진하고 있습니다. 로켓에는 독자들이 행동 할 수있는 영감과 격려로서 "페이지 속도"와 "변환"이라는 단어가 있습니다.

‍