5. Accelerated webpage Response Time

Document directory

• 2. Use the CSS genie to reduce HTTP requests
• 3. Load CSS first and then load Javascript
• 4. Concurrent downloading with subdomain names
• 5. Adding an Expires header

Loading webpages as quickly as possible is very important to websites. users want to quickly view the pages they want to see. If you cannot satisfy them, they will find another one. In this article, you will see five simple and effective technologies for your web page acceleration.

 

1. Use yslow to overview and measure website loading time

Before deciding what is wrong, knowing the loading time of the website is the first step. It also lets you know if you need to make changes for website acceleration.

If you have not installed yslow before we start, install yslow. It is an extension of Mozilla Firefox. You can find it from the following link:

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

First, let's browse the six revisions website. We all use the same example for testing (only need to open it in a new tag or browser window ).

Effective in the browser, there is an ODPS table column (1 ). Next to the page, after the page is loaded, you will see "yslow" and numbers. The number represents the time (in seconds) the browser takes to load the website ). We want this number to be as low as possible.

Figure 1: yslow icon and ODPS table displaying webpage loading time

In most cases, one or more reasons that lead to a long webpage loading time are as follows:

• Too many HTTP requests
• Non-compressed (or unzipped) JavaScript files
• No expiration headers for static image files

We will discuss this later.

For the performance of fimilarize's website loading time, you can browse some websites. Look at Google, Facebook, and some of your favorite blogs and websites. You will notice that the longer the website uses images and JS web pages to respond.

Features of yslow

In addition to measuring the webpage loading speed, yslow provides you with some in-depth understanding, such as what you can do to improve your website performance, and the website load performance is insufficient.

The following figure shows the 'properties' label (2). However, if you click it, it will display details of each field that affects the loading time and overall performance hierarchically.

Figure 2: Performance labels

In this field, the most subjective choice is to use CDN (content delivery network). CDN is very effective for large websites. What they do is spread website content across servers in various regions. When the physical server is closer to the user to load a website, a page is faster. Therefore, CDN is used to distribute content from the server to the nearest accessed page user.

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

Aside from using a CDN (which can be costly)-everything else is doable.

Level field

Let's run through each level factor. The following is a short second for each level field, and how to solve these problems to achieve the best performance.

Reduce HTTP requests: An HTTP request is generated when a webpage obtains 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 performance, but it can be easily solved with just a little effort. For example, it is often helpful to merge scripts, CSS, and images as much as possible and store files on your machine.

Add term Header: 80% of page loading times are based on the download script, images, and CSS. in most cases, these elements will not change in the user's machine. add code in htaccess to your local machine (we will discuss how to operate it later in the article ).

Gzip parts: Gziping or compressing JS files, images, HTML documents, CSS documents, etc. Users can download small file versions to increase the loading speed of webpages. This reduces server consumption, but extracting components may also slow page response, depending on your browser.

Place CSS on top: Place the CSS file on the top of the website. It can be used to load other parts, such as and text, to the website as much as possible.

Put JS at the bottom: Place CSS in the header of the document. You only need to insert JS before closing <boby>. When these scripts are loaded in the background, you first get the seemingly complete page.

