Embed Size (px)
Citation preview
-2-
Front-End
Yahoo 웹 사이트 성능 최적화 35 개 법칙 ( Yahoo 의 성능개선팀 )
1. Minimize HTTP Requests ( HTTP 요청을 최소화 하라 )2. Use a Content Delivery Network ( CDN 을 이용하라 )3. Add an Expires or a Cache-Control Header ( 응답헤더에 Expires 혹은 Cache-Control 을
추가하라 )4. Gzip Components ( gzip 으로 압축하라 )5. Put Stylesheets at the Top ( 스타일시트는 문서의 위쪽에 넣어라 )6. Put Scripts at the Bottom ( 스크립트는 문서의 아래쪽에 넣어라 )7. Avoid CSS Expressions ( CSS Expression 을 피하라 )8. Make JavaScript and CSS External ( 자바스크립트와 CSS 는 외부 파일로 만들어라 )9. Reduce DNS Lookups ( DNS 검색을 줄여라 )10.Minify JavaScript an CSS ( 자바스크립트와 CSS 의 크기를 작게 하라 )11.Avoid Redirects ( 리다이렉션을 피하라 )12.Remove Duplicate Scripts ( 중복 스크립트를 제거하라 )13.Configure Etags (Etags 를 설정하라 )14.Make Ajax Cacheable ( AJAX 도 캐싱할 수 있도록 만들어라 )15.Flush the Buffer Early ( 버퍼를 빨리 비워라 )16.Use GET for AJAX Requests ( AJAX 요청시 GET 를 사용하라 )17.Post-load Components ( 사후 구성 컴포넌트 )18.Preload Components ( 사전 구성 컴포넌트 )
-3-
Front-End
Yahoo 웹 사이트 성능 최적화 35 개 법칙 ( Yahoo 의 성능개선팀 )
19. Reduce the Number of DOM Elements ( DOM 요소의 갯수를 줄여라 )20. Split Components Across Domains ( 컴포넌트를 도메인별로 분리하라 )21. Minimize the Number of iframes (Iframe 의 갯수를 최소화 하라 )22. No 404s (404 오류가 발생하지 않게 하라 )23. Reduce Cookie Size ( 쿠키의 크기를 줄여라 )24. Use Cookie-free Domains for Components ( 컴포넌트는 쿠키가 없는 도메인을 사용라라 )25. Minimize DOM Access ( DOM 접근을 최소화 하라 )26. Develop Smart Event Handlers ( 이벤트 핸들러를 잘 개발하라 )27. Choose <link> over @import ( @import 보다는 <link> 태그를 써라 )28. Avoid Filters ( CSS 필터를 피하라 )29. Optimize Images ( 이미지를 최적화하라 )30. Optimize CSS Sprites ( CSS 스프라이트를 최적화 하라 )31. Don’t Scale Images in HTML ( HTML 로 지정한 크기보다 큰 이미지를 사용하지 마라 )32. Make favicon.ico Small and Cacheable ( favicon.ico 파일은 작게 만들고 캐싱되도록 만들어라 )33. Keep Components under 25k ( 컴포넌트 크기를 25KB 이하로 유지하라 )35. Pack Components into a Multipart Documents ( 컴포넌트를 멀티파트 문서로 묶어라 )35 Avoid Empty Image src ( 이미지의 src 속성 값을 빈 채로 만들지 마라 )
-4-
Front-End
Maven YUI Compressor Maven 적용
<plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <version>1.4.0</version> <executions> <execution> <id>compress_js_css</id> <phase>process-resources</phase> <goals> <goal>compress</goal> </goals> </execution> </executions> <configuration><excludes><exclude>**/*.min.js</exclude> <exclude>**/*-min.css</exclude> <exclude>**/*.min.css</exclude> <exclude>**/WEB-INF/**/*</exclude> </excludes> <jswarn>false</jswarn> <nosuffix>true</nosuffix> <warSourceDirectory>${basedir}/src/main/webapp</warSourceDirectory> <webappDirectory>${project.build.directory}/min</webappDirectory> </configuration></plugin>
-5-
Front-End
Page-Speed
-6-
Front-End
Network
-7-
Front-End
여러 이미지 병합 사용 sprite
-8-
Front-End
퍼블리셔 코딩가이드 (CSS 는 상단 ,Javascript 는 하단 ) <!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %><%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %><html><head> <title><spring:message code="spring.social.mvc.normal.title"/></title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap-theme.css"/> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/font-awesome.css"/> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css"/><sitemesh:write property="head"/></head><body><div class="page"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <span class="navbar-brand">Spring Social Example</span> </div> </div> <div class="content"> <div id="view-holder"> <sitemesh:write property="body"/> </div> </div></div></body> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vendor/jquery-2.0.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.js"></script></html>
-9-
3) Front-End
DOM 파싱
-10-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-11-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-12-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-13-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-14-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-15-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-16-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-17-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
-18-
Front-End
IE11 의 F12 개발자 도구를 사용한 디버깅
