섬 건축이란 무엇입니까? 더 빠른 웹 사이트를 만드는 새로운 개념

인생의 실제 문제

오늘날 많은 웹 사이트가 왜 많은 웹 사이트를 느낀 적이 있습니까? "아름답고 느리고"? 우리는 현대적인 디자인을 찾기 위해 웹 사이트에 들어갔다. 아름다운 애니메이션을 사용하면 버튼을 누르면 스크롤하여 제품을 보거나 대신 무언가를 기다려야합니다 ... 기다려야합니다 ... 기다렸다가 웹이 때때로 응답하기 전에 기다립니다. 이 문제는 성가신 것이 아니라 실제 "살인자 개종"입니다. 특히 아름다운 웹 예산에 투자하는 비즈니스 소유자 또는 마케팅 팀이지만 결국 고객은 불행히도 비즈니스 기회를 잃어 버리기 때문에 폐쇄를 촉구했습니다.

그림을위한 프롬프트 : 사용자 이미지가 턱 발에 앉아 있습니다. 지루함이있는 컴퓨터 화면이나 휴대폰을보고 있습니다. 화면에는 아름답게 보이는 로딩 기호가 있습니다. 천천히로드 된 웹의 과민성을 전달하기 위해

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

이 문제의 출처는 일반적으로 "수화"방법을 사용하는 기존 웹 제작 아키텍처 (예 : 단일 페이지 응용 프로그램 또는 SPA)에서 비롯됩니다. 다시 말해서, 우리는 웹 페이지가 나타나는 것을 보았지만. 그러나 브라우저 뒤에는 대형 JavaScript (JS) 파일을 다운로드 한 다음 전체 웹 페이지에 "Wake Up"을 다운로드하고 동시에 모든 사용자와 상호 작용할 수 있어야합니다. 우리가 식탁에 음식을 주문했다고 상상하지만 요리사는 "모든 요리가 먼저 식사를 시작할 때까지 기다려야한다"고 말했다. 그 결과 대부분의 웹 페이지는 JS를 전혀 사용할 필요가 없지만 먼저 KYPAD 또는 먼저 다운로드하는 데 사용되는 주석과 같은 작은 부분을 기다려야하는 메시지 또는 슬라이드 (정적) 일뿐입니다. 모든 것이 너무 느립니다.

삽화를위한 프롬프트 : 왼쪽의 2면과 비교 한 간단한 인포 그래픽 이미지, "원래 방법"은 오른쪽에 웹 페이지를 찾기 위해 큰 JavaScript Lump Run에 표시된 "원본 방법", "Island Architecture"는 여전히 웹 페이지를 보여주고 많은 작은 JavaScript 덩어리가 구매 버튼, 검색 상자와 같이 필요한 섬만 실행됩니다 (Island) 만 보여줍니다.

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

오래된 구조가 예상보다 심각한 결과를 초래하기 때문에 웹을 느리게합니다. 우선, UX (User Experience)가 철거됩니다. 아무도 기다리는 것을 좋아하지 않습니다. 그리고 그것은 더 높은 바운스 비율 (사람들은 누르고 서둘러 누르기 위해 서둘러). 다음은 핵심 웹 생명체 , Google은 웹에서 사용자 경험의 품질을 사용하는 점수입니다. 다음 페인트와의 상호 작용 (INP) 과 같은 새로운 지표가 직접 영향을받습니다. 웹 사이트가 큰 JS와 느린 작업을로드하면 사용자의 클릭으로 웹 응답 속도 또는 작업을 측정하기 때문에 INP 점수가 낮아 지므로 결국 Google은 빠른 웹 사이트를 좋아하고 사용자에게 좋은 경험을 제공하기 때문에이 모든 것이 SEO 순위를 너무 심하게 끌어 올릴 것입니다.

그림의 프롬프트 : 그래프는 SEO 순위를 보여줍니다. 비즈니스 및 SEO의 부정적인 영향을 전달하기 위해 상승한 사용자의 눈살을 찌푸린 아이콘 및 경계 속도와 함께

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

