How to improve page loading speed (ii)

Source: Internet
Author: User

Optimize Web page picture files
Your page must have pictures, loading a page often the total size of the picture is the largest, especially those color rich background pictures and the first mate advertising pictures. Therefore, in the case of the same picture quality, we should reduce the image size as much as possible. In Photoshop we can try it with the option to save as a web image. Pictures also have several commonly used file formats. JPEG is typically used to store photos or full-color images, such as photos, screens, etc. GIF image format color is less than JPEG, suitable for small pictures, such as making buttons, logos, etc., in addition to GIF support dynamic effects. PNG is similar to GIF, but it is larger in size, supports more colors than GIF, and PNG supports transparent backgrounds. We can try using a different format to save the picture, such as PNG and JPEG to GIF try.

Picture using height and Width properties
Will you add the height and Width properties to each picture? These two properties allow the browser to know the length and width of the image before loading it, and to set aside a specified long lenient image to display after loading. Without these two properties, the browser also needs to process the page layout style once the picture has been read successfully, which slows down the page loading speed. Therefore, it is best to use the upper and wider properties in the case of fixed image size.

CSS file compression thin body
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.

Add a slash (/) to the directory address
If visitors click to access such a directory address: Http://www.techolics.com/tools, go to open the index.html document in this directory. When the server receives the request it takes some time to analyze whether this is a file or a directory. But if we add a slash (/) at the end, the server will know that you are accessing a directory address and then simply load the default document index.html or index.php. This way the server does not have to take the time to analyze this address, but also play a role in accelerating.

Integrate CSS, JS files to reduce the number of HTTP requests
Today's Web pages have multiple images, CSS external file links, JavaScript external script links. So when accessing a Web page, the browser needs to request these files to the server multiple times. There is a lot of time difference between the request and the load. In particular, some Web pages have multiple small pictures, icon buttons of the page, how many pictures, the browser will need to request how much these small files, many will request these small image files will significantly affect the load speed of the page. So we should try to put small pictures together on a large PNG image, and then display the icon through the coordinates. Requesting a large picture at a time is much faster than asking for a small picture multiple times. Similarly, it's a good idea to integrate CSS and JavaScript into one file as much as possible to help speed up page loading.
In the end, there are only a few simple primary skins mentioned here, as these are the easiest ways to optimize. Next we also need to consider whether the Web page code (PHP or ASPX) is optimized for efficiency, server responsiveness, server bandwidth adequacy, and more in-depth factors. But if you put the above points into place, I believe that the speed of the page will improve a lot. So if you have more experience, please share it with us in the discussion area.

Reduce database calls: Page data call database query for reasons, the program to minimize the number of access to the database, the database uses a connection pool, it is best to use a static way, or with a CDN, no CDN can be cached to use the way to cache the dynamic data down.

IFRAME does not use:<iframe> page references too much, will affect the page loading speed, and search engine does not recommend the use of IFRAME, affecting crawler crawl.

JS file at the end of the HTML code: too many JS calls, affecting the page loading speed. As long as the page is not loaded when you have to execute the JS method, you can put JS calls and files to the bottom of the page, because the DOM parsing is from top to bottom, if the JS file contains the top, will be loaded after JS loading the page DOM.

CSS or JS code to merge: multiple CSS files or multiple JS files, it is best to merge into a file, reduce the number of HTTP requests, save load speed.

Using CSS Sprite (CSS sprite) to process the background image, all the background images are best to be integrated into a picture, do not store separately. (reduce the number of HTTP requests)

How to improve page loading speed (ii)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.