Simple website optimization

First, why to optimize the site 1.1, the characteristics of large sites

• High traffic
• At the same time more people online
• Huge amount of data
• Data operations are frequent

1.2, the Website Performance Test index (user angle)

• Daily Visit volume
• Simultaneous online headcount
• Maximum number of concurrent connections
• Access Response Time

1.3, the site performance of individual embodiment

• first screen time: A website by the top of the browser, 800*600 area filled with the time required
• Web Access availability: The success rate of a user visiting a webpage.
• DNS time: The browser sends the address to the DNS server, and the DNS server returns the IP address to the browser based on the address, which is the DNS time
• Establish connection time: after the DNS time, the browser to the IP address, then send the customer complaint request to the Web server, and then establish a connection, then establish the connection time is over
• REDIRECT time: jump time between pages, such as check whether it is a member, not just jump login
• First Packet time: the browser sends an HTTP request to the end, to the time it takes to receive the first packet returned by the Web server
• Total download time: The time taken to download the content on the page, the total duration of the page
• error Condition: The site's error condition represents the operational quality of the site.

1.4. Customer complaint Questions

• Slow speed
• Individual pages open too long, or can't open

Second, use YSlow plug-in analysis website performance

YSlow plugin, Yahoo is running on the Firefox browser, but also to have firebug to run

Third, Web content Optimization 3.1, reduce the HTTP request

• Merge files (JS or CSS files)
• CSS Sprites picture flattening (common)
• Image map

3.2. Reduce the number of DNS lookups

• Reducing the number of host names can reduce DNS lookups,
• Reduce the number of DNS lookups to save response time
• Reducing the hostname reduces the number of concurrent downloads in the page, but this increases the response time
• Principle: Divide the contents of these pages into at least 2 parts, but not more than 4 parts. Result: Reduce the number of DNS lookups and keep parallel downloads in balance

3.3. Avoid jumping

301 Code, 302 code. Default does not cache, you must add expires or Cache-control to specify the cache

Always be careful not to ignore the backslash (/) that the URL should have.

3.4. cacheable Ajax

Set in client cache

3.5. Reduce the number of DOM elements

Too many DOM elements can make traversing the DOM inefficient.

Instead of removing content, replace it, refine the element label

Reduce nesting of DIV elements

3.6. Avoid using IFRAME as much as possible

Advantages:

• Resolve slow-loading third-party content
• Just modify one of the IFrame content, and you can change all the apps that have the IFRAME page

Disadvantages:

• Loading takes time even if the content is empty
• Prevent page loading
• No semantics.

3.7. Avoid 404 errors

Bad loading can corrupt parallel loading

The browser will try to find the part that might be useful in the returned 404 response content as JavaScript code to execute

Iv. Picture optimization 4.1, using tools to optimize the picture

Check if the number of image colors in your GIF image matches the palette specifications, such as using only 4 colors, and 256 in the palette, indicating that there is room for optimization

Try converting GIF format to PNG format to see if there is room to save

Run Pngcruch or other PNG optimization tools on all PNG images

Run Jpegtran on all JPEG images to manipulate the aliasing that appears in the picture, and it can also optimize and erase annotations and other useless information in the graph

Finally, all the pictures spinning a JPG or GIF or PNG format, the line appropriate to turn, can achieve a good optimization effect,

Try to avoid using BMP format, the user upload format for a format conversion can achieve a good compression effect

Jpegtran

JPEG compression tools have Jpegtran and Jpegoptim, the compression effect of the two tools almost no difference, here we recommend the use of Jpegtran, compared to the latter, Jpegtran can be progressive coding, so that the image progressive display, Show the blurred picture first, then gradually clear.

Recommended command line parameters:

Jpegtran–copy none–optimize-progressive-outfile out.jpg in.jpg

To know the specific function of these parameters, you can use the command "Jpegtran–h" to understand,

4.2, the use of reasonable picture size

Do not use a much larger picture than you actually need, and do not scale the picture in the page

4.3, favicon.ico to be small and to be cacheable

Favicon.ico bit is the root directory of the store

Favicon.ico files are not missing, and files should be as small as possible to cache

4.4, using CSS sprites to optimize the page small picture

CSS sprites technology, horizontal arrangement of the picture will be better than the vertical arrangement effect

Pictures with similar colors can be combined to reduce the number of colors

Reasonable application of CSS sprites technology, do not leave a large gap in the middle of spirite image

Five, optimize CSS and JavaScript5.1, put style sheet at the top

The development phase separates the style from the code, and then puts the style in the

5.2. Use <link> replace @import

<type= "Text/css""rel=" stylesheet " href=" Style.css "/>

Using <link> instead of @import to import external style sheets

5.3. Avoid using filters

Avoid using filters, use PNG-formatted images instead, mainstream browsers generally support this format, and use CSS hack when necessary to handle IE6 browser effects

5.4. Streamline CSS and JavaScript

Thin Tools:

Jsmin:javascript

YUI Compressor:javascript can also be used to streamline CSS

<script> and <style> code blocks can and should be trimmed

Streamlined code, with abbreviations

5.5. Place JavaScript at the bottom of the HTML

Put the script at the bottom of the HTML page

(document.write () output statement exception)

Six, optimize Cookie6.1, reduce the size of cookies

• Removal of unnecessary cookies
• Set a reasonable expiration time

6.2. Avoid cookies that use global domain names

You should use a domain name with no cookies for page elements such as pictures

Vii. Server-side optimization 7.1, using the Content distribution network

