April 6 Study notes-How to improve page loading speed (front-end interview Test center)

The loading speed of Web pages is an important indicator for evaluating website quality. The reason is that most users can tolerate a page load time of only a few seconds, if beyond the reach of the visitors they will mercilessly shut down your page, so page loading speed will greatly affect the traffic and access to the site. The following summarizes a few of the most obvious ways to improve the speed of the site's initial simple skills, if your site has a slow load of the problem may be used as a reference to the page to do some preliminary optimization.

• Accelerated Web page loading – Optimize Web page image 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.

• Page loading speed up – images using the 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.

• Page loading speed up –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.

• Page load speed up – 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.

• Accelerated Web page Loading – 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.

April 6 Study notes-How to improve page loading speed (front-end interview Test center)