https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/

 

뭔가 빨라진다고 하는데 XE에서 어떤 것들을 불러올때 어떤 형식을 추가해줘야 하는건지 궁금합니다.

 

  • profile
    불러오는 모든 js와 css 에 해당하는
    Link: <경로> rel=preload;

    이렇게 작성해야 하는건가요? 직접 하기는 어려워 보이고 애드온 같은게 나와야 될거 같기도 하고 그렇게 짐작이 되는데 맞게 추측하는건지 모르겠네요.
  • profile

    로딩 속도 향상에 대한 웹지기님의 집착(?)은 끝이 없으셔라~ ㅋㅋㅋ

     

    웹페이지에서 참조하는 CSS, JS, 이미지, 웹폰트 같은 것들을 Link: 헤더에 나열해 주면 클플에서 자동으로 푸쉬해 주는 모양입니다. 실제로 얼마나 빨라지는지는 푸쉬할 파일들이 얼마나 브라우저에 캐싱되어 있는지에 달려 있죠. 이미 캐싱이 잘 되고 있다면 자주 이용하는 분들이 체감하는 속도 향상은 미미할 수도 있습니다. 반면, 처음 방문하는 분은 캐시가 비어 있을 테니 푸쉬를 사용해서 좀더 빨리 로딩되도록 해드릴 수 있겠죠.

     

    문제는 푸쉬를 통해 얻는 이익이 더 큰지, 반대로 푸쉬를 처리해줄 애드온 등이 일으키는 부하(=로딩속도 저하)가 더 큰지가 되겠지요. CSS, JS 목록은 쉽게 처리할 수 있지만, 본문의 이미지까지 모두 추출해서 푸쉬해 주려면 꽤 많은 처리가 필요하거든요. 애드온으로 만든다면 아마 꽤 지능적으로 동작해야 할 겁니다. 처음 방문하는 분에게는 가능한 많은 파일을 푸쉬해 주고, 재방문시에는 푸쉬 분량을 줄이는 식으로...

  • profile profile
    오늘 발표된 새로운 기능이라서요. 굳이 찾아본거는 아니고 메일로 와서 살펴봤어요.
    근데 제가 읽은 내용에는 html 영역은 push가 아닌 것으로 봤습니다.

    js/css 만 되는거 같아요. 설명에는 많이 빨라지는 듯하게 되어 있는거 같기도 하구요.
  • profile profile
    https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/

    요기 그림보니 이미지까지 포함이군요.
    (본문링크랑 같은거엿.... ㅋ)
  • profile profile

    대략 이런 식으로 구현하면 될 것 같습니다. XE에서도 애드온으로 구현할 수는 있겠지만, ZipperUpper!와 충돌할 가능성이 높아 보여요. 나중에 ZipperUpper!를 업데이트하게 되면 서버 푸쉬까지 한꺼번에 처리할 수 있을지 살펴봐야겠네요.

  • profile profile
    네. 저도 그생각이 들더라구요. ZipperUpper 애드온을 꺼야 할거 같았는데 ZipperUpper 애드온에서 함께 처리할 경우 모바일에서 사용이 어려운 문제등이 발생할지도 모르겠습니다. 저희 모바일이 반응형이라 그런지 ZipperUpper 애드온 사용이 어렵거든요.
  • profile profile
    게다가 ZipperUpper는 구버전 IE에서 CSS 파일 수가 너무 많으면 문제가 생기는 것을 우회하기 위해 만든 애드온이라, 정작 푸쉬를 지원하는 최신 브라우저에서는 꼭 필요하지 않죠;;;

    그 애드온 이름이 이상하게 된 이유가 맨 마지막에 실행되어야 하기 때문인데, 더 마지막에 실행되도록 zzz_push 이런 식으로 애드온을 만든다면 충돌하지 않게 할 수 있을지도?
  • profile profile
    https://github.com/rhymix/rhymix/pull/485/commits/942235b6bc6f3b3258732a17e41c99584ffb77e3

    요거 그대로 XE에도 적용이 가능한건가요? 오늘 한번 해보고 싶네요~
  • profile profile

    $finalize && config('view.server_push') && 이건 라이믹스 전용이니 제거하시고요... 나머지는 XE에도 그대로 적용할 수 있을 것 같습니다. 코어를 수정한다면 ZipperUpper와 충돌하지도 않을 거고요.

  • profile profile
    답변 감사합니다. 그런데
    if ($resource['file'][0] === '/' && $resource['file'][1] !== '/')+ {

    이라인 때문에 에러가 발생하네요.
  • profile profile
    + 문자는 원본에 없는데요...
  • profile profile
    아.. 제가 추가표시 + 를 완전히 제거 못한거군요... 살펴보겠습니다.
  • profile profile

    소스보기로 했을때 추가되는 링크형식이 보이지 않는데요.
    그럼 동작이 안되고 있는거지요? 

    크롬 최신버전에서 확인해 봤습니다.

  • profile profile
    빨라진거 같긴한데요.
    제가 확인하는 방법을 잘 모르겠네요. 파이어폭스로 개발자도구의 네트워크로 보면 요청이 11개 밖에 안잡히네요. 이게 푸시로 받아서 요청이 줄은거 같긴 한데 제가 이걸 잘 볼줄 모르니 확신이 없네요.

    일반 크롬에서는 요청이 160여개로 잡히네요~~
  • profile profile

    소스 변화는 없이 Link: 헤더가 추가되는데, 만약 클플에서 그 헤더를 자동으로 인식해서 푸쉬로 바꿔주고 있다면 헤더조차 보이지 않을지도 모릅니다. (저도 일단 매뉴얼대로 만들어 보긴 했는데, 제대로 작동하는지 확인하기가 힘드네요 ㅠ)

  • profile profile

    제대로 작동하는거 같아요. 굉장히 쾨적해진 느낌이구요. 빨라요... 그리고 아래 댓글에 말씀드린대로 파이어폭스에서는 요청수가 거의 없습니다. 요청수에 포함되는게 저희 사이트것이 아닌 구글광고하고 그런쪽만 잡히구요. XE타운도 심플한 구성이지만 요청이 40개가 넘는거로 봐서는 저희가 10개면 ㅋㅋ 동작하는거 같습니다!

     

    css/js /img 는 요청 자체가 없네요~ 페이지 html 딱 1건 나머지 9~10건은 전부 구글광고쪽 거네요.

  • profile profile
    파폭에서 새로고침하면 여전히 140여개가 잡혀요. 그냥 캐싱이 잘 되어서 빠른 건가...
  • profile profile
    아 그래요? 근데 이상한건 페이지 html 딱 1개만 요청이 있고 나머지는 전혀 없습니다. 다른 사이트는 안그런거로 봐서는 동작하는 듯 해서 그런거 같아요.
  • profile profile
    어.. 그러네요. 지금 순정파일로 덮어씌워 봣는데. 저희가 클라우드플레어라 그건지 요청 자체가 없네요.. 파폭으로 확인이 안되는군요.
  • profile profile
    오늘 방문해 보니 뭔가 더 추가되는 것들이 있는데요. 제가 더 해줘야 하는게 있을까요?
  • profile profile

    혹시 클플 SSL을 Flexible로 쓰고 계시거나 웹서버가 자체적으로 HTTP/2를 지원하지 않나요? 참고하신 코드에서 서버 푸쉬 사용 여부를 결정할 때 HTTP 버전이 2로 시작하는지 확인하도록 되어 있는데, 클플에서 웹서버에 접속할 때 SSL과 HTTP/2를 사용하지 않는다면 HTTP 1.1로 처리될 것 같네요. 만약 이런 경우라면 && strncmp($_SERVER['SERVER_PROTOCOL'], 'HTTP/2', 6) === 0 이 조건은 삭제해야 할 수도 있습니다.

  • profile profile
    SERVER_PROTOCOL 조건을 삭제하면 제대로 서버 푸쉬가 되는 것을 확인했습니다. 파이어폭스에서 서버 푸쉬로 받아온 CSS, JS 파일들은 요청, 응답 소요시간이 아예 안 나오고 왼쪽의 상태도 회색 동그라미로 표시되네요.
  • profile profile
    SSl은 full 로 사용중이구요. HTTP2는 서버에 적용을 완료 했었지는 기억과 검색으로 더듬어 보아야 겠습니다.
  • profile profile
    제가 spdy 적용으로 마무리 하고 그 이후 클라우드클레어 적용하고 나서 본서버에는 따로 하지 않은 것으로 기억되는데요. 어느 만큼 코드를 제거해야하는지 알수 있을까요?
  • profile profile
    if ($finalize && config('view.server_push') && strncmp($_SERVER['SERVER_PROTOCOL'], 'HTTP/2', 6) === 0)
    {



    }

    요렇게 세트로 제거 하면되는건가요?
  • profile profile
    네, 바깥쪽을 둘러싸고 있는 조건 전체를 없애버리시면 됩니다.
  • profile profile

    감사합니다. 안되는 이유가 다 있었던 거 군요. 덕분에 좋은 기능 쓰게 되었습니다. 저희는 저 조건중에 필요한게 하나도 없으니 다 날려버리겠습니다.

  • profile profile
    모바일에서 문제가 생기는데요. 이거 모바일에서 작동하는 조건을 추가해줘야 할까요?
  • profile profile

    사이트에 들어가 보니 서버 푸쉬가 작동하긴 하는데, ZipperUpper 때문에 CSS, JS 각각 하나씩밖에 안 되어서 큰 효과를 얻지는 못하고 있는 것 같습니다. 오히려 ZipperUpper가 꺼져 있고 접속 속도가 느린 모바일에서 효과가 있을 것 같은데... 문제가 생긴다면 어쩔 수 없지요.

    ZipperUpper가 모바일에서 종종 문제를 일으키는 이유 중 하나가 "의도치 않은 로딩 순서 변경"입니다. 파일을 하나로 합쳐서 너무 빨리 전송하니까, 하나씩 로딩할 때와 순서가 달라져 버리는 거죠. 서버 푸쉬도 로딩 순서에 영향을 줄 수 있다는 점에서는 마찬가지가 아닐까 싶네요 ㅠㅠ

  • profile profile

    네. 일단 모바일에서 js 순서로 문제가 생기는거 같아요.

    우선 if ($_COOKIE['mobile'] != 'true')

    이런 코드로 감싸 놓았는데 저거 말고 다르게 해야 할까요?

    js 쪽만 위 코드로 감싸 놓으니 모바일에서도 괜찮아졌습니다.

  • profile profile
    혹시 개별적으로 push를 no-push를 해줄수는 없을까요? 이걸 수동으로 해준 경우는 이것을 우선하게끔....
  • profile profile
    일단 JS는 여러가지 복잡한 상황에서 일부 기능에 문제가 발생할 수 있어 PC에서도 CSS만 사용하는게 좋을 것 같네요.