Website Design code optimization Let the site open speed fly up

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The opening speed of the website is a very important user experience assessment standard, of course, the impact of the speed of the site to open a lot of reasons, such as server problems, such as the problem of the program, and so on, I and you are not the main analysis of external factors, mainly in the website design process, the internal factors to achieve the ultimate, Speed up the opening of the site is so simple!

How to judge the opening speed of a Web page

1, the size of the Web page content

Search Engine Optimization page to open the best speed: 2 seconds! The text included in the content of the Web page, pictures of products, videos, flash files, etc. We have a Web Access time Calculation formula: Page Open time = Web page content size/minimum bandwidth + Resolution times * Each resolution time + server processing time + client resolution time. The user is most satisfied to open the Web page time, is under 2 seconds. The maximum number of waiting times a user can endure, between 6-8 seconds. This means that 8 seconds is a critical value, and if your site is open for more than 8 seconds, chances are that most visitors will eventually leave you.

2, control the total size of the page

To do a good job of the Web page, the content must be rich, but do not put all the content on a page, should control the overall size of the page. First, the size of each element in the page, such as text, images, ActiveX or Java code, and HTML text, preferably below 50K.

Second, web design worry

Web optimization refers to the design, use of the elements of the page, can minimize the impact of the page elements on the download speed. These details, we understand, can be avoided in the daily production of web pages.

1, the Web page to meet the standard

(1) The use of structural layers in Web page production is completely separated from the performance layer. That is, the layout uses CSS instead of table. This will not only replace the professional performance layer of garbage code such as tags. It also allows your site to be refactored and easily implemented. A number of years of research nonporous has confirmed that if you rewrite a Web site, use div layout instead of table layout, you can cut down the original XHMTL document size half.

(2) Let the HTML tag finish. Whether we write or view other people's HTML code ourselves, we find that the HTML code tag is not written in spec. Some tags halves, but do not hinder the proper execution of the code. But the browser takes time to judge and calculate where the paragraph or list item ends. So, we must let the tag finish, this not only makes the HTML code format specification, but also can accelerate the display speed of the page.

2, optimize cascading style sheet

(1) Cascading style sheet CSS is an HTML dress up, a beautiful web page can not be without it. In general, we want to merge the refinement of the CSS code, remove unwanted redundant code, the picture as far as possible do not use the CSS filter to render; The CSS selector is defined as simple as possible.

Article There are many ways to refer to CSS in an HTML page, and different methods can lead to less efficiency. In general, we can define

3, optimize the picture

Pictures can be said to affect the maximum speed of the page loading factors, whether using the Picture Optimization tool, or reduce the size of the picture. A suitable balance must be found between quality and file size. There are several aspects that need to be understood mainly.

(1) Generally used on the Web page of the picture format has three kinds, JPG, PNG, GIF. We just need to know when and what format to use to reduce the load time of the page.

(2) The use of the picture display. When you need to display a picture, try to use the background picture instead of loading it directly. Also need to note is to try not to use a very small picture when the background, this will increase the client CPU processing time. For example, preload the main content of the next page. Before the user sees the big picture unfolds the small picture, lets the user not be anxious in the waiting process.

(3) The picture in the HTML code to indicate the size. So that the browser can be left in advance. When you add pictures or tables to a Web page, you should specify their height and degree, which is the parameter. If the browser does not find the height and width of the two parameters, it needs to download the picture side to calculate the size, if the picture is many, the browser needs to constantly adjust the page. This not only affects speed, but also the browsing experience.

4. Optimizing scripting language

(1) The effect of Web pages can not be separated from the support of scripting programs, we often embed a variety of scripting languages in the page, such as the commonly used JavaScript and VBScript language. Dynamic scripting code can also be optimized in use. Use the same scripting language in Web pages. I don't know if you're aware of that. When you use a variety of scripting code in a Web page, such a mix slows down the page's access speed. The reason: to explain and run a variety of scripting code, you have to load a variety of scripting engines in memory. So try writing your code in the same scripting language on your page.

(2) When you can use cascading style sheets to achieve results, do not use scripting language. If you must use dynamic scripting code, try to put the code out. We know that search engines cannot read script languages. If you think it's too much trouble, we can separate the scripting code from the Web page and put it on the bottom. For visitors, the site opened to load the bottom of the code time is very short, sometimes can be ignored, so will not affect anything. For search engines, the less code it knows, the better.

(3) Write scripts that are used by multiple pages into a standalone script file, and then invoke it in the page via JavaScript and other script languages. The key to reducing the time to download Web pages is to try to reduce the size of the file. When multiple pages share some component content, you can consider separating the common parts separately. This way, the public file needs to be downloaded only once and then into the buffer. The download time is significantly reduced when you call the HTML page that contains the common file again.

5. Optimization of other techniques

(1) skillfully using an IFRAME layout

Use the IFRAME to speed up the opening of the web. If you insert some AD code on your Web page and don't want to make the ad site more influential, then it's best to use an IFRAME. For example, on a home page to insert some advertising code method: Put these ads code to a separate page, and then in the first page with an IFRAME code will embed the page, so will not because of the delay of the advertising page dragged the entire home page display. For example, develop a document Preview page where you can place a series of topics on the left and an iframe on the right that contains the document to preview, and a preview document on the right when the mouse hovers over each topic link on the left. We simply use a single and simplified process.

(2) Don't let statistics code affect speed

Many sites have statistical code for webmasters and advertisers to provide access to the basis, but no matter how powerful the function of the site statistics system, there will be problems. To run the time, if the statistics code directly in front of the page content, or in a table or div tag, then in the counter can not access, your page that table or Div will produce a few 10 seconds delay, resulting in a long time to access the page. So, to improve the speed of the website, we must pay attention to the location of the statistics code placement, recommended practice is: Put the statistics code to the bottom of the page, and not with the content of the page in a table or div tag. You can place the statistic code directly at the bottom of the page code, or do a table or div at the bottom to place the counter, so that when the counter can not access, your IFRAME, modify its src attribute. In this way, not only is the code efficient, but the Web site speed will not be affected in the slightest.

(3) Static design of the page

Some content can be statically static to reduce the burden on the server. If you use pictures instead of flash, this is also good for SEO. Similarly, can be implemented with static HTML page, as far as possible with static Web pages. Because of the reason for the data update, ASP, PHP, JSP and other programs to achieve Dynamic Web page information interaction, it is really very convenient to run, because their data interaction is good, can easily access the latest content, change the content of the database, so that the site "move" up, such as: Forum, message board. However, such programs must be processed by the service, generate HTML pages, and then "send" to the client browsing, which has to consume a certain amount of server resources. If you use such programs too much on a virtual host, the Web page display speed will be slow, so how possible, in order to speed up the opening of the Web page, try to use a static HTML page.

For web designers. Every page should be exquisite, do its best to optimize every detail, speed up the speed of downloading the Web page to improve the experience of the user, to make our site have a better user experience, quickly follow the above said method, let their own website open speed fly!

Statement: This article by Shun E Net: http://www.shun-e.com original submission, respect for the achievements of others, reproduced please specify the source!