구글 크롬 웹페이지 화이트 플래시 문제 드디어 해결!!

Web, 인터넷 2014년 2월 14일

구글 크롬 (Google Chrome)에서만 생기는 화이트 플래쉬 (White Flash) 현상티스토리 블로그와 두 개의 웹사이트를 운영하면서 구글 크롬 때문에 상당히 골머리를 앓고 있었습니다. 저는 개인적으로 크롬을 별로 좋아하지 않고 오래전부터 파이어폭스를 메인 브라우저로 사용하고 있어서 웹페이지 테스트 할 때만 크롬을 사용하는 편입니다.

IE, 파이어폭스, 오페라, 사파리 전부 아무 문제가 없는데 유독 크롬 브라우저만 페이지 이동시에 화면이 하얗게 깜빡거렸습니다.

새로고침을 하거나 도메인 내에서 클릭으로 다른 페이지로 이동할 때 화면이 하얗게 깜빡거리고 background 이미지와 색상을 처음부터 다 다시 불러오는 것 같았습니다.

이게 국내에서는 제가 XE 사이트에 질문한 것 말고는 별로 이슈화 된 적이 없는데 해외쪽에서는 꽤 오랫동안 이슈가 나오고 있습니다. 구글에서 'Chorome White Flash' 로 검색을 하면 상당히 많은 내용이 나옵니다.

https://code.google.com 에 비슷한 이슈가 등록된 것도 여러개고 해결법이라고 돌아다니는 내용들도 상당히 천차만별입니다.

임시 해결법으로 <Html>부분에 스타일을 지정하라는 팁도 있고, CSS 인용부호가 문제라는 말도 있고, 샌드박스 때문에 그렇다는 말도 있어서 다 해봤는데 제 경우에는 해결책이 아니었습니다. 크롬의 하드웨어 가속 때문이라고 하는 글도 있어서 하드웨어 가속을 꺼봤는데 그것도 아니었습니다.

제가 여러 사람의 티스토리와 XE페이지를 돌아다녀 본 결과 화이트 플래쉬 현상의 원인은 java script나 CSS로딩이 늦어져서 그런거라는 결론을 내렸습니다. 물론 웹사이트마다 원인이 다를 수 있으니 저의 경우가 완벽한 해결책은 아닐 것입니다. 그리고 저는 웹 전문가가 아니라 그냥 유추만 해볼 뿐입니다. 그런데 이 문제의 경우는 웹 전문가 몇 분에게 물어봤지만 속시원한 해결책이 나오지는 않았었습니다.

원인은 무엇인가?

보통 java script 중에서 head 부분에 넣으라고 하는 것들이 많습니다. 제 예상에는 크롬 브라우저가 head부분을 다 읽기 전에 body를 읽어들이는게 아닌가하는 생각이 듭니다.

원래 java script 가 페이지 로딩에 영향을 미치다보니 defer속성을 사용해서 로딩속도를 늦출 수 있는데, 이게 웹표준인지 아닌지는 모르겠지만 IE에서만 동작합니다. (주워 듣기로는 웹표준이 맞는데 IE에서만 동작한다고 들은 것 같기도 합니다.)

이를 보완하기 위해 크롬에서는 defer속성을 사용하지 않아도 body를 동시에 읽음으로써 로딩 속도를 빠르게 하려고 한 것 같습니다. 그런데 아직 CSS는 안불러져 있는 상태라서 background 속성이 제대로 전달되지 않은 상태인 것 같습니다.

항간에 돌아다니는 팁으로는 java script 중에서 head부분에 넣지 않아도 되는 것들을 </body> 바로 앞에 넣으라는 팁이 있습니다. 이렇게 하면 java script로딩이 늦춰져서 페이지 로딩이 빨라진다는 겁니다.

이 팁을 보고 head 부분에 속도를 지연시킬만한 script가 있는지 찾아서 하나씩 지워가면서 테스트 해 봤습니다.

해결책

제가 script를 하나씩 지워가면서 확인을 해 본 결과 구글 아날리스틱스의 스크립트가 문제라는 것을 찾아냈습니다. (물론 저의 경우입니다.) 구글 아날리스틱스를 제거해 보니 블로그와 웹사이트 두 곳 모두 화이트 플래쉬 현상이 없어졌습니다. 구글 아날리스틱스의 추적코드를 넣어서 웹사이트 방문자나 방문형태 등을 분석하게 되는데 이 코드가 로딩속도에 영향을 줬습니다. 이 코드를 head부분 말고 html 하단 부분에 넣으니 문제가 해결되었습니다.