좋은 소식은 우리 가이 특별한 문제를 해결하기위한 새로운 개념을 가지고 있다는 것입니다 : Island Architecture ! Jason Miller 에 의해 제시되고 알려졌으며 현대 프레임 워크에서 널리 사용되었습니다. 그것의 원칙은 매우 쉽습니다. 전체 웹 페이지를 보는 대신 모든 JavaScript가 우리의 웹 페이지가 HTML로 가득 찬 "바다"와 같다는 것을 알 수있는 응용 프로그램은 여전히 "섬"이며, 그 중 일부는 대화식입니다.

따라서 모든 JavaScript를 사용자에게 한 번에 보내는 대신 HTML을 즉시 표시합니다. 웹이 먼저 다운로드 한 다음 javaScript tiny javaScript를 보내면 사용자 가이 방법과 상호 작용하려고하는 "섬"만 보내는 것을 부분 수화 또는 선택적 수화라고합니다. "모든 것이 완료되기를 기다리는 것"에서 "해야 할 부분 만 수행 해야하는 부분"으로서 가장 강력한 변화의 시작입니다.

그림을위한 프롬프트 : 해상지도 이미지 (웹 페이지 대신), 대부분의 정적 HTML 및 작은 섬의 흩어져 있으며, 각각은 "구매 할 버튼", "비디오", 댓글 "이라는 표시가 있습니다.

성공했던 실제의 예

Island Architecture를 성공적으로 사용하는 가장 확실한 예는 Astro Framework . Astro는 철학에 관한 것입니다. "JavaScript 0kb를 기본값으로 보내십시오"(기본적으로 Zero-Js).

개발자가 상호 작용을 원할 때 (이미지 회전 목마 또는 카트에 추가) 해당 부분을 "Island"로 발표하고 사용자가 스크롤하거나 클릭 할 때 즉시로드 (Eger)와 같은 JavaScript를 다운로드하도록 선택할 수 있습니다. 결과는 코어 스코어로 작성된 웹 사이트입니다. 우수한 웹 생명체와 더 나은 사용자 경험을 제공합니다. 섬 건축 의 개념은 이론 일뿐 만 아니라 실제로 효과가 있고 놀라운 결과를 낳는 것임을

그림을위한 프롬프트 : 로켓 (속도), 핵심 웹 생명 및 사용자의 미소 (좋은 UX)와 같은 장점을 나타내는 아이콘으로 둘러싸인 아스트로 프레임 워크 로고.

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

이 아이디어를 적용하려는 개발자 또는 웹 소유자의 경우 단계는 생각만큼 복잡하지 않습니다.

1. 웹 페이지 분석 : 어떤 부분이 정적 인 부분을 찾고 (단지 디스플레이), 어떤 부분이 대화식인지 (클릭, 채우기 또는 움직임)
2. 올바른 도구를 선택하십시오 : Astro 또는 QWIK와 같이이 아키텍처에 직접 구축 된 프레임 워크를 연구하거나 유사한 것을 허용하는 React Server 구성 요소와 같은 프레임 워크에서 기능을 찾고 있습니다.
3. 작은 부분으로 시작하십시오 : 새로운 방문 페이지 페이지 또는 복잡한 구성 요소에 먼저 신청하십시오. 작업 원칙을 이해합니다
4. "게으른"하중에 집중하십시오. "Island"를 설정하십시오. 사용자가 화면을 닫을 때와 같이 실제로 필요한 경우에만 JavaScript를 다운로드하거나 사용자가 액션에서 (유휴 상태에서) 가능한 한 빨리 첫 번째 웹 페이지를 다운로드 할 때와 같이 JavaScript를 다운로드하십시오.

헤드리스 상업 WebAsembly 와 같은 새로운 기술로 작업하여 빠르고 강력한 웹 애플리케이션을 만드는 것과 같은보다 복잡한 아키텍처로 확장 될 수 있습니다

