PWA Progressive Web App – 워드프레스 최적화 플러그인

워드프레스에는 다양한 최적화 유무료 플러그인이 존재하고 있으며 차세대 미래기술로 PWA 소개되고 있습니다.

• Hummingbird 플러그인 Gzip CSS 압축 워드프레스 최적화
• 워드프레스 최적화 WP-Optimize 원클릭 플러그인
• 워드프레스 이미지최적화 플러그인 Smush

그리고 저는 아래의 유료 최적화 플러그인을 사용하고 있으며 매우 만족스러운 결과를 보이고 있습니다.

WP Rocket 플러그인 워드프레스 최적화 

하지만 이러한 홈페이지 최적화에는 웹기반과 모바일 AMP 최적화가 동시에 필요하며 최적화와 함께 보안도 중요한 부분입니다.

이에 대해서 PWA라고 하여 Progressive Web App은 구글 2016에서 미래의 웹기술로 소개되었습니다.

Progressive Web App 홈페이지를 처음 방문한 사람들에게 유용하며 느린 인터넷 속도에서도 빠르게 홈페이지가 로드되며 모바일 속도도 개선된다고 합니다.

Progressive Web App 플러그인 적용효과

실제 Progressive Web App for WP & AMP 플러그인을 설치 후 기존 모바일에서  3.5초만에 96% 로딩되던것이 PWA 플러그인을 설치 후에는 0.8초만에 로딩되는 결과를 볼 수 있습니다.

워드프레스 최적화 PWA Progressive Web App

PWA 플러그인은 프로그래시브 웹 앱의  WP & AMP에 가져다줌으로써 ^{사용자 경험을 한 차원 높여주며 APP와 유사한 경험}을 잠재 고객에게 제공하여 웹 사이트를 홈 화면으로 가져오고 오프라인 지원이있는 APP와 같이 즉시 작동 할 수 있다고 하며 실제 적용 후 반나절 이후에 ^{방문자 유입도 증가}하는것을 느껴 인터넷검색최적화 SEO 도움이 된다고 느꼈습니다.

설정을 원한다면 왼쪽의 PWA fOR WP & AMP 추천하며 설정값이 필요없는 플러그인은 오른쪽 PWA 추천합니다.

PWA for WP & AMP Plugin 기능

• AMP 지원 : AMP에 대한 전체 PWA 호환성. AMPforWP & AMP for WordPress for Automattic에서 작동합니다.
• 새로운 기능 : 다중 사이트 지원
• UTM 추적
• Progressive Web App 사용 자산에 대한 캐싱 전략
• 캐시 만료 옵션이 추가
• 서비스 작업자 : 백그라운드에 자동으로 설치되는 서비스 작업자를 개발하고 요청을 줄이기 위해 외부 개체 캐싱과 같은 필요한 작업을 수행
• 홈 화면의 APP 배너 : 방문자 및 홈 화면 목록에 직접 추가되는 웹 사이트의 APP 버전을 얻으려면 방문자에게 자동으로 알립니다. 이 아이콘도 사용자 정의.
• Web App Manifest :이 기능을 구현하려면 Manifest 파일이 필요하며이 기능을 자동으로 만들어 옵션과 연결
• 오프라인 지원 : 사용자의 오프라인 상태에서도  사이트가 빠르게 빠르게로드됩니다. 사용자가 온라인 상태가되면 콘텐츠를 다시 업데이트합니다. 또한 분석을 계산하여 사용자가 다시 온라인 상태가되면 업데이트
• 전체 화면 및 초기 화면 : 모바일에서 Progressive Web App 버전을 열면 브라우저 도구 모음 없이도 전체 화면으로로드되어 프로그래시브 웹 앱 버전의 느낌과 같은 기본 응용 프로그램을 제공합니다. 완전히 사용자 정의 할 수있는 환영 스플래시 화면
• 지속적인 개발 : 프로그래시브 웹 앱 솔루션을 지속적으로 개발하고 업데이트를 지속적으로 발표하여 양식이 완벽하게 작동 할 수 있도록 노력할 것입니다.
• 대시 보드 시스템 상태 Progressive Web App의 설치 상태를 이해하는 데 도움이되는 상태
• 응용 프로그램 아이콘 업로드 중
• 시작 화면의 배경색 옵션

해당 플러그인은 설정값을 통해 웹페이지 최적화가 진행되지만 설정 후에는 자신의 홈페이지 기능에 문제가 발생하지 않는지 확인해야 합니다.

그 외에 설정없이 프로그래시브 웹 앱 플러그인을 사용하고 싶다면 현재 아바다테마에서 제공하는 무료플러그인 Progressive Web App 추천합니다.

로 그레시브 웹 앱은 웹을 통해 도달 할 수있는 사용자 경험이며 다음과 같습니다.

PWA 플러그인 장점

• 신뢰할 수 있음 – 불확실한 네트워크 환경에서도 즉시로드하여 절대로 다운 사 투어를 표시하지 않음

사용자의 홈 화면에서 시작하면 서비스 담당자가 네트워크 상태에 관계없이 Progressive Web App을 즉시로드 할 수 있습니다.

JavaScript로 작성된 서비스 작업자는 클라이언트 측 프록시와 비슷하며 캐시를 제어하고 리소스 요청에 응답하는 방법을 제공합니다. 주요 리소스를 사전 캐싱하면 네트워크에 대한 의존도를 없애고 사용자에게 즉각적이고 안정적인 환경을 보장 할 수 있습니다.

• 빠른 – 매끄러운 부드러운 애니메이션과 janky 스크롤이없는 사용자 상호 작용에 신속하게 응답함

로드하는 데 3 초 이상 걸리면 사용자의 53 %가 사이트를 포기합니다. 한 번로드되면 사용자는 빠르게 스크롤 할 필요가 없으며 응답 속도가 느린 인터페이스가 필요합니다.

• 매력적인 사용자 환경 – 몰입 형 사용자 환경에서 기기의 자연스러운 앱처럼 느낄수 있음

프로 그레시브 웹 앱은 설치 가 가능하며 앱 스토어가 없이도 사용자는 홈 화면 을 사용해 몰입 할 수 있으며 전체 화면 웹 응용 프로그램 매니페스트 파일의 도움으로 경험하고 웹과 사용자가 다시 참여할 수 푸시 알림을 제공합니다.

Web App Manifest를 사용하면 앱의 모양과 시작 방법을 제어 할 수 있습니다. 홈 스크린 아이콘, 앱 시작시로드 할 페이지, 화면 방향 및 브라우저 크롬 표시 여부를 지정할 수 있습니다.

그 외에도 프로그래시브 웹 앱은 Service Workers, Web App Manifest,HTTPS 기능을 의존합니다.