How code optimization improves page load speed

Original link

1. Reduce page requests:

From the Web operating principle, the IIS request is stateless, the server side has been connected and shut down continuously, if you can reduce the server request, the total time will be reduced.

Before I downloaded the 163 mailbox landing page picture when found that they only used a picture to complete the entire page of all the pictures, then I was puzzled, this is not the same as the usual website. However, to reduce the number of browser requests, using HttpWatch you will find that the total time of the request is greatly reduced. The same idea, in the CSS style, JavaScript code should also be done as far as possible in a file to reduce Web requests.

2, page compression technology, give us js,html code to thin body.

jQuery 作为JS最轻量级的类库，它的原类库是242KB，压缩后的它竟只有91.6KB。     常见的压缩工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip，因为它的压缩率是最高的。用jdk压缩后它会把一些空格去掉，把我们很长的变量名换成换成很短的字母来代替。

3, style, behavior, structure separation.

When the page is accessed for the first time, the user can download the CSS,JS code, although the first time the page loads slowly, but the subsequent page will be much faster. When users visit other pages of this site, the CSS style and JS code are also referenced by other pages. Browser found that it has been downloaded, the next time you can not download. This will do a download, the effect of subsequent speed.

4. Using Stored Procedures

Before running the stored procedure, the database has been analyzed by syntax and syntax, and the optimized execution scheme is given. This compiled process can greatly improve the performance of SQL statements. Because most of the work that executes the SQL statement is completed, the stored procedure can be executed at a very fast speed. This precompiled SQL statement can be executed directly and saves a large part of the query time.

5. Some details:

Put the CSS style on the head, if JS a lot of words, put the JS code in the tail. This allows you to load the DOM structure of the page as much as possible before you can level the user experience. If JS a lot of big words, the page is not loaded, how to user experience to say it.

6, appropriate use of Ajax

Ajax seems to be a bit of a myth now, as if the Web page as long as Ajax, then there is no efficiency problem. In fact, this is a misunderstanding. Poor use of Ajax will not make your Web pages more efficient, but can reduce the efficiency of your pages. Ajax is really a good thing, but please don't overdo it. You should also consider the above guidelines when using AJAX.

7, as far as possible to use the style tool for our generated page style code, do your own style written in the style file. Try to write as universally as possible.

8. Page Cache

在大型的门户网站都用到了缓存技术，它是以空间换时间的技术。缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈，所以读取大容量数据时，使用缓存来直接为客户端服务，可以减少客户端与服务器端的数据交互，从而大大提高二次页面的访问速度的程序的效率。

9, configure the site's entity tags:

 这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。

10, the use of CDN technology.

When we download things on the internet, we often see what "Southern Server", "Northern Server" is the use of CDN technology to improve download speed and stability.

The full name of the CDN is the Content Delivery network, which is the contents distribution networks. The basic idea is to avoid the bottleneck and link of the Internet which may affect the speed and stability of data transmission, and make the content transmission faster and more stable. By placing the node servers in the network, a layer of intelligent virtual network based on the existing Internet, the CDN system can re-direct the user's request to the nearest service node according to the network traffic and the connection of each node, the load condition and the distance and response time of the user. The goal is to enable users to get the content they need, solve the congestion of Internet network, and improve the response speed of users to visit the website (from Baidu Encyclopedia).

11. Compress the document using gzip:

 GZIP编码是用来改进网页性能的方法，不仅可以减小存储空间，还可以减少传输所需的时间。将网站中的文件使用Gzip压缩后，可以显著的增加网页加载速度，同时也可以降低网站的带宽流量消耗。

12. The style sheet file is placed outside the call:

 把页面中需要用到的javascript和CSS样式表文件放在另外的文件夹中，这样一来在打开网站其它页面时就会缓存这些调用的文件，从而加快网站页面的加载速度。

13. Weight loss for JavaScript files:

 这个方法不同于gzip压缩功能，缩小JavaScript文档有很多方法，比如去除不必要的空格等其他标签等。减少脚本文件后可以显著的提高网页的访问速度。

14. Image using height and Width properties

 每个图片的height和width属性可以让浏览器在加载图片之前就知道图片的长和宽，并预留出指定的长宽待图片加载后显示。如果没有这两个属性，浏览器还需要在读取图片成功后再处理一次页面布局样式，这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属性。

15.CSS file Compression Slimming

Div+css is now fluent in the layout of the page, Div defines the elements, CSS controls the display effect. So often we will write CSS to another one or more external link CSS file, and the CSS file code also has a lot of lines. We can use some CSS compression tools to remove unnecessary content in the CSS file, such as repeating the definition of style, space, and so on to thin body. You can try using the Cleancss tool to compress your CSS files.

16. Integrate CSS, JS files to reduce the number of HTTP requests

  现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接。所以当访问一个网页时浏览器需要多次向服务器请求这些文件。在请求和加载之间会产生不少的时间差。特别是一些网页上有多个小图片、图标按钮的网页，有多少图片，浏览器就需要请求多少将这些小文件，多将请求这些小图片文件将明显影响网页的加载速度。所以我们应该尽可能将小图片拼合一个PNG大图片上，然后通过坐标来显示图标。一次请求一个大图片比多次请求小图片速度要快不少。同样，最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

17. Add a slash (/) to the directory address

  如访客点击访问这样一个目录地址：http://www.zhen.com/dajiaguifan，去打开这个目录下的index.html文档。当服务器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录。但是如果我们在最后加上一个斜杠（/），服务器就知道你是在访问一个目录地址，然后就直接加载默认文档index.html或index.PHP就行了。这样服务器就不用花时间来分析这个地址，也起到了一定加速的作用。

Original link

How code optimization improves page load speed