-
파이어폭스 부가기능 소개.(크롬 호환, 성능 위주.)IT 2017. 11. 27. 01:54
요즘 포스팅을 잘 안했는데, 파이어폭스의 부가기능을 소개해볼까 합니다.
여기에 나오는 부가기능은 크롬계열에서도 호환이 되는 걸로 골랐습니다.
또한 실제로 성능 향상이나 UX에 이점이 있는 부가 기능들을 선정했습니다.
1. AMP Browser Extension.
1.1 개요.
구글에서 제공하는 AMP(Accelerated Mobile Pages)라는 기술을 적용한 사이트들은 자동으로 amp가 적용된 모습으로 보여주는 부가기능이다.
AMP가 빠른 이유로는
- 구글에서 제공하는 간결한 HTML, Javascirpt를 사용.
- 이미지 최적화, 비동기 로딩등 대역폭 최적화.
- 구글이 제공하는 캐싱.
을 들 수 있다.
이외 AMP가 빠른 속도를 제공하는 이유는 Naver D2의 'AMP는 어떻게 웹 페이지의 성능을 높일 수 있나' 를 참고하자.
NAVER D2
null
1.2 성능.
그렇다면 로딩 속도 차이는 얼마나 날까?
파이어폭스의 개발자 도구를 킨 다음, 캐시를 사용하지 않고 로딩해보았습니다.
개발자 도구 아래쪽을 보면 빨간 색으로 로드 시간을 표시해주고 있습니다.
일반 - 약 3.17초.
AMP - 약 1.23초.
겨우 AMP 하나만 사용했을 뿐인데, 최소 2배 이상의 실제 성능이 개선되었습니다!!
그렇다면 항상 AMP가 빠를까요?
그건 아니었습니다.
제가 사용해본 거의 모든 사이트는 AMP가 빨랐지만, 제 텀블러는 오히려 느리더군요..
일반 - 5.78초
AMP - 6.24초
여러번 체크를 해보았음에도 불구하고, AMP의 성능이 더 떨어졌습니다.
하지만 이 경우는 예외적인 상황이고, 거의 대부분의 사이트에서는 AMP의 속도가 훨씬 빠르므로 안심하고 쓰셔도 됩니다.
그럼, 빠르다는 AMP를 직접 체험해보자.
일반
언론사 모바일웹에 가속기를...구글 'AMP'
"모바일 웹을 통해 소비하는 뉴스 콘텐츠 페이지는 로딩에 더디고 느릴 뿐 아니라 어수선하다. 독자들은 모바일 웹으로 뉴스를 보는 걸 좋아하지 않는다." 인터넷의 발달은 우리에게서 참을성을 앗아가고 있다. 찰나가 아니면 억겁의 시간처럼 느껴진다. 텍스트 위주인 뉴스를 보기 위해 몇 초를 기다려야 할 때, 많은 사람은 기다리기보다 차라리 뉴스 소비를 포기한다.
AMP
언론사 모바일웹에 가속기를...구글 'AMP'
"모바일 웹을 통해 소비하는 뉴스 콘텐츠 페이지는 로딩에 더디고 느릴 뿐 아니라 어수선하다. 독자들은 모바일 웹으로 뉴스를 보는 걸 좋아하지 않는다." 인터넷의 발달은 우리에게서 참을성을 앗아가고 있다. 찰나가 아니면 억겁의 시간처럼 느껴진다. 텍스트 위주인 뉴스를 보기 위해 몇 초를 기다려야 할 때, 많은 사람은 기다리기보다 차라리 뉴스 소비를 포기한다.
1.3 설정.
환경설정에서
- Load AMP or MIP pages automatically
- Use Google AMP Cache(faster)
- Add Save-Data client hint request header
를 체크하도록 하자.
첫번째 옵션은 AMP나 MIP가 자동으로 로딩되도록 하는 것으로 이 부가기능을 설치하는 목적이다.
여기서 MIP는 바이두에서 구글의 AMP와 비슷하게 만든 것으로 역시 빠른 웹페이지가 로딩되도록 한다.
두번째 옵션은 그냥 AMP 페이지만 로딩하는 것이 아니라, 구글에 저장된 캐시를 이용하자는 것인데 서버에서 AMP로 된 페이지를 직접 불러오는 것이 아닌 구글에서 가져오는 것이기 때문에(구글은 좋은 데이터 센터를 가지고 있으며 빠른 네트워킹 환경을 제공한다.) 빨라진다.
세번째 것은 리퀘스트 헤더에 Save-Data 힌트를 붙여서 보내는 것인데,
서버에게 최적화가 된 사진들을 보여주란 요구를 하는 것이기 때문에 낮은 데이터 소모, 빠른 로딩을 원할 때 붙여도 좋은 옵션이다.
(단, 이미지 품질이 떨어질 수 있다는 것은 주의!!)
참고1 - Delivering Fast and Light Applications with Save-Data.
참고2 - Serving Images Faster with the Save-Data Client Hin
참고3 - New Save-Data HTTP header tells websites to reduce their data usage.
1.4 다운로드.
Firefox
AMP Browser Extension - Add-ons for Firefox
The AMP Browser Extension helps when your connection is slow or unstable. It accelerates web browsing by: - loading Accelerated Mobile Pages (AMP) or Mobile Instant Pages (MIP) whenever possible, - switching between lightweight AMP and full-blown web pages on demand, - highlighting the AMP links in Google Search - using Google AMP Cache for faster loading, - sending Save-Data header, - blocking ads and tracking scripts.
Chrome
AMP Browser Extension
Accelerate web browsing by automatically loading AMP or MIP versions of web pages, saving data and blocking ads.
2. User-Agent Switcher.
2.1 개요.
User-Agent Switcher는 웹브라우저가 보내는 User-Agent 메세지를 바꾸는 것이다.
그러니까 나는 리눅스-파이어폭스를 사용하고 있는데 Windows-Opera라고 할 수도 있고, IOS-Safari라고 정보를 보낼 수도 있게 해준다는 것이다.
그런데 왜 뜬금없이 성능과 관계하여 User-Agent가 나오냐면 Mobile Web 환경 때문이다.
모바일 환경은 PC보다 리소스가 제한적이고 화면이 작다.
그래서 모바일 웹을 사용하면 일반적으로 웹 페이지를 가볍게 만들고, 주 컨텐츠외 화면에 표시되는 부가적인 정보들 양도 줄어들어 빠르게 로딩하는 것이 가능하다.
2.2 성능.
2.2.1 모바일 테스트.
AMP 실험 때와 같이 성능 차이를 살펴보자.
일반 - 약 6.33초
모바일 - 약 3.06초
모바일 웹도 AMP처럼 거의 2배가량 차이가 난다.
다음도 상황은 비슷했다.
일반 - 약 2.18초
모바일 - 약 0.978초
AMP도 2배가량 차이가 났는데 그럼, AMP를 굳이 쓸 필요가 없는 것일까?
그래서 한번 테스트 해보았다.
2.2.2 AMP와의 비교.
일반, 모바일, AMP를 모두다 지원하는 사이트를 찾아봤더니, 연합뉴스와 레딧이 있었다.
일반 - 약 3.66초.
모바일 - 약 1.90초.
AMP - 약 0.985초.
다음은 레딧의 성능 체크 결과입니다.
일반 - 약 3.38초.
모바일 - 약 1.95초.
AMP -약 1.14초.
AMP를 사용하면 확실한 성능 향상 효과가 있었습니다.
저는 탭을 4~50개 정도 여는 하드한 브라우징 환경이기에 PC용 웹 브라우저로는 파이어폭스(AMP Browser Extension)를 사용하고 PC에서 모바일 창을 보는 용도로 심플한 디자인인 크롬(AMP Browser Extension + User-Agent Switcher)을 사용중입니다.
모바일 에이전트를 사용하면 보통 다니는 사이트들의 레이아웃이 너무 많이 바뀌어 일반적인 PC에서 사용하는 용도로 적합하지 않아 Default로 설정하고 있지는 않습니다.
즉, AMP Browser Extension은 꼭 사용하면 좋지만, 모바일 에이전트는 선택의 문제.
+.
물론 모바일에서도 PC 버전보다 느린 것이 있다.
바로 이 글을 적고있는 티스토리..
일반 - 약 0.984초
모바일 - 약 6.41초
물론 이 티스토리도 예외적인 상황이다.
2.3 설정.
애드온 아이콘을 눌러서 원하는 것으로 변경을 하면 된다. 이때 체크 버튼은 원래 설정으로 변경을 한다.
2.4 다운로드.
Firefox
User-Agent Switcher - Add-ons for Firefox
Note: this addon is a revived version of User-Agent Switcher and is written with web-extensions API. Design and performance of this addon has been improved comparing to the old version (which is written with addon-sdk). User-Agent Switcher (revived) can quickly and easily changes your browser's user-agent.
Chrome
User-Agent Switcher
Quickly and easily switch between popular user-agent strings.
3. uBlock Origin.
3.1 개요.
uBlock Origin은 컨텐츠 차단기이다.
uBlock's network filtering engine[from uBlock]
uBlock Origin은 위와 같은 방식으로 정해진 필터링 규칙에 따라 작동을 하여 광고 및 각종 요소들을 제거한다.
비슷한 것으로 Adblock Plus가 존재하지만 uBlock Origin이 CPU와 메모리등 리소스를 적게 사용하고 성능이 뛰어납니다.(아래 링크 참고.)
gorhill/uBlock
uBlock Origin - An efficient blocker for Chromium and Firefox. Fast and lean.
3.2 성능.
광고를 제거하여 표시되는데 필요한 리소스를 절약하고, 트래킹과 멜웨어 도메인등도 차단하여 개인정보 보호에도 도움을 준다.
표시되는 것을 제거하기에 가독성 효과도 있다.
일반 - 약 6.17초.
요소 차단 - 약 2.74초.
3.3 설정
여기는 각종 필터를 소개합니다.
uBlock Origin의 대시보드-보조필터(3rd-party filters) 맨 밑에서 추가하도록 .
기존 목록에 있는 것을 확인하여 원하는 것이 있다면 추가하시고.
한국형 필터.
한국 웹사이트에 최적화된 필터입니다.https://raw.githubusercontent.com/NativeHyun/HyunGuard/master/General/general.txt https://github.com/SlowMemory/List-KR/raw/master/filter.txt https://github.com/SlowMemory/List-KR/raw/master/unbreak.txt https://www.fanboy.co.nz/fanboy-korean.txt소셜.
소셜 사이트 차단 필터입니다.
저같이 페이스북 안하면 필요없어요~~ 그냥 기존 목록에 있던 소셜 필터만 구독합시다.https://www.fanboy.co.nz/fanboy-antifacebook.txt업뎃이 없는 필터는 삭제했습니다.
3.4 다운로드.
Firefox
uBlock Origin - Add-ons for Firefox
See release notes. Firefox WebExtensions: Issues with uBO/webext? If so, then read carefully before filing any issue. New A new setting has been added in the Privacy section of the Settings pane in the dashboard: "Block CSP reports". Default is un-checked. Rationale for this new setting: issue #3150.
Chrome
uBlock Origin
이 부가 기능은 효율적인 차단기입니다. CPU와 메모리에 주는 부담이 적습니다.
4. uMatrix.
4.1 개요.
더욱 강력한 제어를 위한 기능이 필요하다면, uMatrix를 사용해보는 것이 어떨까?
uMatrix는 HttpSwitchBoard를 포크한 것으로 No Scipt Suite의 대안으로 쓸만한 것으로 사이트마다 쿠키, CSS, 이미지, 미디어, 스크립트등을 제어하는 기능을 사용자에게 제공해준다.
uMatrix 동작[from Http Switch Board]
위의 그림처럼 광고차단 필터가 작동하기 전에 작동하고, 도메인 단위를 원천적으로 차단할 수 있습니다.
제어 범위와 기능은 uMatrix가 더 강력하지만, 세세한 필터링 규칙은 uBlock Origin이 더 좋다는 것을 생각해보면 상호보완적인 관계.
예를 들자면, uBlock Origin에서는 쿠키만, 스크립트만 골라서 차단하기가 어렵고, uMatrix는 리다이렉팅 되어 차단된 호스트로 바뀌는 것을 막는 것이 어렵다고 합니다.(참고1, 참고2.)
4.2 성능.
제 블로그를 이용하여 테스트 해보았습니다.
일반 - 약 5.35초.
uMatrix - 약 3.60초.
역시 성능 향상이 존재합니다.
4.3 설정.
uMatrix의 기본 설정은 상당히 빡빡한데, 페이지가 잘 보이지 않는다면 대부분 스크립트의 문제이므로 1st-party의 스크립트 정도는 활성화 한채 쓰는 것이 정신 건강에 이롭습니다.
그리고.
를 봐보아도 좋습니다.
4.4 다운로드.
Firefox
uMatrix - Add-ons for Firefox
Point & click to forbid/allow any class of requests made by your browser. Use it to block scripts, iframes, ads, facebook, etc.
Chrome
uMatrix
Point & click to forbid/allow any class of requests made by your browser. Use it to block scripts, iframes, ads, facebook, etc.
5. Poper Blocker.
5.1 개요.
화면을 뜨는 것을 막아버리겠다는 야심찬 이름의 Poper Blocker는 팝업+오버레이를 막아주는 확장 기능이다.
5.2 성능.
Poper Bloer의 웰컴 페이지를 보면,
Welcome - Poper Blocker
Thanks for installing Poper Blocker! You are now browsing popup-free Not all websites have popups. See Poper Blocker in Action Test Popup Test Overlay × See how it feels to remove an overlay (in case we ever miss one) Right-click on this overlay and select "Remove Overlay" from the menu to remove.
일반.
팝업 제거.
일반.
오버레이 제거.
를 할 수 있다.
사이트의 팝업과 오버레이를 막아주기에 로딩속도에 미치는 성능에는 영향을 많이 미치진 않겠지만, 사용자가 실감하는 성능은 높아지게 되고 각종 리소스의 절약 효과가 생긴다.
5.3 다운로드.
Firefox
Poper Blocker: Popup blocker for FireFox - Add-ons for Firefox
페이지를 클릭하는 장소에 상관 없이 팝업창과 숨은 창을 차단함으로써 Firefox에서의 웹 경험 개선. Poper Blocker는 모든 사이트의 스팸 팝업을 지능적으로 차단합니다. ★ 스트리밍 사이트, 토렌트 사이트, 성인 사이트 등 가장 효과적인 팝업 차단 기능.
Chrome
Pop up blocker for Chrome™ - Poper Blocker
1 extension to block annoying popups, popunders & overlays in an easy & effective way. Browse without interference on all sites.
6. Local CDN.
6.1 개요.
Local CDN은 유명한 CDN 라이브러리를 Local에서 사용할 수 있도록 한 것이다.
차단 원리[from Decentraleyes]
예를 들면
ajax.googleapis.com
ajax.microsoft.com
에서
angular.js나 jQuery를 다운받는데, Local CDN에 미리 내장된 JS들을 불러와 빠르게 로딩하고, CDN이 사용자를 추적하는 일을 방지하여 성능과 개인정보 보호 둘다 잡을 수 있습니다.
Decentraleyes를 포크한 것이지만,
Local CDN이 Decentraleyes보다 업데이트가 잦아 이것을 채택하였습니다.
6.2 성능.
Local CDN의 활성화 상태와 비활성화 상태로 나누어서 실험을 하였다.
2017/11/28 - [IT] - CDN Test Page
에 테스트 페이지를 만들어 놓았다.
Local CDN Off - 약 4.05초.
Local CDN On - 약 2.79초.
common.js의 밑에 있던 각종 js 라이브러리들의 요청들이 싹 사라졌음을 알 수 있습니다.
여기에서는 테스트 차원에서 24개나 되는 JS 라이브러리들을 다운로드 받은 것이고, 실제로는 1~3개정도만 쓰일 것이기 때문에 0.1~2초 정도의 성능 개선이 있을 거라 예측됩니다.
다만, CDN을 통하지 않고 JS 라이브러리들을 사용하기 때문에 구글이나 마이크로소프트 같은 업체가 사용자를 추적하는 일이 없어지기 때문에 프라이버시 보호 측면에서 더 의미가 있습니다.
6.3 다운로드.
Firefox
Local CDN (WebExtension) - Add-ons for Firefox
Local CDN extension is a fork for Decentraleyes project by @Synzvato. It brings local redirection for well-known libraries. After the extension is installed, when a known library is requested by a webpage, the extension redirects this request to a local equivalent and updates the badge number.
Chrome
Local CDN
Local emulation of Content Delivery Networks
+.
예전에 Load from Cache라고 캐시를 강력하게 사용하는 부가기능이 있었는데 파이어폭스 57이 되면서 작동이 안되어 정말 아쉽다.
DownThemAll이라는 다운로드 관리자도 그렇고.
여기는 나중에 추가된 내용.
7. YouTube Classic.
7.1 개요.
YouTube Classic 개발자 트윗에 따르면
YouTube page load is 5x slower in Firefox and Edge than in Chrome because YouTube's Polymer redesign relies on the deprecated Shadow DOM v0 API only implemented in Chrome. You can restore YouTube's faster pre-Polymer design with this Firefox extension:
라고한다.
Deprecated(사라질 기능)인 API를 사용하여 구글에서 파이어폭스와 엣지에 고의적으로 성능저하를 일으켰다는 것.
--귀찮아서 성능 확인은 건너 뜀.
7.2 다운로드.
파이어폭스
YouTube Classic - Get this Extension for 🦊 Firefox (ko)
Download YouTube Classic for Firefox. Restore Classic YouTube!
크롬
xxzefgh/youtube-classic-extension
Restore Classic YouTube! Contribute to xxzefgh/youtube-classic-extension development by creating an account on GitHub.
crx 파일을 다운받아 설치하면 된다.
8. h264ify.
8.1 개요.
유튜브에서 사용하는 VP8/VP9 코덱은 하드웨어 가속이 안되는 경우가 많기 때문에 h.264 코덱을 사용하자는 아이디어다.
8.2 다운로드.
파이어폭스.
h264ify - Get this Extension for 🦊 Firefox (ko)
Download h264ify for Firefox. Makes YouTube stream H.264 videos instead of VP8/VP9 videos
크롬.
h264ify
Makes YouTube stream H.264 videos instead of VP8/VP9 videos
9. Universal Bypass.
9.1 개요.
Adf.ly, Adfoc.us, Shorte.st처럼 사용자를 기다리게 하는 사이트, sub2unlock.com처럼 뭔가를 하도록 시키는 사이트, Bit.ly, Goo.gl, T.co처럼 사용자를 추적하는 사이트를 우회합니다.
아래 영상을 보면 감이 올겁니다.
9.2 다운로드.
파이어폭스.
Universal Bypass - Get this Extension for 🦊 Firefox (en-US)
Download Universal Bypass for Firefox. Don't waste your time with compliance. Universal Bypass automatically skips annoying link shorteners.
크롬.
Universal Bypass
Don't waste your time with compliance. Universal Bypass automatically skips annoying link shorteners.
-끝-
댓글
