Google, 페이지 로드를 줄이고 UX 개선을 위한 새로운 Chrome 개발 도구 발표

20년 전 Google은 웹 검색 엔진으로 출발했지만 오늘날에는 우리가 웹을 경험하고 상호 작용하는 방식을 지배하고 있습니다. Google 검색 자체는 온라인 사용의 대부분을 차지하지만 세계에서 가장 인기 있는 브라우저와 같은 다른 제품은 – 구글 크롬 – 가장 많이 사용되는 모바일 운영 체제인 Android는 물론 Google을 웹의 다른 이해관계자들 사이에서 선두에 두었습니다. 모바일 장치를 사용하여 온라인에 접속하는 사용자의 비율이 증가함에 따라 인터넷 거대 기업은 끈적함을 보장하기 위해 로드 시간을 줄이는 데 중점을 두었습니다. 앰프 또는 가속화된 모바일 페이지 이는 웹페이지 로딩 속도를 높이기 위해 Google이 취한 조치 중 하나였습니다. 지난해에는 ''라는 웹 요소도 도입했다.포털"를 사용하여 웹페이지 간의 "원활한" 전환을 최적화합니다.

"라는 비전을 가지고로딩을 사라지게 만들어," Google은 오늘 2019 컨퍼런스에서 새로운 개발자 도구를 발표했습니다. Chrome 개발자 서밋 2019 웹을 더욱 안전하고 사용자 친화적으로 만드는 동시에 개발자가 사용자 기반과 수익을 높이는 데 도움을 줄 수 있는 기회를 향상합니다.

포털

Google은 다음과 같은 진전을 보여주었습니다. 포털 올해 초 Google I/O에서 출시한 이후 Chrome Canary의 플래그 뒤에 구현되었습니다. 기억을 되살리기 위해 포털을 사용하면 개발자는 iframe처럼 특정 콘텐츠나 전체 웹페이지를 다른 웹페이지에 삽입할 수 있습니다. 대기 시간을 없애기 위해 사용자가 초기 웹페이지를 탐색하는 동안 포털 내부의 콘텐츠나 프레임이 로드됩니다.

Google은 특정 영화의 방문 페이지(조커 예에서)은 포털 내부에 바인딩되어 있습니다. 사용자가 Joker를 탭하면 다음 페이지가 이미 완전히 로드되어 렌더링됩니다.

웹 번들

구글이 발표한다 웹 번들 이는 웹 개발자가 이메일, USB 또는 FTP를 포함하되 이에 국한되지 않는 다양한 매체를 통해 다른 사람들과 웹 콘텐츠를 공유할 수 있도록 돕기 위해 만들어졌습니다. 개발자는 다음과 같은 API를 사용하여 공유하려는 전체 웹 콘텐츠를 효과적으로 캐시할 수 있습니다. 백그라운드 주기적 동기화 그리고 콘텐츠 인덱싱 최종 사용자가 인터넷에 연결되어 있지 않더라도 필요한 콘텐츠를 선택적으로 렌더링합니다. 웹 개발자가 이 기능을 활용할 수 있도록 Google은 Chrome 플래그 뒤에 웹 번들을 제공하고 있으며 두 API는 다음과 같이 사용할 수 있습니다. 오리진 트라이얼.

네이티브와 유사한 웹 경험

많은 사용자가 온라인에 접속하기 위해 휴대전화를 사용한다는 점을 인식하면서 Google은 전 세계의 교차 기기 사용 패턴도 인정합니다. Google은 2년 넘게 계속해서 노력해 왔습니다. 프로그레시브 웹 앱 (PGA)는 로딩 시간과 데이터 소비를 줄이기 위한 목적으로 기본 Android 앱을 대체합니다.

[동영상 폭="390" 높이="800" mp4=" https://static1.xdaimages.com/wordpress/wp-content/uploads/2019/11/Login_OTP_Flow_Swiggy.mp4"]

웹의 애플리케이션을 기본 앱과 일치시키기 위해 Google은 개발자를 위한 세 가지 새로운 기능을 발표했습니다. 이것들은:

1. SMS 수신기, 이를 통해 웹 앱은 앱처럼 SMS 기반 인증 코드를 가져올 수 있습니다. 위 동영상에서 인도 음식 주문 서비스인 Swiggy의 웹 버전이 사용자에게 SMS를 통해 수신된 인증 코드를 활용하도록 얼마나 원활하게 제안하는지 확인할 수 있습니다.
2. 연락처 선택기이를 통해 사용자는 WhatsApp과 같은 메시징 앱의 연락처 공유와 유사한 방식으로 웹 앱에 연락처를 업로드할 수 있습니다.
3. 네이티브 파일 시스템 API, 이는 웹 앱에 사용자 기기에서 파일과 폴더를 읽고 변경 사항을 직접 저장할 수 있는 권한과 기능을 제공합니다. 이 기능의 잠재적인 응용 프로그램에는 온라인 텍스트 편집기, 사진 및 비디오 편집기, 심지어 웹 기반 IDE 등이 포함될 수 있습니다.

