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

IT,게임,문학 이야기/WEB, 인터넷 2014.02.14 06:16 Posted by BoniK



구글 크롬 (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 하단 부분에 넣으니 문제가 해결되었습니다.

<link href="./style.css" rel="stylesheet" media="screen" type="text/css"/>

- 티스토리에서는 head 부분에 있는 위의 코드가 메인 style.css를 불러오는 명령인데 이 것도 헤드 상단 부분으로 올려서 순서를 바꿨습니다. 구글 웹로그 분석 스크립트는 html 페이지의 아래쪽으로 옮겼습니다.

- XE의 경우는 레이아웃에 따라 좀 다를텐데 head부분에 너무 많은 스크립트가 몰려있는 걸 피해주면 해결이 될 거라 생각합니다.




아마 head부분에 문제가 될만한 script를 넣지 않는 곳에서는 전혀 문제가 되지 않을 겁니다. 문제가 발생했을 때 저의 경우는 이렇게 해결이 되었지만 다른 사람의 경우는 또 다른 것이 원인일 수도 있다고 생각합니다.

저처럼 원인도 모르고 해결책도 몰라서 크롬만 괜히 욕하던 사람이 있을까봐 블로그에 올려봤습니다. 그치만 크롬은 여전히 싫긴 합니다. 파이어폭스 짱! ㅋ




신고
힘내서 포스팅할 수 있도록 위의 공감버튼(♡)을 눌러주시면 감사하겠습니다.
블로그 내용을 무단으로 퍼가시면 안됩니다. (링크만 허용)
네이버 이웃추가하면 <그늘진 낙원>의 새 글 소식을 네이버에서 확인할 수 있습니다.

Posted by BoniK

댓글을 달아 주세요

  1. DDR 2014.03.22 23:26 신고  댓글주소  수정/삭제  댓글쓰기

    음악하시는 분이 어떻게 이렇게 다방면에 대해서 알 수 가 있는지
    진짜 이해 불가하다

  2. 아리랑목동 2014.05.26 05:37 신고  댓글주소  수정/삭제  댓글쓰기

    최근 크롬이 메모리 소비가 극악에 치달아서,파폭이 주목받고있습니다. 파폭이 메모리사용율은 정말 착합니다. 많이 좋아졌어요..제가 웹페이지로딩테스트한결과,메이저 브라우져중에, IE10을 제외하고 제일 빨랐습니다. IE는 보안에 취약해서 사용을자제하는것이 좋아요. 크롬말고 새로운 오페라도 괜찮긴합니다만,,이넘도 메모리 소비가 많습니다. 어차피 같은 blink계열이라...

  3. 나그네 2015.06.12 17:26 신고  댓글주소  수정/삭제  댓글쓰기

    지나가다 우연히 들렀네요. 해당 현상은 흔히 FOUC (Flash Of Unstyled Content)라고 불리는데, 발생원인이 워낙 다양합니다.

    가장 빈번한 것은 자바스크립트나 jQuery등을 이용하여 문서의 DOM 구조를 변경시키거나 스타일을 변경시킬때 발생합니다. 브라우저가 문서 해석을 완료하고 CSS 스타일을 입히다가 문서의 DOM이 완료되었음을 감지한 자바스크립트가 그제서야 활동을 시작하기에 변경된 점에 대해서 서로 충돌이 일어나게 되죠. 덮어씌우는 과정이라고 생각하면 됩니다.

    주인장님은 크롬에서만 일어난 현상이지만, 반대의 경우도 빈번합니다. 누가 어떻게 만들었는지에 따라...

음악레슨,화성학레슨,미디레슨

© 2010-2016 bonik.me All rights reserved. 저작물 무단도용 및 복제 금지 | 레슨문의 | 블로그 광고문의
블로그 광고 안내

그늘진 낙원에 광고를 넣고 싶은 분들을 위한 안내입니다.

사이트 컨텐츠 카테고리 : 음악,엔터테인먼트/실용음악/작곡 | 음악/컴퓨터음악 | 취미/악기연주
광고불가 업종 : 성인, 유흥업소, 다단계, P2P 및 웹하드, 도박, 불법 의약품
광고 문의 : mail@bonik.me (업체명, 업종, 희망 광고내용 등을 알려주세요.)


블로그 방문자 분석

방문자 분석


배너 광고

추천 업종 : 음악앨범, 공연, 오디션, 대학 실용음악과, 실용음악학원, 악기판매, 녹음실, 음악 관련 세미나 등
광고 위치, 형태 : 사이트 우측 정사각형 배너 (기본 200X200px 이미지 / 모니터 크기에 따라 자동 변경)
광고 기간 및 비용 (배너 제작 비용은 포함되어 있지 않습니다.)

기간

비용

추가혜택

 1개월

20,000 원

 

 3개월

50,000 원

 

 6개월

100,000 원

 블로그 포스팅 1회 포함

 12개월

200,000 원

 블로그 포스팅 1회 포함



포스팅 광고

추천 업종 : 문화(음악, 영화, 문학, 게임, 만화 등), IT (기기, 서비스, 어플), 교육, 관광, 건강 등
광고 형태 : 블로그에 광고 내용을 포스팅
광고 비용 : 포스팅 1회 당 5만원 (이미지 제작 및 출장 비용은 포함되어 있지 않습니다.)
포스팅 내용 : 포스팅 내용은 의뢰자의 의견을 반영하여 직접 작성


▲ Back to top