The Internet bandwidth is getting wider and wider, which seems to have made a qualitative leap in the loading speed of web pages. In fact, this is not the case, because with the increase of bandwidth, there are more and more objects on the web page, so speeding up the opening speed of web pages is still an important issue. There are three ways to speed up the opening speed of web pages. One is to increase the network bandwidth, the other is to optimize the user's local machine, and the third is to optimize the web page to a certain extent by the website designer. This article is from the perspective of a website designer and shares some tips for optimizing web page loading speed.
1. Optimize images
There is almost no web page without images. If you have experienced the era of 56K cats, you will 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 cats are gradually fading out. It is still necessary to optimize images 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 necessary, try to reduce the quality of the image, especially in jpg format. A 5% reduction in quality may not seem like a big change, but the change in file size is relatively large.
3. Use appropriate formatting: see next point.
Therefore, you need to edit the image before uploading it. If you think photoshop is too troublesome, you can try some online image editing tools. Too lazy to edit but want to have special effects on your pictures? You can try calling javascript to achieve image effects.
2. Selection of image formats
There are generally three image formats used on web pages, jpg, png, and gif. The specific technical indicators of the three formats are not the content of this article. We only need to know which format should be used when to reduce the loading time of the web page.
1. JPG: Generally used to display photography works of landscapes, people, and artistic photos. Sometimes used in computer screenshots.
2. GIF: It provides fewer colors and can be used in places where color requirements are not high, such as website logos, buttons, emoticons, etc. Of course, an important application of gif is animated pictures. Like a reflection picture made with Lunapic.
3. PNG: The PNG format can provide a transparent background and is an image format specially invented for web page display. Generally used on web pages that require transparent background display or high image quality requirements.
3. Optimize CSS
CSS cascading style sheets make web pages load more efficiently and improve the browsing experience. With CSS, table layout can be retired.
But sometimes we use some more wordy statements when writing CSS, such as this sentence:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
You can change it Simplified 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>
can be included in a div:
<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>
Simplifying CSS can remove redundant attributes and improve operating efficiency. If you are too lazy to simplify the CSS after writing it, you can use some online simplified CSS tools, such as CleanCSS.
4. Add a slash after the URL.
For some URLs, such as "www.kenengba.com/220", when the server receives such an address request, it takes time to determine the file type of this address. If 220 is a directory, you might as well add an extra slash after the URL to make it www.kenengba.com/220/ , so that the server can clearly know at a glance that it wants to access the index or default file in the directory, thus saving on loading. time.
5. Marking the height and width
is very important, but many people always ignore it due to laziness or other reasons. When you add images or tables to 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 images, the browser needs to constantly adjust the page. This not only affects the speed, but also affects the browsing experience.
The following is a friendly image code:
<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />
</p>
When the browser knows the height and width parameters, even if the image cannot be displayed temporarily, it will make room for the image on the page and continue to load the following content. The result is faster loading times and a better browsing experience.
6. Reduce http requests.
When a viewer opens a web page, the browser will issue many object requests (images, scripts, etc.). Depending on the network delay, the loading of each object will be delayed. If there are many objects on the page, this can take a lot of time.
Therefore, it is necessary to reduce the burden on http requests. How to reduce the burden?
1. Remove some unnecessary objects.
2. Combine two adjacent pictures into one.
3. Merge CSS.
Take a look at the following code. Three CSSs need to be loaded:
<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 combine it into one:
<link rel= ”stylesheet” type=”text/css” href=”/style.css” />
Thus reducing http requests.
7. Other tips
1. Remove unnecessary add-ons.
2. If widgets from other websites are embedded on the web page, if you have a choice, be sure to choose the one with fast speed.
3. Try to use pictures instead of flash, which is also good for SEO.
4. If some content can be made static, make it static to reduce the load on the server.
5. The statistical code is placed at the end of the page.