웹브라우저 15% 빨라지는 팁!(크롬, 엣지, 파이어폭스)

안녕하세요. 옥군입니다.

 

오늘은 크롬, 엣지등 웹브라우저에서 15% 성능향상을 할 수 있는 팁을 알려드릴려고 합니다.

 

크롬 개발팀에서 공식 발표한 내용이라고 하니 어느정도 신뢰가 있는 팁이네요 ^^

 

우선 크롬 기준으로 설명하겠습니다.

 

브라우저 주소표시줄에 아래 텍스트를 넣고 엔터를 치면

chrome://flags

 

아래 창이 새로 뜨게 됩니다.

 

 

여기서 아래 항목을 직접 찾거나 상단 검색창에 항목을 넣고 검색하면 해당 항목을 설정할 수 있습니다.

 

skia graphite <- 이 항목 찾으면 됩니다.

 

 

해당 항목을 찾으면 기본은 Default로 되어있는데 이거를 Enabled로 변경하면 됩니다.

 

 

Skia Graphite 항목을 Enabled로 변경하면 Chrome을 다시 시작하라는 안내메세지가 하단에 뜨게 되는데 다시시작을 하고나면 적용이 됩니다.

 

 

재시작 후 주소표시줄에 chrome://gpu를 입력하고 엔터를 치면 설정결과를 확인할 수 있습니다.

 

 

엣지브라우저와 파이어폭스 브라우저는 주소표시줄에 아래와 같이 입력하면 해당 설정페이지로 갈 수 있습니다.

 

[브라우저별 Skia Graphite 설정 진입]

ㆍChrome : chrome://flags

ㆍEdge : edge://flags

ㆍFirefox : about:config

 

 

그러면 Skia Graphite는 뭘까요?
제미나이에게 물어보니 다음과 같이 대답을 해 주네요

 

Skia Graphite는

구글의 오픈 소스 2D 그래픽 라이브러리인 Skia가 현대적인 그래픽 API(Vulkan, Metal, Direct3D 12)에 최적화하여 새롭게 개발한 차세대 GPU 렌더링 백엔드입니다. 
기존의 렌더링 엔진인 Ganesh가 OpenGL 시대를 위해 설계되어 최신 하드웨어의 성능을 온전히 활용하기 어려웠던 점을 보완하기 위해 설계되었습니다. 

 

핵심 특징 및 장점

 

ㆍ현대적 API 최적화

OpenGL 위주였던 기존 방식에서 벗어나 Vulkan, Metal, Direct3D 12와 같은 최신 그래픽 API를 직접적으로 활용하여 하드웨어 성능을 극대화합니다.
ㆍ멀티스레딩 지원: 설계 단계부터 멀티스레딩을 고려하여 렌더링 명령 생성을 여러 스레드에서 동시에 처리할 수 있어 전반적인 성능이 향상되었습니다.
ㆍ레이턴시 감소 및 부드러운 그래픽: 크롬 브라우저 기준으로 프레임 드랍이 줄어들고 스크롤이 더 매끄러워졌으며, Apple Silicon Mac 등 특정 환경에서 최대 15%의 성능 향상을 보여줍니다.
ㆍ셰이더 컴파일 지연 해결: 런타임에 셰이더를 생성하는 대신, 미리 정의된 파이프라인을 사용하여 앱 실행 시 발생하는 셰이더 컴파일로 인한 끊김 현상(Jank)을 획기적으로 줄였습니다. 

 

주요 도입 사례
ㆍGoogle Chrome: 최신 버전의 크롬 및 엣지 브라우저에서 성능 향상을 위해 순차적으로 적용되고 있습니다.
ㆍFlutter & React Native: 크로스 플랫폼 프레임워크에서도 고성능 UI 렌더링을 위해 Graphite 백엔드 도입을 준비하거나 실험적으로 지원하고 있습니다. 

결론적으로 Skia Graphite는 구형 기술인 OpenGL 중심의 렌더링에서 벗어나, 최신 GPU의 기능을 100% 활용하여 더 빠르고 부드러운 화면을 제공하기 위한 기술적 전환점이라 할 수 있습니다. 

 

해당 항목을 적용한 유저들은 실제 체감될 정도로 브라우저가 빨라졌다고 하는 반응이 많이 올라오고 있습니다.

 

일부 구형GPU나 드라이버 환경에서는 시각적 결함(Visual Glitches)이 발생할 수 있다고 하니 문제발생 시 해당 항목을 다시 Default로 변경해 주시기 바랍니다.

 

그럼 모두들 행복한 하루 되세요 ^^/