Avoid using CSS expressions: I have never used CSS expressions (called dynamic features). This is only a CSS feature dedicated to IE that adds programming concepts (such as control/conditional structure, as of IE8, the trigger Layout Engine (used in IE) is no longer supported. They don't have a good idea. To some extent, I will use PHP scripts to load different CSS style rules based on different conditions, such as a random number, a day, or a browser.

External calls of JS and CSS: Place JS and CSS files in external files, and the browser caches them with a faster page loading speed than each call.

Reduce DNS Lookup: As long as you type a domain name in the address bar of the browser, the browser will always perform DNS lookup IP addresses. The more portals the website has, the more DNS lookup is required. Maintain a low level as much as possible, and perform a DNS query on an average of 60 to milliseconds.

Zoom out JS: Unlike general gzip compression, narrowing down JS documents removes unnecessary spaces, tabs, and other matching characters to reduce the total size of files, A small page can get a faster loading speed. You can use jsmin to narrow down JavaScript.

Avoid redirection: Either server-side header redirection, JS redirection, or HTML element redirection. Your website will load the blank page header and then load a new page. Users will spend more and more time to get the required page, so they have to avoid this situation at all costs.

Remove duplicate scripts: Loading the same script on the browser increases the page loading time. This is a very simple mathematical problem. More files are equal to more loading times. Check your website carefully to ensure that you have not called jquery twice or three times or other scripts.

Whew... That was a lot, let's move on to the next tab of yslow just before we get into some other techniques to increase the performance of your website.

Figure 4: Part label.

Part tag (4) provides insight into the effect of increasing website loading speed. Here, you can see the time required for loading the current document, if these files are compressed, the response time, and if they are cached on the user's machine and when the cache expires. This is a good assessment of the website, measuring its performance and speed optimization. Finally, the Statistics tab (4) shows all HTTP requests, documents downloaded at the same time, and cached files. Empty cache displays the files on the rendering page to be downloaded by the browser. Primed cache, on the other hand, shows the list of files that already exist in the user's browser cache, thus saving the browser's need not download files again.

Figure 5: stats tab.

2. Use the CSS genie to reduce HTTP requests

CSS Sprites may be the most cool thing since Tesla invented the current. Well, I mean Edison.

Well, it's not big, but it's very compact.

CSS Sprites can merge your CSS background images to reduce HTTP requests from pages to services and easily reduce page loading time.

Many tutorials only teach you how to use the CSS genie to create navigation. I want to use it to create the user interface of the entire website.

First, let's take a quick look at YouTube and see how they use CSS Sprites (6). You cannot see the CSS sprite of YouTube here:

• Master-vfl87445.png

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

How can this be done? With CSS, YouTube sets a class that uses this image as the background (for example), and other elements only need to pass the background position attribute of CSS.background-positionSet the corresponding class to use these images.

Let's try it. We plan to use a YouTube image to create an instance.

In the following example, the YouTube logo is displayed on the screen. Use the same sprite class and the same icon to create a simple flip icon.

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

What we do now is to meet all static website requirements through a single HTTP request. This greatly reduces the webpage loading time.

When you use sprites to create a hover flip effect, the image replacement looks very short. Unlike loading a file in the flipped state, a large amount of white space is left until the file is fully loaded.

<style>
.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;
}

</style>

<div id="logo" class="sprite"> </div>

<a href="#" id="button" class="sprite"></a>

3. Load CSS first and then load Javascript

In some websites, you cannot avoid all HTTP requests that disrupt your functions.

In this regard, the following suggestions:

1. On the body<Head> labelLoad CSS
2. In</Body> labelLoad JavaScript before closing.

What will happen? The webpage is loaded and displayed on the user's machine, so their eyes start to scan the provided content. At this time, JavaScript just catches up with loading in the background.

Tip: if you do not want to move the Javascript flag, you think it will mess up the way the website works. I suggest usingdeferAttribute. The usage is as follows:

 <script defer='defer'>

4. Concurrent downloading with subdomain names

Parallel download, when you add file downloads. If you open the webpage's status bar in the footer, you will find that when loading other websites, you will request static.domain.com and c1.domain.com at the same time.

This is a great method to optimize the load performance. Although it is just a simple sub-domain name, the content is on the same server, but the browser is treated as an independent server.

Make the following settings:

1. Create three subdomains on the server
2. Place the image in a folder of each subdomain name
3. In the new subdomain name, replace the path of the website Image

Currently, JavaScript files cannot exceed two concurrency levels.

5. Adding an Expires header

Some websites are very rich. Even if the above technologies are used, the performance may seem to be increased more.

A user accesses your website and generates some necessary htt requests, such as pages, images, and scripts.

When you use the Expires header, You Can cache these elements on your local machine, which not only improves their access speed, but also saves your bandwidth. The Expires header can be used on all images, scripts, and CSS.

You only need to add a line of code to the. htaccess file in the root directory of your website. (If you do not have one, you can use a text editor to create one, save it as. htaccess, and upload it to the root directory .)

The following. htaccess. ICO,. PFD,. FLV (Flash type file),. jpg,. PNG and so on set a distant period of 2010 expiration.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Note:: If you set an Expires header that is too far away, you need to rename the Update file (version it). Otherwise, the cached user will not be able to see the update.

For example, if you have a Javascript file that needs to be updated, use the version number and then update all older versions of the file (I .e.. javascriptfile-1.0.js, javascriptfile-1.1.js)

Conclusion

This article is very informative, but I hope you can get some suggestions on how to accelerate webpage loading. If you have any suggestions or questions, please share them in your message!