A web Front-end optimization attempt and a WEB optimization Attempt

A web Front-end optimization attempt and a WEB optimization Attempt

Today, I optimized the loading speed of a designer interface in my own project, because the page loading is a little slow. First of all, I tested yslow in firefox and pagespeed in chrome. The results are as follows. The scores are a little different, but they are all very low. In fact, I used pagespeed prompts in chrome for optimization.

Before yslow optimization:

After yslow optimization:

 

Before pagespeed optimization:

 

After pagespeed is optimized:

 

Optimization Strategy:

1. Enable gzip compression in tomcat configuration

2. tomcat configuration static file expiration time

3.put CSS at the top of the page

4. Place javascript below the page

5.css and js files are merged and compressed respectively.

 

Tomcat enables gzip Compression

 

Open the server. xml file in the conf directory of tomcat and modify the file as follows:

 

1. <Connector port = "80" protocol = "HTTP/1.1"
2. ConnectionTimeout = "20000"
3. RedirectPort = "8443" executor = "tomcatThreadPool" URIEncoding = "UTF-8"
4. Compression = "on"
5. CompressionMinSize = "50" noCompressionUserAgents = "gozilla, traviata"
6. CompressableMimeType = "text/html, text/xml, text/javascript, text/css, text/plain"/>

Reference: http://blog.csdn.net/hbcui1984/article/details/5666327

 

 

Tomcat static file expiration time

 

Open the web. xml file in the conf directory of tomcat and add the following:

1. <Filter>
2. <Filter-name> ExpiresFilter </filter-name>
3. <Filter-class> org. apache. catalina. filters. ExpiresFilter </filter-class>
4. <Init-param>
5. <Param-name> ExpiresByType image </param-name>
6. <Param-value> access plus 10 minutes </param-value>
7. </Init-param>
8. <Init-param>
9. <Param-name> ExpiresByType text/css </param-name>
10. <Param-value> access plus 10 minutes </param-value>
11. </Init-param>
12. <Init-param>
13. <Param-name> ExpiresByType application/javascript </param-name>
14. <Param-value> access plus 10 minutes </param-value>
15. </Init-param>
16. </Filter>
17. <Filter-mapping>
18. <Filter-name> ExpiresFilter </filter-name>
19. <Url-pattern>/* </url-pattern>
20. <Dispatcher> REQUEST </dispatcher>
21. </Filter-mapping>

Expiration time: 10 minutes more for each request

Reference: https://tomcat.apache.org/tomcat-7.0-doc/api/org/apache/catalina/filters/ExpiresFilter.html

 

Css file merging and compression, js file merging and Compression

 

Merge compression and use grunt for processing, which is simple and convenient

 

Reference: http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

Http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html

 

In general, the page loading speed is improved. As the page designer adds over 30 js and core js components, I only compress and merge these components, other introduced js plug-ins use compressed files. For css, I only compress and merge my own files. The image has not merged all the images into one file, but only a small number of icons have been integrated, which should be improved after the merge.