web page performance

1. Avoid CSS expressions

   - CSS expression을 사용하지 않는다.

2. make fewer HTTP requests

   - HTTP request를 최소화 하라. 

      - image background 처리

         - 같은 크기의 이미지는 하나의 이미지로 합쳐서 background 속성을 이용하여 잘라서 표현

      - css와 js는 각각 하나의 파일로 합칠 것

3. Use a Content Delivery Network

   - css파일이나 js 파일 및 이미지 파일들이 CDN에 존재하지 않는다는 것이다.

   - CDN

      - http://cusee.net/2460488

      - 내 서버에 있는 컨텐츠에 접근하기 위해 사용자들이 request를 보낼 경우, 

         내 서버까지 도달하기 전 각 ISP나 IX 부분에서 병목 현상으로 느려질 수 있기 때문에, 

         각 중단 ISP 지점에 내 컨텐츠들을 copy하여 사용자들이 더 빨리 접속하여 컨텐츠 정보를 

         획득하도록 도와주는 형태

4. Add Expires headers

(1) web.xml

<filter>
	<description>Set HTTP headers for a mapping.</description>
	<filter-name>HeaderFilter</filter-name>
	<filter-class>ktis.esm.common.HeaderFilter</filter-class>
	<init-param>
		<description>Add an Expires Header</description>
		<param-name>header</param-name>
		<param-value>Expires: Wed, 19 May 2013 00:00:00 GMT</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>HeaderFilter</filter-name>
	<url-pattern>*.css</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>
<filter-mapping>
	<filter-name>HeaderFilter</filter-name>
	<url-pattern>*.png</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>
<filter-mapping>
	<filter-name>HeaderFilter</filter-name>
	<url-pattern>*.js</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>
<filter-mapping>
	<filter-name>HeaderFilter</filter-name>
	<url-pattern>*.gif</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>
<filter-mapping>
	<filter-name>HeaderFilter</filter-name>
	<url-pattern>*.ico</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>

        

(2) java

import java.io.IOException;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Set;
import java.util.Map.Entry;
import java.util.logging.Logger;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class HeaderFilter implements Filter{
	private static final Logger logger = Logger.getLogger(HeaderFilter.class.toString());
	private FilterConfig filterConfig;
	private Map<String, String> headersMap;

	public void init(FilterConfig filterConfig) throws ServletException {
		this.filterConfig = filterConfig;
		String headerParam = filterConfig.getInitParameter("header");

		if (headerParam == null) {
			return;
        }

        headersMap = new LinkedHashMap<String, String>();

		if (headerParam.contains("|")) {
			String[] headers = headerParam.split("\\|");

			for (String header : headers) {
				parseHeader(header);
			}
		} 
		else {
			parseHeader(headerParam);
		}

		Set<Entry<String, String>> headers = headersMap.entrySet();

		for (Entry<String, String> item : headers) {
			logger.info(item.getKey() + ":" + item.getValue());
		}
	}

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		if (headersMap != null) {
			// Add the header to the response
			Set<Entry<String, String>> headers = headersMap.entrySet();

			for (Entry<String, String> header : headers) {
				((HttpServletResponse) response).setHeader(header.getKey(), header.getValue());
			}
		}

		// Continue
		chain.doFilter(request, response);
	}

	public void destroy() {
		this.filterConfig = null;
		this.headersMap = null;
	}

    private void parseHeader(String header) {
		String headerName = header.substring(0, header.indexOf(":"));

		if (!headersMap.containsKey(headerName)) {
			headersMap.put(headerName, header.substring(header.indexOf(":") + 1));
		}
	}
}

     

 

5. minify javascript and css

   - 소스를 최소화 하라는 말이다. (min 버전을 만들라는 소리)

   - YUI Compressor 등을 이용하여 코드를 최소화한다.