-
From entering a URL in the browser or opening a web page from a link elsewhere, until the entire web page is loaded, what files will the browser load during this process? First, let's take a look at what parts of the web page are composed of, 1. Web document is the text displayed on the web page. This is a relatively small part. 2. Pictures are the pictures displayed on the web page. Pictures account for the largest part of the entire page. 3. Objects. Which are object elements, such as Flash, plug-in videos, etc. This one is relatively large. 4. Scripts. This is mainly a js file, 5, style sheet, which controls the display effect of the web page.
Then, the larger the web page file is, the longer it will take for the browser to download the page from the server to display it. This is very bad for website SEO. For specific content, please refer to an article in SEM's "How does web page loading speed affect SEO effect". This article is relatively comprehensive. Some websites themselves may be affected by CMS. The reason may also be due to the server. The status bar of the browser is always in the request state. This should also be noted. Therefore, for a website, the total file size includes the content mentioned above, html, external CSS, external javascript, and the size of some files such as images, sounds, videos, flash, etc. on the web page. HTML, CSS, and Javascript among these files are all text files. These files can be formatted after the web page is written. However, modern web servers have text compression functions that administrators can set.
However, files such as images, sounds, videos, and flash account for a large proportion of the website, and these files are much larger than text files. They are an important factor affecting the download speed during the website opening process.
This is the size of the homepage of a domestic B2C mall.
This is the size of Taobao homepage
163 home page size, compared to portal websites, mall website pages are indeed relatively large. The picture above is a plug-in in Firefox. There is a function in web developer to check the size of the web page. This tool is very useful for technical analysis of websites. It has a powerful function. Friends in need can install it and use it. It also requires a lot of SEO. Analyze the underlying code of the website, analyze the website of competitors, etc.
Under normal circumstances, what is the appropriate size of each page? Even so-called experts generally disagree on this issue. If your website requires professional-quality graphics, then it is impossible to comply with the "20k rule", such as In today's e-commerce malls, the processing effect of pictures and the feeling of sales fees are different. For example, some websites make special topics, most of which are pictures. At this time, when designing the page, you can cut the large pictures into smaller pictures. Small parts, such as the domestic moonbas mall, although it is a special topic, they divide the big picture into many small parts, so that when the user opens the webpage, the webpage is loaded faster, and the website opening speed will greatly affect the user. Just imagine, a website opens very slowly, how long do you usually wait? Don’t let users wait too long, otherwise you will lose potential users or orders.
So, what are the best things to do to lose weight on the web pages of your website?
1. Put most of the css style sheets and javascript files into external files of the web page, write them in a separate file, and only reference these files when the website is opened for the first time before loading. Then, any page of the website can reuse these files without needing to download them again. Although these files may not be very large, if they have to be loaded every time a new page is opened, these are also part of saving user bandwidth.
2. If possible, try to use graphics, audio, and video on different pages. These files are also loaded the first time they are used.
3. Do not use unnecessary pictures, animations, and sounds. Whether it is for practicality or to increase the beauty of the website, each file should have a reason for its existence. Some pictures are used to fill in the blanks, like this Pictures can be removed.
4. Try to use small-sized pictures instead of large-sized pictures, because under the same circumstances, small pictures download faster. If you do not have high requirements for picture pixels, you can use pictures in gif format. For example, do The background image can be repeated in small sizes instead of using a large image as the background. For example, in some shopping mall websites, the images on thematic pages can be cut into small-sized images, which can speed up the opening of your web page.
5. Minimize the use of images for flipping effects in navigation buttons, because different images need to be downloaded. On the contrary, if text links are used, the same effect can be achieved by using CSS to control flipping.
The above basically lists the relevant factors that affect the size of the web page. There may be some that have not been found. I hope that some friends will find out more factors that affect the optimization of the web page.
Author information: Liu Yunwei's blog
Thanks kitwer for your contribution