Shulou(Shulou.com)06/01 Report--

This article will explain in detail what are the five simple and effective ways to accelerate the response time of web pages. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

1. Use Yslow to overview and measure the loading time of a website

Knowing the loading time of the site is the first step before deciding what goes wrong. It also lets you know if you need to speed up changes to the site.

Before we begin, if you have not already installed YSlow, please install it. It is an extension of Mozilla Firefox, which you can find at the following link:

Https://addons.mozilla.org/en-US/firefox/addon/5369

First, let's visit the Six Revisions website, where we all test with the same example (just open it in a new tab or browser window).

In the plug-in bar in the lower right corner of the browser (figure 1). When the page finishes loading, you will see "YSlow" and the number. The number represents the time (in seconds) it takes the browser to load the site. We want this figure to be kept as low as possible.

Figure 1: YSlow icon and odometer showing the loading time of the web page

In most cases, one or a group of reasons for the long loading time of a web page are as follows:

1. Too many HTTP requests

2. Uncompressed (or unscaled) JavaScript files

3. No expiration headers for static picture file

We're going to talk about this later.

In order to show the loading time of fimilarize's own website, I visited some websites. Check out Google,facebook, and some of your favorite blogs and websites. You will notice that the more images the site uses and the longer the response time of the js page.

The usage characteristics of YSlow

In addition to measuring the speed at which its pages load, YSlow provides you with some insight into what you can do to improve the performance of your site, as well as the lack of load performance of your site.

The picture below is the "performance" label (figure 2). But when you click on it, it will graded the details of each area that affects load time and overall performance.

Figure 2: performance label

The most subjective choice in this area is to use CDN (content delivery Network). CDN is very effective for large websites. What they do is spread the content of the site across servers in all regions. The closer the physical server is to a user loading a website, the faster a page will be. So in essence, using CDN is to distribute content from the server to the user of the page that is closest to you.

Figure 3: the performance label uses letters (A, B, C, D, F) to indicate the level and the current level (1-100).

Level area: let's run through each level factor. Here is the short second speed of each level area, and how to solve these problems to achieve the best performance.

Reduce HTTP requests: HTTP requests occur when a web page fetches a file from the server. The scope includes scripts, CSS files, images, and asynchroneous client / server requests (Ajax and other changing technologies). This is the key to improving performance, but it can be easily solved with a little physical effort. For example, it is often helpful to merge scripts, CSS, and images as much as possible, and to cache files on the user's machine.

Add deadline headers: 80% of the page load time is related to downloading scripts, images, and CSS. In most cases, these elements do not change on the user's machine, and you can cache them on the user's local machine by adding code to .htaccess (we will discuss how to do this later in the article).

Gzip parts: Gziping or compressed JS files, images, HTML documents, CSS documents, etc. Users can download smaller versions of the file to increase the loading speed of the web page. This reduces server consumption, but the unzipped widget may also cause the page to respond more slowly, depending on the user's browser.

Put CSS on top: put the CSS file on top of the site, which can load as many other parts as possible, such as images and text, at the same time.

Put js at the bottom: put CSS in the head of the document, just insert js before closing. While these scripts are loaded in the background, the user first gets a seemingly complete page.

Avoid using CSS expressions: I have never used CSS expressions (called dynamic features), which is just an IE proprietary CSS feature that adds programming concepts (such as control / conditional structures), as of IE8, the Trident layout engine (used in IE) no longer provides support. To some extent, I use PHP scripts to load different CSS style rules based on different conditions, such as a random number, time of day, or browser.

External calls JS and CSS: put the JS and CSS files in external files, and the browser caches them with faster page loads than each call.

Reduce DNS lookups: as long as users type domain names in the browser's address bar, browsers will always perform DNS lookups for IP addresses, and the more entrances the site has, the more necessary DNS lookups will be. Keep the level as low as possible, averaging 60-100ms for a DNS query.

Shrink JS: different from the general gzip compression, shrink js documents is to remove unnecessary spaces, reduce the total size of the file, smaller pages can get faster loading speed, you can use JSMIN to reduce JavaScript.

