웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed

웹 2013. 11. 12. 21:17 Posted by 초절정고수
백만년만에 네이버 블로그 포스팅
웹페이지를 최적화하고 로딩 속도를 조금이라도 빠르게 하기 위한 방법
일반 적인 경우는 특정한 요소 하나로 인해 로딩이 지연되기보다는 전반적으로 모든 요소들이 다 적용이 되므로 전체적으로 확인하는 것이 좋다. 

 

사이트가 느리면 사용자들은 짜증을 내며 금새 다른 사이트로 이동하거나 브라우저를 닫아 버린다.
사이트를 좀더 빠르게 띄워 사용자들의 만족도를 높이는 것이 사이트 존재의 목적이나 마찬가지이다.
어떻게 하면 웹페이지 로딩 속도를 좀 더 빠르게 할 수 있는지는 여러가지 방법이 있다.

 

 

Keep-Alive 사용

- 정의된 시간내에 access가 이루어진다면 계속 연결된 상태를 유지할 수 있어 연결을 끊고 다시 연결하는 것보다 시간을 줄일 수 있습니다. 
 
압축 사용 
- gzip 또는 deflate로 리소스를 압축하면 네트워크를 통해 전송되는 용량을 줄일 수 있습니다.
 
브라우저 캐싱 활용 
- 정적 리소스에 대한 HTTP 헤더에 만료일 또는 최대 수명을 설정하면 브라우저가 이전에 다운로드한 리소스를 네트워크를 통해서가 아닌 로컬 디스크로부터 로드합니다.
 
이미지 최적화
- 제대로 이미지의 형식을 지정하고 압축하면 데이터 용량을 크게 절약할 수 있습니다.
 
CSS 스프라이트로 이미지 통합
- CSS 스프라이트를 사용하여 이미지를 가능한 한 적은 파일로 통합하면 다른 리소스를 다운로드할 때 왕복 회수 및 지연이 줄고 요청 오버헤드가 줄어서 웹 페이지가 다운로드하는 전체 용량이 줄어듭니다.
 
자바스크립트 파싱 지연
- 페이지를 렌더링하는 데 필요한 자바스크립트의 양을 최소화하고 불필요한 자바스크립트의 파싱을 반드시 실행해야 할 때까지 연기하면 페이지의 초기 로드 시간을 줄일 수 있습니다.
 
자바스크립트 축소
자바스크립트 코드를 압축하면 데이터 용량을 크게 절약할 수 있고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.
 
HTML 축소
본문 삽입 자바스크립트를 포함한 HTML 코드 및 그 안에 포함된 CSS를 압축하면 데이터 용량을 크게 절약하고 다운로드, 파싱 및 실행 시간을 줄일 수 있습니다.
 
본문에 작은 CSS 삽입
- 작은 스타일시트를 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.
 
리다이렉션 최소화
- 한 URL에서 다른 URL로의 HTTP 리다이렉션을 최소화하면 추가적인 RTT 및 사용자 대기 시간이 대폭 줄어듭니다.
 
스타일 및 스크립트 순서 최적화
- 외부 스타일시트와 외부 및 본문 삽입 스크립트의 순서를 제대로 정렬하면 다운로드 병렬화를 개선하고 브라우저 렌더링 시간을 줄일 수 있습니다.
 
CSS 축소
- CSS 코드를 압축하면 데이터 용량이 크게 절약되고 다운로드, 파싱 및 실행 시간이 줄어듭니다.
 
요청 크기 최소화
- 쿠키 및 요청 헤더를 최대한 작게 유지하면 HTTP 요청을 단일 패킷에 맞춰 넣을 수 있습니다.
 
이미지 크기 지정
- 모든 이미지의 너비와 높이를 지정하면 불필요한 리플로우와 리페인트의 필요성을 제거하여 신속하게 렌더링할 수 있습니다.
 
문자 집합 지정
- 초반부에 HTML 문서에 대한 문자 집합을 지정하면 브라우저가 스크립트를 즉시 실행하도록 할 수 있습니다.
 
Vary : Accept-Encoding 헤더 지정
프록시 서버가 압축한 버전과 압축하지 않은 버전의 두 가지 리소스를 캐시하도록 지시합니다. 그러면 Content-Encoding 헤더의 존재를 제대로 감지하지 못하는 공용 프록시 관련 문제가 생기지 않게 됩니다.
 
CSS @import 사용 안함
외부 스타일시트에서 'CSS @import'를 사용하면 웹 페이지를 로드하는 중에 추가적인 지연이 발생할 수 있습니다.
 
