JS, CSS 압축을 통한 웹 페이지 로딩 속도 향상


인터넷 속도가 원악 빨라져서 모바일 앱과는 다르게 홈페이지 로딩에 대한 별도의 처리를 하지 않는다. 하지만 반응형웹인경우 홈페이지를  PC버전뿐만 아니라 모바일에서 사용하게 되면 로딩속도가 무척 느려지게 된다. 

성능을 조금 이라도 올리기위해서는 모바일용에 맞도록 가볍게 제작을 하면 되지만, 반응형웹이라 따로 제작이 불가능 하다. 그래서 JS와 CSS를 압축해서 조금이라도 사용하는 파일의 크기를 줄이면된다. 


http://www.refresh-sf.com/yui/

개인적으로 위의사이트를 추천한다.


이 사이트를 이용하면 CSS, JS를 압축을 해준다. 압축은 필요없는 공백과 띄어쓰기된 부분을 한줄로 바꿈으로 파일의 용량을 줄이게 된다. 보통 약 20%정도의 파일 사이즈를 줄일 수있다.


코드편집시 한줄로 바껴있기 때문에 보기가 무척 힘드니 원본은 수정시에 보고 실제 사용할 파일을 압축해서 올리면 된다. 

 





Dragend를 이용한 좌우제스쳐 웹페이지 구현


요즘 네이버나 다음 포털 모바일 웹 사이트를 보면 좌우 제스쳐시 페이지가 바뀌는 것을 볼 수 있다. 안드로이드에서는 ViewPager이라는 기능으로 웹에서도 이런 기능을 오픈소스를 이용한다면 쉽게 구현이 가능하다. 이런 기능을 오픈소스가 몇가지가 있지만 개인적으로 Dragend를 추천한다.

간소화된 JS를 이용하여 쉽게 좌우제스쳐 페이지를 쉽게 구현가능하다.

아래는 Dragend를 이용하여 간단한 체스쳐가 되는 페이지를 만들어 보았다. 좌우로 제스쳐를 하면 페이지가 바뀌는것을 볼 수있다.

코드

  <div id="demo">
    <ul>
      <li class="first dragend-page">
      <li class="dragend-page">
      <li class="middle dragend-page">
      <li class="dragend-page">
      <li class="last dragend-page">
    </ul>
  </div>

  <script type="text/javascript" src="../../dragend.js"></script>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var container = document.getElementById("demo");
      new Dragend(container, {
        afterInitialize: function() {
          container.style.visibility = "visible";
        }
      });
    }, false)
  </script>

위의 단 몇줄 만으로 페이지를 구성하는 하다. ul의 li에 오픈소스로 구현된 dragend-page를 class로 설정 후 script에서 div의 id를 읽어와서 상황에 따라 페이지 상태를 처리 하는 방식이다.

데스크탑 환경에서는 이미지를 보여줄때, 또는 자동 롤링기능으로 활용 할 수 있으며, 모바일 웹페이지는 포털사이트처럼 제한된 페이지에서 사용가능한 좋은 UX이기에 활용성또한 대단히 높다.