Avoid redirection: whether it's server-side redirection, js redirection, or HTML element redirection. Your site will load a blank page header and then a new page, and users will spend more and more time getting the pages they need, so avoid this at all costs.

Get rid of duplicate scripts: browsers loading the same script will increase the loading time of the page, which is a very simple mathematical problem, and more files equals more loading time. Check your website carefully to make sure you don't call jQuery or other scripts two or three times.

Figure 4: part label.

The widget tag (figure 4) provides insight into the effect of increasing the loading speed of the site. Here, you can see how long it takes for the current document to load, if these files are compressed, the response time, if they are cached on the user's machine and when the cache expires. This is a good assessment of the website to measure its performance and speed optimization. Finally, the statistics tab (figure 4) shows us all HTTP requests, documents downloaded at the same time, and cached files. Empty cache shows the files that the browser needs to download to render the page. Primed Cache, on the other hand, displays a list of files that already exist in the user's browser cache, saving the browser the request to download the file again.

Figure 5: Stats tab.

two。 Use the CSS wizard to reduce HTTP requests

CSS sprites can easily reduce page load time by merging your css background images to reduce page service-oriented HTTP requests.

Many tutorials just teach you how to use the CSS wizard to make navigation. What I want to say is to use it to make the user interface of the entire site.

First, let's take a quick look at YouTube and see how they use CSS Sprites (figure 6). You can't see YouTube's CSS Sprite here:

Master-vfl87445.png

Figure 6: YouTube's "primary" CSS Sprite.

How to do this, use CSS,YouTube to set a class that uses this image as the background (such as the image above), and then other elements just need to set the corresponding class through the background location attribute background-position of css to use these images.

Let's give it a try. We're going to use YouTube images to make an example.

In the following example, we have the YouTube flag displayed on the screen. Use the same sprite class and the same icon to make a simple flip icon.

.sprite {

Background:url (http://s.ytimg.com/yt/img/master-vfl87445.png);

}

# logo {

Width:100px

Height:45px

Background-position:0 0

}

What we are doing now is to meet all static site requirements through a single HTTP request. This can greatly reduce the page loading time.

When you use sprites to create a hover flip effect, the interval between images seems to be very short. Unlike loading a file in a flipped state, a large amount of white space is left until the file is fully loaded.

.sprite {background:url (http://s.ytimg.com/yt/img/master-vfl87445.png);}#logo {width:100px; height:45px; background-position:0 0;} # button {background-position:0-355px; padding:5px 8px;} # button:hover {background-position:-25px-355px;}

3. Load CSS first and then load JavaScript

On some sites, you can't avoid all HTTP requests that disrupt your functionality at all.

In this regard, the following suggestions are made:

On body

In the label.

Load CSS in

Label

Load JavaScript before closing.

What will happen? The web page is loaded and displayed on the user's machine, so their eyes begin to scan the content provided, just in time for JavaScript to load in the background.

Tip: if you don't want to move the JavaScript tag and you think it will mess up the way the site works, I recommend using the defer attribute.

4. Use subdomain names to download concurrently

Parallel downloads when you add file downloads. If you open the page in the footer status bar, you will find that when loading other sites, you will make requests for both static.domain.com and c1.domain.com.

This is a great way to optimize load performance. Although you simply use a subdomain name and the content is on the same server, the browser is treated as a separate server.

Make the following settings:

1. Create 3 subdomain names on the server

2. Put the pictures in a folder of each subdomain.

3. Replace the location path of the website image in the new subdomain name

Using JavaScript files now, there will be no more than two concurrency.

5. Adding an Expires Header

Some websites are so rich that even with the above technologies, performance seems to be able to increase even more.

A user visits your site and generates HTT requests for necessary pages, images, scripts, etc.

When you use Expires Header, you can cache these elements on the user's local machine, which not only improves their access speed, but also saves your bandwidth. Expires header can be used on all images, scripts and css.

You can easily do this by adding a line of code to the .htaccess file at the root of your site. If you don't, you can create one with a text editor, save it as .htaccess, and upload it to the root directory. )

Below. Htaccess. Set a distant expiration date of 2010 for ico,.pfd,.flv (Flash type files), .jpg, .png, and so on.

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

This is the end of the five simple and effective ways to speed up the response time of web pages. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.