그림을위한 프롬프트 : 위의 내용에 따라 4 개의 쉬운 -이해 아이템으로 "Island Architecture를 구현하는 방법"이라는 주제의 체크리스트. 각 아이콘이 있습니다

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

섬 아키텍처는 Micro-Fronntds와 같은가요?
마이크로 프론트가 "나누기 팀"에 중점을 두지 않습니다. 다양한 부품을 개발합니다. 웹의 자유롭게. Island Architecture는 웹 로딩 효율을 향상시키기위한 "JavaScript"방법에 중점을 둡니다. 두 아이디어 모두 함께 사용될 수 있지만 다른 주요 목표를 가지고 있지만

이 개념을 사용하기 위해 완전히 새로운 웹 사이트를 작성해야합니까?
Framework가있는 새 프로젝트의 시작이지만 항상 필요한 것은 아니지만 Astro가 가장 쉬운 일이지만 코드를 심각하게 만들고 다양한 구성 요소와 함께 게으른로드 기술을 사용하는 등 원래 웹 사이트에 원칙을 적용 할 수 있습니다. 비슷한 결과를 얻으려면

어떤 종류의 웹 사이트에 적합합니까?
블로그, 뉴스 웹 사이트, 전자 상거래 웹 사이트 및 대부분의 웹 페이지의 마케팅 웹 사이트와 같은 콘텐츠 (콘텐츠가 많은 사이트)에 중점을 둔 웹 사이트에는 매우 적합하지만 대부분의 웹 페이지에서는 정적이지만 대화식이 필요한 부분이 있습니다. 아일랜드 건축을 사용하면 이러한 웹 사이트가 엄청나게 빨리 도움이 될 것입니다.

SEO에 정말 영향을 미치나요?
직접적인 효과가 있고 페이지 속도가 매우 우수하며 더 나은 핵심 웹 생명은 Google이 Island Architecture 에서이 두 부분을 순위하는 데 사용하는 중요한 요소는 SEO의 레드 카펫과 같습니다. 또한 웹 내비게이션을 더 빨리 도와주는 PRESMULATION RULING API

삽화를위한 프롬프트 : 이미지 아이콘, 큰 물음표 (?) 및 Q & A를 전달하기 위해 짧은 메시지 상자가 있습니다.

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

요컨대, 섬 아키텍처는 웹을 만드는 방법의 변화입니다. 동시에 모든 것을로드 해야하는 원본에서 HTML을 사용하여 가볍고 빠른 웹 사이트를 만들고 천천히 "일어나". "섬"으로서 삶에 반응 해야하는 부분 만. 우수한 사용자 경험과 Google의 사랑을받습니다

귀하의 웹 사이트는 상점에 들어가려는 고객 앞에서 문을 닫는 것과는 달라지지 않습니다. 기회가 사라지지 않도록하십시오. 이제 효과적으로 강조하는 현대적인 웹 아키텍처에주의를 기울일 때입니다. 이 아이디어를 사용하여 다음 프로젝트에 공부하고 신청하십시오. 또한 "아름답고 빠른"웹 사이트가 다른 비즈니스 결과를 만들 수 있음을 알게 될 것입니다.

최신 기술과 가장 효과적인 아키텍처로 웹 사이트를 다음 단계로 업그레이드하려면 웹 사이트를 다음 단계로 업그레이드하려면. 고급 웹 플로우 개발 서비스 를 살펴보십시오 . 우리는 컨설턴트가 될 준비가되어 있으며 뛰어난 웹 사이트를 만들고 경쟁력있는 이점을 만들도록 도와줍니다.

삽화를위한 프롬프트 : 전구의 밝은 램프 이미지에는 Call to Action 텍스트가 포함 된 작은 섬지도가 있습니다. "오늘날보다 빠른 웹 사이트를 만듭니다!" 그것을 자극하기 위해.

‍