How to speed up a web site (site speed)
The developers on the Yahoo! Developer Network, said there are about 35 methods and techniques commonly used in the design to website “” faster.
The developers on the Yahoo! Developer Network, said there are about 35 methods and techniques commonly used in the design to website “” faster. Basically, the “way” is divided into 7 groups, including Content (content), Server (server), Cookie, CSS, Java Script, Image (image), Mobile (mobile phone), and they set custom website design will be the fact that operators, combining these techniques with each other to achieve the best results.
In this article, let us go through nine Content group method and the remaining 21 methods would be sent to you in the post.
1) Limit the HTTP request
In fact, with every web page or site, when receiving a request to display about 80% of the time users have to wait usually reserved for the transmission of data between the server service (or clear rather than storage sites) to the browser. Meanwhile, most of the time “dead” being “tied” to download all the components in a web page, image, format (stylesheets), the code of the script (script), content Flash, … so that the browser can build the page on the screen (computer or mobile device) by the user. Therefore, reducing the number of components of the contents of this form means reducing the number of HTTP requests (HTTP request) from the browser.
One way to reduce the number of components in a web page is trying to simplify the design of the site itself. However, the question that many web designers often posed is “how to build a website with rich content while ensuring rapid response / display?”. There are several techniques that can help reduce the number of HTTP requests but still support rich web site design, such as:
“Gom” files (Combined files) is the fundamental solution to reduce the number of HTTP requests, by connecting all the script file on the site in a single script, and similarly combining all CSS in a stylesheet file. The files are joined together making it more difficult for programmers (and even website) for scripts and stylesheets are often different at each site.
Meanwhile, CSS Sprites is a method used by many programmers prefer to reduce the number of HTTP requests, by reducing the time required to retrieve the image. Specifically, programmers and web designers need to combine background images into a single image and then use programming tools (such as CSS background-image and background-position) to ask the right part of the image display necessary.
Similarly, the methods Image maps also combine multiple images into a single image. With this method, the amount of image content to be displayed will not change (because of the image file into the previous one), but this method of “contribution rice” making the number of HTTP requests down to minimum, so that also helps the site to meet a lot faster. Note, Image maps method can only be applied when the images appear side by side on the web page.
In addition, Inline Image method, use the syntax data: URL for embedding data in the image on the right in the web page and of course this will increase the size of the HTML file. However, the combination of the images embedded in the stylesheet (caching) is the way to reduce the number of HTTP requests and avoid increasing the size of the site. Unfortunately, this method is not currently supported on all popular browsers.
In general, reducing the number of HTTP requests is the first thing you need to think about when they want to improve the display speed and response time of web pages.
2) Reduce DNS query
Basically, the system domain name resolution (Domain Name System) is responsible for “mapping” the server name (or website) with the IP address, like a phone book. Normally, it should be between 20 and 120 milliseconds to find the IP address of a DNS server machine name (hostname) and the browser will not be able to download any content from the hostname until the DNS lookup tasks to complete.
The DNS lookup is saved to the browser run faster. This information can be stored on a dedicated server of the ISP or local network server, but sometimes can also be stored on the user’s personal computer. DNS information in separate memory areas of the operating system (such as “DNS Client service” on Microsoft Windows). Most browsers have a private storage area, independent of the DNS memory of the operating system. When the browser store DNS information, it will not bother the operating system to conduct queries.
By default, Internet Explorer store DNS information within 30 minutes, determined by parameters DnsCachTimeOut in the Registry, while Firefox just save this information within one minute, which is controlled by configuration parameters network.dnsCacheExpiration .
When the DNS memory space (for both the browser and the operating system), the number of DNS queries with the right amount hostname mentioned in the website. These include the hostname used in the URL, images, script files, stylesheets, Flash objects of the site. Reduce the number of the hostname synonymous with reducing the number of DNS queries.
However, reducing the number of hostname (do not overlap) the risk of reducing the number of parallel tasks download takes place within the site. Avoid manipulation of DNS queries will reduce the response time, however, reduce the number of downloads in parallel can increase this time. Many programmers to overcome this situation by breaking the above objects at least 2 but not more than 4 hostname – this is the best arrangement to reduce the number of DNS queries and allows the ability to download parallel at a high level.
3) Save temporary Ajax
One of the notable benefits of Ajax is the ability to provide instant feedback to the user. However, using Ajax is no guarantee that users will be sat waiting for incoming data – the data is XML or JavaScript feedback form can not be synchronized. In many applications, the issue of user acceptance wait or not depends on how Ajax is used. For example, in the web-based email utility (such as Yahoo! Mail or GMail), users still have to play Ajax query results search all email matches the requirements they set.
You need to understand that “asynchronous” (asynchronous) does not mean “immediate”.
To improve the speed of the site, it is important to optimize the Ajax response. The most important way to improve the performance of Ajax is to make the response is cached in memory (the browser or computer depending on the intention of the designer). With this method, users should pay attention to the duration of the stored values.
4) Use the following components are downloaded when loading web pages
You can close-up view of your site and wondered, “What need to be able to set up a site right at the beginning?”. In this situation, you identify what are the core information to be displayed first, the general format for the site. Then, if necessary, you think of the format for each display area, the effects and interactive menus. For example, the JavaScript pop-up effects processing when users mouse over a content area does not need to download first for web page to load is complete, the user can see the content to drag up.
For this purpose, you can use the YUI Image Loader allows to delay the appearance of an image, or YUI Get utility tool allows apply immediately JavaScript or CSS web pages.
5) Use the component is downloaded before loading web page
Many users often assume that it is difficult to distinguish the difference between the methods used components are download after loading site and use previously downloaded components when loading web pages, but in fact the result 2 This method is very difference. By downloading the previous components, you can take advantage of the browser timeout and load requirements of the components (images, stylesheets, scripts, etc.) are about to use. With this method, when a user visits the next page, you have in hand almost all the components in the memory and, of course, the site will appear quicker.
The previously downloaded content is usually divided into the following types: downloaded before without conditions, conditions and forecasts – depends on the intention of the web site design.
6) Reduce the number of DOM objects
A complex site often download large capacity and this will also make accessing the DOM (Document Object Model) in JavaScript to be “sluggish”. Surely there is a difference when you browse a web page with 500 subjects and a site with 5000 objects, even more.
A large number of DOM objects can be warning signs you need to improve your site’s HTML code without the need to remove or reduce the content. You are using multiple tables are stacked for display purposes, or use multiple tag types
only to overcome the problems related to the show?
You can use the tools YUI CSS (http://developer.yahoo.com/yui/), as grids.css to control the design (layout), or font.css and reset.css can help you bypass the browser’s default format. This is a good opportunity for you to refresh and make a difference to your site in the stage show.
Programmers often wonder how much of the DOM object is too much? For example, the home page of Yahoo! as a web page is rather dense but less than 700 objects. You can easily determine the number of DOM object with Firebug add (http://getfirebug.com/). In the console window, type the command document.getElementsByTagName (‘*’). Length.
7) Put on multiple domains
The distribution of the components in a web page will allow you maximum downloading tasks in parallel. Make sure you are using the 2-4 domain as this related to DNS queries. For example, you can set the (host) and HTML content in www.example.org address and then assign the static component to the other 2 domain is static1.example.org and static2.example.org. You can see more information about this solution in address http://yuiblog.com/blog/2007/04/11/performance-research-part-4/.
8. Minimum number of iFrame
Basically, the iframe to allow an HTML document to be inserted into the original document (also known as the parent document). You should understand how the iframe to use the most efficient operation. Advantages of the iframe:
* Support for the contents of the slow pace of third-party such as banner ads, etc.
* Allow additional code or security tools
* Supports download scripts in parallel
The downside of the iframe:
* Block web page while downloading
* No visual language
9) Do not use the message “404”
As stated above, unnecessary HTTP requests will certainly reduce the response speed of the web page; not only that, after receiving the useless response from an HTTP request (such as the 404 Not Found) , the user will feel uncomfortable.
Some website creation initiatives announced 404 more attractive, such as “404: Did you mean X?”, So that users feel more comfortable in front of a malfunction. But this will waste server resources.
In addition, the problem becomes worse when a link to an external JavaScript is wrong and the result is that the user will get error message 404. First of all, the download task will disable all parallel download. Next, the browser may try to parse the 404 response body as is JavaScript; trying to find things I could use.