문서 헤드에 CSS 삽입
본문 삽입 스타일 블록 및 <link> 요소를 문서 본문에서 문서 헤드로 이동하면 렌더링 성능이 개선됩니다.
 
본문에 작은 JavaScript 삽입
- 작은 자바스크립트 파일을 기본 HTML 페이지에 삽입하면 다른 리소스를 다운로드할 때 RTT 및 지연이 대폭 줄어듭니다.
 
비동기 리소스 선호
- 리소스를 비동기적으로 가져오면 리소스로 인해 페이지 로드가 차단되지 않도록 할 수 있습니다.
 
일관된 URL 에서 리소스 제공
- 고유 URL에서 리소스를 제공하고 중복된 다운로드 용량 및 추가 RTT를 제거하는 것이 중요합니다.
 
잘못된 요청 사용 안함
- '깨진 링크' 즉 404/410 유형 오류로 귀결되는 요청 내용을 삭제하면 불필요한 요청을 줄일 수 있습니다.
 
정적 리소스에서 검색어 문자열 삭제
- 정적 리소스에 대해 HTTP 헤더에 공개 캐싱이 가능하도록 설정하면 브라우저가 원래의 원격 서버로부터가 아니라 가까운 프록시 서버로부터 리소스를 다운로드할 수 있습니다.
 
조정된 이미지 제공
- 이미지의 크기를 적절하게 조정하면 데이터 용량을 크게 절약할 수 있습니다.
 
캐시 유효성 검사기 지정
- 캐시 유효성 검사기(Last-Modified 또는 ETag 헤더)를 지정함으로써 캐시된 리소스의 유효성을 효율적으로 확인할 수 있습니다.

 

 


위의 내용들을 클릭 한번으로 알려주는 훌륭한 툴이 있어 소개한다.
바로 구글에서 제공하는 PageSpeed라는 브라우저 플러그인이다.
크롬과 파이어폭스의 플러그인을 제공한다.

플러그인 다운로드 - https://developers.google.com/speed/pagespeed/insights_extensions

[출처] 웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed|작성자 파로스


'웹' 카테고리의 다른 글

자바스크립트 튜닝을 통한 사용자 체감속도 높이기  (0) 2013.11.14
페이지 빠르게 로딩하는 방법  (0) 2013.11.12
CSS에 대한 자세한 설명이 있는 곳  (0) 2013.11.12
Generate an Excel File from an Ext JS 4 Grid or Store!  (0) 2013.11.05
웹사이트 분석평가 사이트 순위산정 기준과 차이점 (랭키닷컴, 코리안클릭 등)  (0) 2013.10.29

CSS에 대한 자세한 설명이 있는 곳

웹 2013. 11. 12. 14:01 Posted by 초절정고수


'생활 코딩'이란 곳인데 정말 자세히 설명해 주십니다. ^^

http://opentutorials.org/



선택자(selector)란?

CSS의 효과가 적용될 태그를 지정

Id 선택자

  • id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
  • 우선순위가 가장 높음
  • css 선택자에서는 #을 사용해서 id임을 표시
  • 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함


Class 선택자

  • class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
  • class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
  • css선택자에서는 '.'을 사용해서 class임을 표시

type 선택자

  • 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
  • css선택자에서는 태그의 이름을 사용함


하위 선택자

  • 특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용
  • 부모가 먼저 나오고 자식이 나중에 나옴
  • 공백을 통해서 부모와 자식을 구분


하나의 CSS선언을 여러개의 선택자에 적용하기

  • 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
  • 선택자와 선택자를 ',(콤마)'로 구분


자식선택자 -child selector

  • 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)
  • ie6는 지원되지 않음

span 태그

텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다. 


색

텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다. 

Hex16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명red, blue, green등 칼러코드 참고


텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.

left왼쪽 정렬
right오른쪽 정렬
center가운데 정렬
justify양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴


text-decoration

overline윗줄예제
line-through취소선예제
underline밑줄예제

line-height

행간격을 지정한다. 참고

letter-spacing

문자와 문자사이의 간격을 지정한다. 참고

vertical-align

텍스트의 수직 정렬을 지정한다. 참고

white-space

줄바꿈되는 방식을 지정한다. 참고



Font Family

일반적인 방법으로는 웹페이지에는 글꼴을 포함할 수 없다. 그렇기 때문에 웹페이지에 지정된 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에도 해당 글꼴이 포함되어 있어야 한다. 그래서 CSS에서는 font family라는 개념이 있는데, 글꼴의 우선순위를 정해서 여러개 지정하면 그 중에서 사용할 수 있는 폰트를 반영하게 된다. 예를들어 아래의 구문은 사용자 컴퓨터에 Times New Roman 글꼴이 있다면 적용하고 없다면 Times를 적용한다. 

