With the increase in bandwidth, there are more and more objects on the web page, so it is still an important topic to speed up the opening of web pages. There are three ways to speed up the opening of web pages: one is to increase network bandwidth, the second is to optimize the user on the local machine, and the third is to optimize the web pages by website designers. This article is based on the perspective of a website designer and shares some tips for optimizing web page loading speed.
1. Optimize pictures
There is almost no web page without pictures. If you have experienced the age of 56K cats, you will definitely not like websites with a lot of pictures. Because loading such a web page will take a lot of time.
Even now, network bandwidth has improved a lot, and 56K Cat has gradually faded out, and it is still necessary to optimize pictures to speed up web pages.
Optimizing images includes reducing the number of images, reducing image quality, and using appropriate formats.
1. Reduce the number of pictures: remove unnecessary pictures.
2. Reduce image quality: If it is not very necessary, try to reduce the quality of the image, especially the jpg format. Reducing the quality by 5% does not seem to change much, but the file size changes are relatively large.
3. Use the appropriate format: see the next point.
Therefore, before uploading pictures, you need to edit the pictures. If you find photoshop too troublesome, you can try some online image editing tools. Are you too lazy to edit but want pictures to have special effects? You can try to use calling javascript to implement image special effects.
2. Selection of image format
There are three image formats generally used on web pages, namely jpg, png, and gif. The specific technical indicators of the three formats are not what this article discusses. We only need to know when and what format should be used to reduce the loading time of the web page. .
1. JPG: Photographs that are generally used to display landscapes, characters, and artistic photos. Sometimes it is also used on computer screenshots.
2. GIF: There are fewer colors provided, and can be used in some places where there is not high demand for color, such as website logos, buttons, expressions, etc. Of course, an important application of gif is animation pictures. Like a reflection picture made with Lunapic.
3. PNG: The PNG format can provide a transparent background and is a picture format specially invented for web page display. It is generally used on web pages that require transparent background display or require high image quality.
3. Optimize CSS
CSS overlay style sheets make web pages more efficient to load and improve browsing experience. With CSS, the form layout method can be retired.
But sometimes when we write CSS, we use some more wordy sentences, such as this sentence:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
You can simplify it to:
margin: 10px 20px 10px 20px;
Or this sentence:
＜p class="decorated">A paragraph of decorated text＜/p>
＜p class="decorated">Second paragraph＜/p>
＜p class="decorated">Third paragraph＜/p>
＜p class="decorated">Forth paragraph＜/p>
You can use div to include:
＜div class="decorated">
＜p>A paragraph of decorated text＜/p>
＜p>Second paragraph＜/p>
＜p>Third paragraph＜/p>
＜p>Forth paragraph＜/p>
＜/div>
Simplified CSS can remove redundant attributes and improve operational efficiency. If you are too lazy to simplify after writing CSS, you can use some online simplified CSS tools, such as CleanCSS.
4. Add a slash on the back of the URL
Some URLs, for example, when a server receives such an address request, it takes time to determine the file type of the address. If the web is a directory, you might as well add an extra slash to the URL to make it / so that the server can clearly know to access the index or default file in the directory, thus saving loading time.
V. Indicate height and width
This is important, but many people always ignore it because of laziness or other reasons. When you add images or tables on a web page, you should specify their height and width, that is, the height and width parameters. If the browser does not find these two parameters, it needs to calculate the size while downloading the image. If there are many pictures, the browser needs to constantly adjust the page. This not only affects speed, but also affects browsing experience.
Here is a relatively friendly image code:
＜img id="moon" height="200" width="450" src=" />
When the browser knows the height and width parameters, even if the image cannot be displayed for the time being, the image will be freed on the page and then the subsequent content will continue to be loaded. Therefore, the loading time is faster and the browsing experience is better.
6. Reduce http requests
When a browser opens a web page, the browser will issue many object requests (images, scripts, etc.). Depending on the network delay, each object will be loaded with a delay. If there are many objects on the web page, this can take a lot of time.
Therefore, we need to reduce the burden on http requests. How to reduce the burden?
1. Remove some unnecessary objects.
2. Combine the two nearby pictures into one.
3. Merge CSS
Take a look at the following code and you need to load three CSS:
＜link rel="stylesheet" type="text/css" href="/body.css" />
＜link rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
We can synthesize it into one:
＜link rel="stylesheet" type="text/css" href="/style.css" />
This reduces http requests.
7. Other tips (added by the translator)
1. Remove unnecessary add-ins.
2. If you embed widgets from other websites on the web page, if you have room for choice, you must choose a fast one.
3. Try to use pictures instead of flash, which is also beneficial to SEO.
4. If some content can be static, it will be static to reduce the burden on the server.
5. Statistical code is placed at the end of the page.