Content Delivery Network referred to as CDN

Using a CDN (Content distribution network), but at a high cost

7.2. Specify expires or Cache-control for the file header

Static content settings: The value of expires is "never expire" (never expires)

Dynamic content settings: Cache-control set the appropriate values such as "No-cache"

Expires file headers are often used in image files, but should be used in all content, including scripts, stylesheets, and Flash

7.3. compress file contents using gzip

Turn on the gzip compression settings on the application server side

To enable gzip compression in Tomcat:

To modify the%tomcat_home%/conf/server.xml, the revision node is as follows:

<ConnectorPort= "8080"Protocol= "http/1.1"ConnectionTimeout= "20000"Redirectport= "8443"Compression= "On"compressionminsize= "2048"nocompressionuseragents= "Gozilla,traviata"<!--below you can set which types you want to compress-->Compressablemimetype= "text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/ Css,text/plain "/>

As can be seen from the properties of the above node, to use the gzip compression feature, you need to add the following properties to the connector node compression= "on" to turn on the compression function compressionminsize= "50" to enable the compressed output content size, default to 2KB Nocompressionuseragents= "Gozilla, Traviata" for the following browsers, do not enable compression compressablemimetype= "text/html,text/xml,text/ Javascript,text/css,text/plain "which resource types need to be compressed

7.4. Use get to complete AJAX requests

• POST: Send the file header before sending the data
• GET: A TCP packet

Get data is recommended, instead, send and save data on the server using post

The maximum URL length in IE is 2K, and if you get more data than 2K, you cannot use get.

Eight, the development point of view optimization

Disadvantages of dynamic Pages:

• High Server pressure
• Long page Response time
• Security issues

Reasons for implementing the static:

• Increased access speed
• Reduce server pressure
• Enhanced security
• Facilitate search engine inclusion

Nine, how to static Web site

At present, most of the sites are using: template technology to static site

9.1, the advantages of static website

Efficiency aspects:

• Pure static HTML page: End with htm/html, highest efficiency, lowest consumption, fastest speed
• Reduce the pressure on the server: compared to dynamic page to execute script, database operation, static page only need to return the corresponding static page to the client
• Facilitate search engine inclusion: Dynamic page generation is the use of database content, so the theme of the Web content of the eternal is not guaranteed, so that the search engine is difficult to read, that is, the search engine can not grasp an eternal theme, so it cannot be entered into the search engine cache. Outside, dynamic connection, there is a trust problem, and the search engine cannot determine that the page will always exist. The search engine is more friendly to static links, so it is a very important optimization technique to make URL rewriting of the moving URL to be static.
• Improve server performance: Dynamic pages are frequently read from the database, while static pages only need to return the corresponding static pages to the client

Security aspects:

• Anti-SQL injection: Static pages do not have database operations at all, eliminating the possibility of SQL injection
• When a site error occurs, it does not affect normal site access. Dynamic Pages: If an error occurs or a database problem occurs, the page that reads the data from the database must not be properly accessed. The static page will only invoke the database operation when generating the static page, and will not do anything to the database after the build, so mom is the database crashes, the user can still access to the existing static page

9.2, static implementation mode-template technology

The necessary parts of the site to implement the static operation, the same site under the different pages, the style is generally consistent, different only content,

Let static time can reuse the overall frame of the page, style, etc. these are templates

9.3. Static operation in Java

Velocity or freemarker template framework.

It allows anyone to simply use the template language to refer to objects defined by Java code.

When velocity is applied to web development, interface designers can synchronize with Java program developers to develop a Web site that adheres to the MVC architecture, meaning that page designers can focus only on the display of the page, while Java program developers focus only on the implementation of the business logic encoding.

Velocity separates Java code from Web pages and facilitates long-term maintenance of web sites

Ten, the first knowledge of MVC

Mvc:mode View Controller

Xi. optimize database query 11.1, add appropriate indexes on columns that are frequently queried

• determine and establish the necessary indexes: make the index you create useful for data productivity improvement
• use some rules for indexes: When creating an index, it should be combined with the actual query
• The relevance of the index of the tally to the SQL statement: to ensure that it is truly used and works

11.2, try to use less in or not

Use in or not in the WHERE clause as little as possible

You can use exist or not exist instead of in or not

11.3. Use as few wildcard characters as possible *

Query statement write field name, try not to use * such as: Select Top col1 from table1

11.4. Try to use like as little as possible

Using like will result in an indexed effect and reduce query efficiency

12, performance monitoring 12.1, why need to monitor the performance of the website

The performance of the website varies with the number of views and hardware facilities, and it is necessary to monitor the overall performance of the website before or during operation.

12.2. Monitoring stage

• During web development
• During website operation

12.3. Monitoring software

• During web development: Use specialized load testing tools such as LoadRunner

Advantages of using professional load test tools such as LoadRunner:

• Create virtual users with ease: Virtual user generator Easily create virtualized users to simulate the behavior of real users ' business operations in a virtual user's way
• Create a real load: Controller, to set the number of business process combinations and virtual users, and quickly organize a multi-user test scenario
• Positioning performance Issues: The LoadRunner includes an integrated real-time monitor that can observe the operational performance of the application at any time of the load test
• Analyze the results to pinpoint where the problem lies: when the test is complete, all data is collected and advanced test reports are generated.
• Repeat testing ensures high performance of system releases: Controller, allowing repeated execution and the same test scenario before error modification

• Website Operation period: Surveillance Bao, the service uptime,uptime robot, etc.

Simple website optimization