p{font-family:"Times New Roman", Times, serif;}


고정폭, 가변폭?

일반적으로 글꼴을 디자인 할 때 문자의 폭을 문자의 모양에 따라서 다른 넓이를 갖게 된다. 이를테면 숫자 1과 문자 m의 폭을 같게 디자인하면 어색하게 느껴질 수 있기 때문이다. 이러한 방식을 가변폭이라고 한다. 반대로 데이터 분석이나 코딩과 같은 일을 하는데는 미려함 보다는 정확함을 더 중시하기 때문에 글자의 폭을 같게 디자인하는데 이러한 방식을 고정폭이라고 한다. 일반적으로 고정폭 글꼴은 굴림체처럼 폰트의 이름 뒤에 '체'를 붙인다. 아래는 NHN에서 제공하는 글꼴인 '나눔고딕'과 '나눔고딕코딩'의 글자간의 넓이를 비교한 그림이다. (참고)


Sans-serif VS serif

serif(세리프)란 문자의 디자인에 포함된 장식적인 요소로 아래 그림의 붉은색에 해당된다. 대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다. 

sans-serif(산세리프)란 세리프의 장식적인 요소가 없는 디자인으로 굴림체, 돋음체, Arial, Verdana가 대표적이다.

font-family에 serif나 sans-serif를 지정하면 운영체제 내부적인 기준에 따라서 적당한 글꼴이 표시된다.


글꼴의 크기를 지정할 때는 font-size 효과를 사용한다. font-size 효과에서 자주 사용되는 단위는 px와 em이 있고,  W3C에서는 em의 사용을 권장하고 있다. em은 상대적인 크기인데, 폰트의 대문자 M의 폭을 16px로 계산하기 때문에 1em은 기본적으로 16px과 같다고 생각하면 된다. 하지만 em은 현재 엘리먼트가 상속하고 있는 폰트 크기를 기준으로 상대적으로 결정된다. (참고:em과 px를 변환해주는 서비스)



링크의 상태

링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.

방문하지 않은 링크a:link{} 
방문했던 링크a:visited{} 
마우스를 오버한 링크a:hover{}a:link과 a:visited 뒤에 와야 함
마우스를 누른 상태의 링크a:active{}

a:hover 뒤에 와야 함



엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다. 

배경색

background-color:색상값

Hex16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명red, blue, green등 칼러코드 참고



background-image: url('이미지의 URL');

배경 이미지의 반복

background-repeat: 반복방식

repeat수직, 수평 모두 반복함
repeat-x수평만 반복함
repeat-y수직만 반복함
no-repeat반복하지 않음

참고 : w3school.com

배경 이미지의 위치

background-position: 위치값

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		배경 위치를 지정
x% y%x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos이미지의 절대적인 위치를 지정한다.

참고 : w3school.com

단축속성

body {background:#00ffff url('image.png') no-repeat right top;}


'웹' 카테고리의 다른 글

페이지 빠르게 로딩하는 방법  (0) 2013.11.12
웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed  (0) 2013.11.12
Generate an Excel File from an Ext JS 4 Grid or Store!  (0) 2013.11.05
웹사이트 분석평가 사이트 순위산정 기준과 차이점 (랭키닷컴, 코리안클릭 등)  (0) 2013.10.29
html 코드 상에서 브라우저 모드 원하는 버전으로 고정  (0) 2013.10.25

Generate an Excel File from an Ext JS 4 Grid or Store!

웹 2013. 11. 5. 13:44 Posted by 초절정고수



http://druckit.wordpress.com/2013/10/26/generate-an-excel-file-from-an-ext-js-4-grid/



https://fiddle.sencha.com/#fiddle/17j


'웹' 카테고리의 다른 글

페이지 빠르게 로딩하는 방법  (0) 2013.11.12
웹페이지 최적화, 브라우저 다이어트, 페이지 로딩 속도 빠르게 하는 방법 PageSpeed  (0) 2013.11.12
CSS에 대한 자세한 설명이 있는 곳  (0) 2013.11.12
웹사이트 분석평가 사이트 순위산정 기준과 차이점 (랭키닷컴, 코리안클릭 등)  (0) 2013.10.29
html 코드 상에서 브라우저 모드 원하는 버전으로 고정  (0) 2013.10.25
 

티스토리툴바