이러한 API는 Google Chrome용 오리진 트라이얼로도 제공됩니다.

개발자를 위한 새로운 측정항목 및 지침

일반적인 "웹의 건강"을 맥락화하는 데 도움을 주기 위해 Google은 다음과 같은 프로젝트를 발표했습니다. 웹 연감 와 협력하여 HTTP 아카이브. 85명의 전문가의 지도를 받아 이 프로젝트는 웹상의 최고 및 최악의 관행에 대한 실행 가능한 데이터에 대한 통찰력을 찾고 추세를 시각화하는 것을 목표로 합니다.

이 임무에는 거의 600만 개의 웹사이트를 검토하는 것이 포함되었으며, 그 후 전문가들은 사용자 경험을 개선할 수 있는 방법에 대한 결론을 요약했습니다. 20개 장. 이 관행은 "연간 전통"으로 반복되어 연감이 웹 개발자를 위한 유용한 가이드로 남을 것입니다.

이와 함께 Google은 개발자가 모범 사례에 맞게 웹사이트를 최적화하는 데 도움이 되는 두 가지 새로운 측정항목도 도입합니다. 이것들은:

1. 콘텐츠가 포함된 최대 페인트(LCP), 이는 웹페이지의 "인식된" 로딩 시간입니다. 간단히 말하면 "시점에 보이는 가장 큰 요소"의 로딩 시간입니다. 이것은 개발자가 모든 정렬을 제거할 수 있도록 웹페이지의 핵심 요소가 얼마나 빨리 로드되는지 수량화 지연의. LCP는 사용자가 페이지와 상호 작용하기 전의 시간에 대해 계산되므로 여기서의 의도는 로딩 지연을 최대한 최소화하는 것입니다.
2. CLS(누적 레이아웃 변경), 웹페이지의 안정성을 측정하는 데 사용됩니다. 이는 개발자가 페이지가 로드되는 동안 버튼이나 특정 이미지와 같은 요소가 표시 가능한 부분에서 위치를 변경하는 빈도를 결정하는 데 도움이 될 수 있습니다. 따라서 CLS는 개발자가 페이지가 로드되는 동안 요소의 위치가 변경되는 이러한 실망스러운 문제를 해결하는 데 도움이 될 수 있습니다. 이 측정항목은 로드하는 동안 페이지 요소가 이동하여 사용자를 괴롭히는 경향을 측정하는 "레이아웃 이동 점수"에 의존합니다. 사용자에게 번거로움 없는 경험을 보장하려면 레이아웃 변경 점수는 이상적으로는 0이거나 최소한 0에 가까워야 합니다.

개발자가 웹사이트에서 최고의 성능, 접근성 및 효율성을 달성할 수 있도록 지원한다는 목표로 Google은 다음과 같은 범위를 확장하고 있습니다. 등대 스택 팩 다양한 프레임워크에. Lighthouse에서 이미 지원하는 WordPress 및 Next.js 외에도 Google은 다음에 대한 지원을 추가하고 있습니다. AMP, Angular, React 등의 프레임워크와 전자상거래 전용 CMS인 Magento를 웹사이트.

메모리 관리 개선, 개인정보 보호 강화, 제어 강화

Google은 Chrome의 가장 큰 불만 사항 중 하나인 메모리 소비를 해결하기 위해 시간, 노력 및 돈을 투자하고 있다고 주장합니다. 메모리 관리 개선 작업 외에도 Chrome의 성능을 지속적으로 개선하여 '모든 사람이 웹에 계속 액세스할 수 있도록' 하고 있습니다.장치 유형, 인터넷 속도 또는 구매력."

개인 정보 보호 측면에서 Google Chrome의 다음 버전(ver79)에서는 쿠키 처리 방식이 개선될 예정입니다. 여기에는 사용자가 타사 쿠키를 훨씬 더 효과적으로 제어할 수 있도록 시크릿 모드의 새 탭 페이지에 새로운 토글이 포함되어 있습니다. 설정 페이지도 조정되어 일반 모드에서 이 토글에 쉽게 액세스할 수 있습니다.

Google은 다음 개발을 위한 노력을 더욱 강화하고 있습니다. 개인 정보 보호 샌드박스는 온라인 개인정보 보호를 향상하기 위해 마련된 일련의 개방형 표준으로 정의됩니다. 개인 정보 보호 샌드박스는 사용자가 광고로 인해 부담을 느끼거나 불안감을 느끼지 않고 웹사이트에서 쿠키를 배포할 수 있도록 하는 동시에 지문 채취를 차단하는 방법을 찾는 것을 목표로 합니다.