애드온을 써서 그동은 css만 모아주었는데 오늘 신규사이트에 적용을 해보다가 css를 모을때 동작하는 애드온 동작시간이 오히려 추가되는 것을 확인했습니다.

 

브라우저의 기술들이 변화된 건지 예전과는 다른 양상이네요.

 

그래서 기존에 운영중인 사이트(좀무거운...)에 애드온을 해제 하고 비교해보니 역시 쿼리등의 변수를 제외한 html / css 출력을 가지고 비교해보니 20ms ? 정도 이상은 차이가 나는 듯 합니다.

 

물론 원래부터 3-4초 걸려 페이지가 열리는 곳이라면 20ms 차이는 미미할 수 있으나 1초이내에 페이지가 열리는 곳이라면 이정도 차이라면 의미있는 숫자이고 실제 체감으로도 느낄 수 있습니다.

 

다만 css,js갯수가 31개 초과시 문제가 되었던 브라우저가 아마도  ~IE9 까지 인 것으로 알고 있습니다만 실제 점유율도 낮을 것 같고 저희 사이트에서 이 문제로 CK에디터 js 로드가 안되는지 확인은 못해봤지만...  이제 그냥 css를 합치지 않아도 되는거 아닌가 하는 생각을 하게 되었네요...

 

 

웹지기

profile
10년을 다루다 보니 이제 간단한 것도 만들고 커뮤니티 운영에 관한 다양한 노하우가 있습니다. 어려운 점이나 가지신 생각을 함께 소통해 보아요.
https://rxtip.kr/ 라이믹스 꿀팁
  • profile
    css,js 갯수 제한도 있었나 보군요. 지금 처음 알았습니다.
    ie9 이하 이긴 하지만 놀랍습니다.
    css와 js 한줄로 합치면 사용자가 체감상 느끼는지 궁금합니다.
    사실 저는 못 느껴서요.
  • profile profile
    CK에디터로 전환될때 이슈가 있었습니다. 그때 당시 IE9도 많이 사용하던 시절이라 갑자기 CK에디터 전환 후 글 쓰기 에디터가 활성화 되지 않는 민원이 들어와 확인하니 이런 이유였습니다. 그때 애드온으로 만들어주신게 CSS,JS를 합쳐주는 애드온 이었습니다. 그래서 31개 초과에 걸리지 않아 모든 js가 다 로딩이 되어 CK에디터 문제를 회피 할 수 있었죠.

    체감은 무얼 말씀 하시는건지 정확히 이해하긴 어렵지만 현재 브라우저 환경에서 합친 것과 안 합친 것의 동작시간 차이는 본문에 언급한 것이 개발자도구에서 확인 가능하고 빨라진 것도 체감이 됩니다.(애드온을 사용하지 않을 경우)
  • profile profile
    지금 그리고 한줄로 합친다는 표현을 봐서 잘못 이해하신 듯합니다.
    페이지에서 로딩되는 많은 css 파일을 다 분석해서 1개의 파일로 합쳐서 로딩되게 해주는 애드온이에요.
  • profile profile
    여러개의 css를 합치는것이군요.
    이해했습니다.
    밤을샜더니 헤롱헤롱합니다^^;
    ckeditor 이슈를 들어보니 여러가지로 고민 되네요.
  • profile profile
    저희처럼 커스텀을 너무 많이 해서 너무 많은 것을 불러오는 구성이 아니라면 일반적으로는 괜찮습니다. 그 당시 글 작성화면에서도 상단에 위젯들이 배치되고 굉장히 복잡한 구성이어서 저희는 31개가 초과되었습니다. 일반적으로는 가능성이 조금 낮지만 그래도 많은 사이트에서 IE9 환경에서 문제될 소지도 있지요.
  • profile profile
    이 문제를 회피하려면 개발자분께서 고려하실때는 가급적 CSS파일을 통합해서 구성하시는게 좋을 수 있습니다. 하지만 이게 속도에 긍정적인지는 모르겠습니다. 최신 기술은 css파일 갯수가 많아도 문제가 되지 않는다는 이야기를 얼핏 들어서요.
  • profile

    국내 사용자를 대상으로 국내 서버로 운영하고, 클라우드플레어를 사용하지 않고, 서버 설정으로 css, js 파일들에 캐시를 적용하고 계시다면 ZipperUpper 애드온의 효과는 미미합니다.

     

    라이믹스의 css, js 합침 기능과 달리, ZipperUpper 애드온은 XE 코어를 수정하지 않고 구현해야 한다는 제한 때문에 구조가 상당히 비효율적입니다. 처음부터 성능보다는 구버전 IE 대응을 목적으로 만들어진 애드온이라, 구버전 IE에 대응할 필요가 없다면 사용을 권하지 않습니다.

     

    IE10 이하(미만?) 버전에만 적용시키는 옵션도 있으니 활용해 보세요. 이 옵션을 사용하면 애드온 실행 초기 단계에서 곧바로 return해버리기 때문에 다른 브라우저를 사용하는 방문자에게는 거의 영향을 주지 않습니다. 단, 일부 사용자에게만 적용될 경우 슈퍼 캐시와의 호환성이 문제가 될 수도 있겠네요.

  • profile profile
    어... 이 옵션이 있다구요 ?? 당장 키겠습니다 ㅋㅋㅋ
  • profile profile
    깃허브에 적용되어 있나요? 배포버전에는 말씀 하신 옵션은 없네요.
  • profile profile
    아, 네, 깃허브에만 있군요.
  • profile profile

    깃허브에서 다운받아 설치했습니다. 감사합니다.

  • ?
    몇년 전부터 포털사이트들이 작은 이미지들을 통으로 만들어서 쪼개 불러오는것과 같은 이치인데요.
    과거에는 인터넷 속도가 느려서 큰 이미지를 불러올때 불러오는 로딩시간이 작은 이미지를 쪼개서 불러오는것 보다 체감속도가 느리다라는 이유때문이었지만 최근엔 속도가 빨라지면서 서버에 파일들을 요청하는 시간보다 한번에 통 이미지를 불러오는게 더 빨른 체감속도를 주기 때문에 그리 한다고 하더군요.

    css와 js 파일도 같은 이치인데요..
    관리상 파일을 쪼개지만 굳이 관리상 문제점이 없다면 서버에 파일을 적게 요청하는 횟수가 미미하지만 더 빠를겁니다.
  • ? profile
    네. 이미 하나로 합쳐진 것을 불러오는 것은 긍정적일텐데요. 지금 애드온으로 처리하는건 애드온이 여러개를 불러와서 다시 하나로 만들어 주는 거라 이러한 현상이 나타나서요. 제가 시간을 내서 분산된 것을 하나로 만드는 것도 방법이긴 하겠지만.. 여러 자료들이 수시로 패치가 되다보니 이것도 현실적으로 좀 거리가 있을 수도 있습니다.